angular - 等待 Angular 2 中的 Http 响应

Question

我在 Angular 2 中使用 HTTP 请求。我希望在收到 HTTP 响应时调用下一个进程。

示例:在表单中，选择选项值来自HTTP get Request。我想形成页面一直在加载，直到我收到对选择选项的响应。

获取函数

getSelectOptionValue(): any {
      let area_list_url = '/select_option_list/';

      this.urlGet(area_list_url).subscribe(
        (response) => {
          let data = response.text() ? response.json() : [{}];
          if (data) {
            Constant.areaList = data;
          }
        }
      );
    }
    return JSON.stringify(Constant.areaList);
  }

获取函数

 urlGet(url: string) {

    return this._http.get(Constant.hostUrl + url, {headers: GlobalUtils.head})
      .map((res)=> {
        if (res.status === 200) {
          console.log(res);
          return res;
        } else if (res.status = 201) {
          return res;
        }
      }).catch((error)=> {
        console.log(error);

        if (error.status === 400) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 401) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 403) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 404) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 420) {
          return Observable.throw(new Error(error.status));
        } else {
          return Observable.throw(new Error(error.status));
        }
      });
  }

Answer 1

您不能让代码等待异步调用返回。

你可以做的是链接异步调用，这样当异步调用返回时，你的一些代码就会被执行。

如果您使用 map() 而不是 subscribe() 您可以返回创建的 Observable 供调用者订阅。如果您调用 subscribe()，返回值将是一个 Subscription，但这通常对调用者不是很有用:

getSelectOptionValue(): any {
      let area_list_url = '/select_option_list/';

      return this.urlGet(area_list_url).map( /// <<<=== use `map` here
        (response) => {
          let data = response.text() ? response.json() : [{}];

          if (data) {
            Constant.areaList = data;
          }

          return JSON.stringify(Constant.areaList);
        }
      );
    }
}

然后像这样使用它:

this.getSelectOptionValue().subscribe(data => {/* your code that works with received data here */ });