使用 Firebase 在 Angular 2 中进行同步调用答案

【问题标题】：Making synchronous call in Angular 2 with Firebase使用 Firebase 在 Angular 2 中进行同步调用
【发布时间】：2018-01-22 16:12:44
【问题描述】：

我有一项服务需要先将图片上传到 Firebase 存储并返回下载网址。获得下载网址后，我需要将其存储到 Firebase 实时数据库中。

但这里的问题是 Firebase 调用是异步的。

这是我的代码：

 addCategory(category){

let storageRef = firebase.storage().ref(`category/${category.img_name}`);
    //Upload file

    storageRef.put(category.url)
      .then((snapshot) => {
    // Here i will get download url
        var downloadUrl = snapshot.downloadURL;
        category.category_icon = downloadUrl.toString();

      })

     //Problem occurs here return is executed before .then statement and my download url becomes undefined.

        return this.http.post('https://app_name.cloudfunctions.net/api/products',body,{headers:headers})
        .map(res =>res.json());
  }

所以我需要知道是否有可能停止使此调用 (storageRef.put()) 同步，以便我的 return 语句仅在 .put() 调用完成后触发。

提前致谢！！

【问题讨论】：

标签： angular firebase firebase-realtime-database angular2-services firebase-storage

【解决方案1】：

当您想等待执行完成时，您应该从第一个“then”返回 URL，然后第二个“then”将在第一个“then”完成后执行

addCategory(category){



let storageRef = firebase.storage().ref(`category/${category.img_name}`);
        //Upload file
        return storageRef.put(category.url)
              .then((snapshot) => {
                return snapshot.downloadURL
              }).then(url => { // this will excute after you get the url
                  category.category_icon = url.toString();
                  return this.http.post('https://app_name.cloudfunctions.net/api/products',body,{headers:headers})
                 .map(res =>res.json());


                  })
}

你这样调用 addCategory

addCategory(category).then(obs => {
 obs.subscribe(res => {
 // add your code here
})
    })

【讨论】：

是的！我也试过了。但是我调用此服务函数 addCategory(category) 的组件需要 Return 语句。所以我不能在 .then() 中发布 http 帖子。如果我这样写它不起作用。因为我的调用函数使用 .订阅
@PraveenCool 不期望返回声明。除非你这样做，否则你将无法解决你的问题。相反，你应该让它期待一个可以链接的承诺。

【解决方案2】：

经过大量研究，我找到了解决方案。

    addCategory(category){

       // this.uploadImage(category);

    //Upload file


    let storageRef = firebase.storage().ref(`category/${category.img_name}`);

    storageRef.put(category.url)
      .then((snapshot) => {
        var downloadUrl = snapshot.downloadURL;
        category.category_icon = downloadUrl;
        let body = this.categoryRefService.buildRequestBody(category);
        let headers = this.categoryRefService.setHeaders();

        return this.http.post('https://us-central1-app-name.cloudfunctions.net/api/products',body,{headers:headers})
        .map(res =>res.json())
  // Just moved my http request inside firebase promise and subscribed to http call here
        .subscribe(data => {
        this.result = data
      });

      })

  }

【讨论】：