变量在 Ionic 中定义答案

【问题标题】：variable is defined in the Ionic变量在 Ionic 中定义
【发布时间】：2019-04-18 22:48:01
【问题描述】：

我在构造函数中声明了一个变量，如下所示

constructor(public http: HttpClient) {
    this.data = null;
    this.http.get(this.url).subscribe((datas: any) => {
      this.dbUrl = datas[0].db_url2;
      console.log(this.dbUrl) // <- this output
    })
  }

在这里我可以看到我的输出为

987456321

但是我在同一个类中用不同的方法声明了变量。

getDetails() {
    let headers = new HttpHeaders();
    headers.append('Content-Type','application/json');
    console.log(this.dbUrl); // <- this output
    return this.http.get(this.dbUrl + 'details', { headers: headers})

  }

当我显示输出时，它显示为Undefined。 dbUrl 是一个全局变量。有人可以帮我解决这个问题吗？

【问题讨论】：

你什么时候打电话给getDetails？ http.get 是一个异步方法，所以如果你尝试在 http.get 完成之前调用 getDetails，那么 dbUrl 还没有准备好。
getDetails() 函数应该等待 http.get() 完成。

标签： javascript typescript ionic2 ionic3

【解决方案1】：

在您的第一部分代码中，您正在进行 HTTP 调用，并且此调用订阅了 Observable，这意味着它不会立即返回结果（因为这是一个 Web 请求）。它会观察http.get 的变化。

在您的第二部分代码中，您正在记录 dbUrl，但您的代码执行速度比您的应用完成请求所需的时间要快。所以这就是为什么 dbUrl 没有在第二个日志中设置：

1) dbUrl 未定义
2) 您正在调用 http.get 函数，该函数正在从服务器等待
3) 你正在调用getDetails，你登录dbUrl，它是空的
4) 你从服务器得到响应，然后你设置dbUrl

你可以这样做：

// Create a method to get the dbUrl. This functions will return a `promise`.
getUrl(){
    return new Promise<any>(
    function (resolve, reject) {
      this.http.get(this.url).subscribe((datas: any) => {
        this.dbUrl = datas[0].db_url2;
        resolve(this.dbUrl);
      }
}

然后，修改你的getDetails 方法：

getDetails() {
    // If `this.dbUrl` has not been set yet
    if(this.dbUrl == undefined){
          this.getUrl()
          .then(url => {
            this.dbUrl = url;
            this.getDetails();
           })
          .catch(error => console.log(error))
        })
    }else{
        let headers = new HttpHeaders();
        headers.append('Content-Type','application/json');
        return this.http.get(this.dbUrl + 'details', { headers: headers})
    }
}

当你调用getDetails时，如果dbUrl还没有准备好，它会等待它的值，然后递归调用getDails，最后执行你的请求

【讨论】：