在執行代碼之前解析Angular2上的Http Request

Question

我在執行其他代碼之前嘗試解析http.post請求時遇到問題。

這是地方：

  getRefresh(token){
    debugger;
    console.log("sono dentro get refresh");
    console.log(token);
    let params = new URLSearchParams();
    params.append('grant_type','refresh_token');
    params.append('refresh_token',token);
    params.append('client_id','web_app');

    let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8','Authorization': 'Basic '+btoa("web_app:")});
    let options = new RequestOptions({headers: headers});

    this._http.post('http://localhost:9997/oauth/token',params.toString(),options)
      .map(res => res.json())
      .subscribe(
        data => this.saveToken(data),
        err => alert('Invalid Credentials')
      );
  }

通過瀏覽器控制台進行控制流之后，我注意到saveToken方法沒有盡快執行。

事實是，我需要該方法來注冊一些cookie，在此重復使用：

if (!Cookie.get("access_token")) { 
      this.getRefresh(Cookie.get("refresh_token"));
      cookie = Cookie.get("access_token");

    } else {

      cookie = Cookie.get("access_token");
    }

      var headers = new Headers({
        'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
        'Authorization': 'Bearer ' +  cookie                                 
      });

      var options = new RequestOptions({headers: headers});

      return this._http.get(resourceUrl, options)
        .map((res: Response) => res.text())
        .catch((error: any) => Observable.throw(error().json().error || 'Server error'));

如何解決可觀察的異步問題？

Answer 1

更改您的getRefresh(token)方法以返回可觀察到的值，並在調用代碼中使用它：

function getRefresh(token) {
    debugger;
    console.log("sono dentro get refresh");
    console.log(token);
    let params = new URLSearchParams();
    params.append('grant_type', 'refresh_token');
    params.append('refresh_token', token);
    params.append('client_id', 'web_app');

    let headers = new Headers({ 'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Basic ' + btoa("web_app:") });
    let options = new RequestOptions({ headers: headers });

    return this._http.post('http://localhost:9997/oauth/token', params.toString(), options)
        .map(res => res.json())
        .flatMap(
            data => this.saveToken(data),
            err => alert('Invalid Credentials')
        );
}

function getResource() {
    var cookie = Cookie.get("access_token");
    var headers = new Headers({
        'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
        'Authorization': 'Bearer ' + cookie
    });

    var options = new RequestOptions({ headers: headers });

    return this._http.get(resourceUrl, options)
        .map((res: Response) => res.text())
        .catch((error: any) => Observable.throw(error().json().error || 'Server error'));
}

function callingCodeFunction() {
    if (!Cookie.get("access_token")) {
        this.getRefresh(Cookie.get("refresh_token"))
            .flatMap((result) => {
                getResource();
            });
    } else {
        getResource()
    }
}

*我尚未運行此代碼-可能會出現錯誤，但它應該有助於證明原理。