Question

我有一个http覆盖类，可以将我的授权标题添加到我在Ionic2 / Angular2应用程序中进行的每次调用。我已经使用硬编码的授权值进行测试，但是现在我需要添加从本地存储获取凭据的部分（使用Ionic2 LocalStorage）并且我在返回我的服务时遇到问题。我收到错误“无法读取[null]中未定义的属性'map'。”

我觉得有一些非常简单的事情我会像“返回”或者我的嵌套承诺（我希望尽可能简化，但一次只有1个问题）。 Ionic 2和Angular 2都很新，所以我无法在网上找到合适的解决方案。我没想到LocalStorage会回复一个承诺。

这是我的HttpClient拦截器类的代码：

getAuth(){
  return this.local.get("UserName")
    .then(res => {
      this.user = res;
      return this.local.get("Token").then( res => this.session=res );
    });
}

get(url) {
  let headers = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=utf-8'
  });
  let params = new URLSearchParams('format=json');

  this.getAuth().then(() => {
    var authHeader = 'Basic ' + this.encode(this.user + ':{SessionToken}' + this.session);
    headers.append('Authorization',authHeader); 

    return this.http.get(url, {
      headers: headers,
      search: params
    });        
  });
}

标题是正确的，对.get的调用本身就可以正常工作。只有当我在我的服务中使用它并尝试.map（）时才会收到错误。我的服务中有导入'rxjs / add / operator / map'; 。这就是我从服务中调用它的方式：

getTodos(id){
  var url: string = this.global.APIUrl + "/" + id;

  return this.httpClient.get(url)
    .map((res)=> res.json());
}

当浏览器刷新时，我得到：

无法在[null]
中读取未定义的属性“map”

如果此时console.log(this.httpClient.get(url))，它返回一个promise，但错误表明它返回“undefined”。也许HttpClient类没有正确编译，但我没有从该类中得到任何错误来找出错误。

Answer 1

我会尝试使用Observable.fromPromise和flatMap运算符：

get(url) {
    let headers = new Headers({
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=utf-8'
    });
    let params = new URLSearchParams('format=json');

    return Observable.fromPromise(this.getAuth())
      .flatMap(() => {
        var authHeader = 'Basic ' + this.encode(this.user + ':{SessionToken}' + this.session);
        headers.append('Authorization',authHeader); 

        return this.http.get(url, {
          headers: headers,
          search: params
        });        
      });

问题是你在当时指定的promise回调中返回你的observable，而不是get方法。这就是您遇到undefined错误的原因。

来自LocalStorage的具有授权标头的HTTP客户端 - Ionic2 / Angular2 App

1 个答案: