异步 AJAX 响应问题

Question

我在 Angular 2 中遇到 HTTP 请求的响应问题。我正在使用“.subscriber”来获取 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 响应问题

Asynchronous AJAX Response Issue

javascript

ajax

angularjs

angular2-services