Question

我在 Angular 2 中遇到来自HTTP请求的响应问题。我正在使用＆＃34; .subscriber ＆＃34;获取HTTP请求的响应。

以下是我写的代码：

NewJobDetailsComponent.ts：

ngOnInit() {
  this.masterData = this.masterDataS.getMasterData(["designations"]);
//code breaking at below line
  this.designations = this.masterData["designations"]; 
}

MasterDataS.ts：

private masterData = {};
private baseUrl = "some URL";
getMasterData(keys) {
  let missingData = [];
  for (let key of keys) {
    this.baseAjaxService.doPost(this.baseUrl, missingData)
        .subscribe(data => {
              this.masterData[key] = data[key];
              this.sessionStorage.setValue(key, data[key]);
        });
  }
  return this.masterData;
}

在上面的代码中，我从服务器获取一些数据，之后我必须使用结果来分配给this.designations。

现在为了使服务普遍可用，我必须在MasterDataS.ts中为此请求使用.subscriber。因此，我无法在NewJobDetailsComponent.ts

中编写.subscriber

但是，NewJobDetailsComponent.ts中的代码取决于HTTP请求的结果。如何以同步方式编写代码，以便在获得HTTP结果之后只执行以下语句？

this.designations = this.masterData["designations"];

在大多数情况下，我只会更改此类问题。

Answer 1

您必须重构代码才能实现稳定的异步代码处理。

// javascript Async mixed with Sync code?

getMasterData(keys) {
  console.log(1);

  let missingData = [];
  for (let key of keys) {
    console.log(2);

    this
    .baseAjaxService
    .doPost(this.baseUrl, missingData)
    .subscribe(data => {
        console.log(3);

        this.masterData[key] = data[key];
        this.sessionStorage.setValue(key, data[key]);
    });
  }

  console.log(4);
  return this.masterData;
}

// but instead you get
// 1
// 2 x keys lenght
// 4
// 3 x resolved times

有人问道，这是你的问题的解决方案，但是，请记住，理解异步代码执行是javascript中的主要概念之一，因此，我建议你不要复制我的代码，而是自己做：

getMasterData(keys) {

  return Promise
    .all(
      keys
        .map(() => (
          this
            .baseAjaxService
            .doPost(this.baseUrl, missingData)
            .toPromise()
            .then(data => data[key])
        ))
    )
  ;
}


// Component

ngOnInit() {
  this.masterData = this
    .masterDataS
    .getMasterData(["designations"])
    .then(results => {
      this.designations = results["designations"]
      // do whatever you want with this.designations
    })
  ;
}

异步AJAX响应问题

1 个答案: