Question

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

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是全局变量。有人可以帮我吗？

Answer 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，最后执行您的请求

变量在Ionic中定义

1 个答案: