如何等待http请求以角度8中的订阅方法返回响应？答案

【问题标题】：how to wait for http request for returning response with in subscribe method in angular 8?如何等待http请求以角度8中的订阅方法返回响应？
【发布时间】：2021-03-14 19:43:11
【问题描述】：

在我的情况下，获取数据但数据没有根据我想要的请求进行排序，当我调用第一个 HTTP 请求时，它首先将值分配回我的数组，然后移动到下一个 API 调用，但在这种情况下，数据未排序或未将正确的 id 分配给我的数组。

this.imagesdataarray.forEach(imagedata => {
imagedata.imagesnamearray.forEach(imagename => {
const fd = new FormData();
fd.append('userID', this.userid );
fd.append('projectID', imagedata.projectid);
fd.append('id', imagename.imageid);
fd.append('formFiles', imagename.image);


this.http
.post('http://api.interiordesigns2020.com/api/services/app/ImageProject/CreateProjectImages', fd)
.subscribe( async (res) => {
imagename.imageid = await res.result;
});

})
});

【问题讨论】：

我不明白你为什么在这里使用 async/await。 Angular HTTPClient 为它的每个请求（post、put、delete...）返回一个 observable。你只需要订阅它。请尝试从您的代码中删除 async 和 await 。另外我建议阅读一些关于 rxjs 的内容。

标签： javascript angular typescript http asp.net-core

【解决方案1】：

在这种情况下，您需要使用 toPromise() 和 await 关键字。它将等待请求完成，然后再移动到下一个循环并发送新请求。

var res= await this.http
.post('http://api.interiordesigns2020.com/api/services/app/ImageProject/CreateProjectImages', fd).toPromise();

imagename.imageid = res.result;

记得相应地使用 async 关键字。

【讨论】：

【解决方案2】：

请，将 Observable 转换为 Promise 不是一个好的解决方案。 observables 的伟大之处在于您可以加入、合并、forkjoin、swhitchMap..

在这种情况下，您应该使用 map 创建一个 observable 数组并使用 forkJoin 进行唯一订阅

//create an array of observables
const obs$=this.imagesdataarray.map(imagename =>{
    const fd = new FormData();
      fd.append('userID', this.userid );
      fd.append('projectID', imagedata.projectid);
      fd.append('id', imagename.imageid);
      fd.append('formFiles', imagename.image);
      return this.http.post('http://.....', fd)
  })

//subscribe to a forkJoin of the array of observables
//"res" is an array with the response to the first call, the second call..
//so you can in subscribe use some like:
forkJoin($obs).subscribe((res:any[],index)=>{
   this.imagesdataarray[index].response=res[index];
})

顺便说一句，你可以直接使用-不需要formData-

const obs$=this.imagesdataarray.map(imagename =>{
    const fd = {'userID':this.userid,
                'projectID':imagedata.projectid,
                'id':imagename.imageid,
                'formFiles':imagename.image
               }
      return this.http.post('http:...', fd)
  })

【讨论】：

【解决方案3】：

这是我的方式：

   this.imagename.imageid = await new Promise<any>(resolve =>  this.http.post('http://api.interiordesigns2020.com/api/services/app/ImageProject/CreateProjectImages', fd)
    .subscribe( res => { resolve(res.result);
    //imagename.imageid = res.result;}
));
// Remaining code or function call

【讨论】：