Question

在我的angular 2项目中，我打电话来获取一些数据：

this.http.getfromgraphql()
      .map((response: Response) => response.json())
      .subscribe(
        (data) => {
          console.log(data);
        });

这会触发下面显示的getfromgraphql函数，但在我调用之前，我必须检查访问令牌在checkaccesstokenvalidity中是否仍然有效，在那里我设置了一些变量并解析了该函数。
控制台记录＆＃39;然后＆＃39;但是我的http帖子没有触发那是为什么？
此外，我相信有更好的方法可以做到这一点，但对于我的生活，我无法弄明白，更好的解决方案非常感谢

checkAccessTokenValidity() {
    let headers = new Headers();
    headers.append( 'Content-Type', 'application/x-www-form-urlencoded' );
    let options = new RequestOptions({ headers: headers });
    // if(!this.access_token) {
    return new Promise((resolve, reject) => {
      this.http.post(this.URL + 'oauth/token', this.authentication, options)
        .subscribe(function(response) {
            this.authObj = response.json();
            this.expirationDate = new Date();
            this.expirationDate.setSeconds(this.expirationDate.getSeconds() + this.authObj.expires_in);
            console.log(this.authObj, this.expirationDate);
          },
          error => console.log("Error: ", error),
          function() {
            console.log('resolving');
            resolve();
          });

    });
    // }
  }
  getfromgraphql() {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    // headers.append('Authorization', 'Bearer ' + this.access_token );
    let options = new RequestOptions({ headers: headers });

    this.checkAccessTokenValidity().then(function() {
      console.log('in then');
      //noinspection TypeScriptValidateTypes
      return this.http.post(this.URL + '/api/v1/graphql', this.query, options);
    });
  }

Answer 1

我不明白为什么你在做this.http.getfromgraphql()但是为了其他人代码以反应方式如下：

checkAccessTokenValidity() {
    let headers = new Headers();
    headers.append( 'Content-Type', 'application/x-www-form-urlencoded' );
    let options = new RequestOptions({ headers: headers });
    return this.http
               .post(this.URL + 'oauth/token', this.authentication, options)
               .map(response => {
                   this.authObj = response.json();
                   this.expirationDate
                      .setSeconds((new Date())
                      .getSeconds() + this.authObj.expires_in);
               });
      }

getfromgraphql() {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    // headers.append('Authorization', 'Bearer ' + this.access_token );
    let options = new RequestOptions({ headers: headers });

    this.checkAccessTokenValidity()
        .switchMap(token =>  this.http
               .post(this.URL + '/api/v1/graphql', this.query, options)   
 }

您调用此方法的方式是

someService.getfromgraphql()
           .subscribe(response=> {
// ....
});

Answer 2

第1点：

请勿在任何回调中使用function(){}。假设您正在使用Typescript（或ES6），那么您没有使用lexical这个。您的所有this都将引用内部范围。你会得到很多未定义的。使用胖箭头符号()=>{}。

第2点：

由于您已在所有方法中使用Observables，因此请继续使用它们（反应式编程），除非必要，否则不要使用Promise。

在getfromgraphql()方法中，只需使用flatMap()即可。它与承诺中的.then()相同。

此外，在解决错误时，只需根据需要执行.catch()。 Observables会将错误传播给最高调用者。

checkAccessTokenValidity() {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.URL + 'oauth/token', this.authentication, options)
        .map(response => {
            this.authObj = response.json();
            this.expirationDate = new Date();
            this.expirationDate.setSeconds(this.expirationDate.getSeconds() + this.authObj.expires_in);
            console.log(this.authObj, this.expirationDate);
        })
        .catch(error=>{
            console.log(error);
            return Observable.empty();
        })
}

getfromgraphql() {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    // headers.append('Authorization', 'Bearer ' + this.access_token );
    let options = new RequestOptions({headers: headers});

    return this.checkAccessTokenValidity().flatMap(()=>{
        console.log('in then');
        //noinspection TypeScriptValidateTypes
        return this.http.post(this.URL + '/api/v1/graphql', this.query, options);
    })
}

Answer 3

尝试用以下内容替换您的帖子：

return this.http.post(this.URL + '/api/v1/graphql', this.query, options).subscribe(() => {});

并查看它现在是否有效。

Answer 4

使用此

split("\\|")

或在订阅中添加resolve（）

return this.http.post(this.heroesUrl, { name }, options)
       .toPromise()

而不是错误解决，您可以在错误正文中使用reject（）

以下plunker会帮助你 https://embed.plnkr.co/?show=preview 检查app / toh文件夹中的hero.service.promise.ts

http调用不会在promise回调angular 2中触发

4 个答案:

第1点：

第2点：