等待角度2的Http响应

时间:2016-10-18 08:11:22

标签: angular typescript

我在角度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);
  }

GET功能

 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));
        }
      });
  }

1 个答案:

答案 0 :(得分:11)

您无法让代码等待异步调用返回。

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

如果您使用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 */ });