Angular 如何逐个调用api而不是并发调用

更新：答案末尾的完整解决方案。

---

代码如下：

@Injectable（）
导出类文件上载程序{
构造函数（私有http:http）{}
上载（url:字符串，文件：文件）{
让fileReader:fileReader=newFileReader（）；
返回新承诺（（解决、拒绝）=>{
fileReader.onloadend=（e）=>{
//您可以在此处使用读取数据执行操作
让content=fileReader.result；
log（“开始上传”）；
返回此.http.post（url、内容）
.map（（res）=>res.json（））.toPromise（）；
};
readAsArrayBuffer（文件）；
});
}

和用法一样

this.fileuploader.upload（'/backend/upload'，content）。然后（）；//做点什么

但当用户选择许多文件（如FB上的唱片集创建）时，所有文件将同时上载，从而完全阻塞浏览器

我的计划是在某些属性中放置承诺数组，另一个私有方法将触发第一个；完成后，承诺将再次调用该方法，以便新的上载开始，直到所有操作完成

我尝试的所有组合都失败了，我甚至无法编译它们。即使上面的代码不是我的，而是从其他问题中挑选出来的

如何做到这一点

---

编辑：根据@toskv的答案，这是我现在使用的解决方案。我更新了答案，以防其他人遇到同样的问题

再次感谢@toskv的帮助

@Injectable（）
导出类文件上载程序{
private currentTask:Promise=null；
构造函数（私有http:http）{}
上载（url:字符串，文件：文件）{
让动作=（）=>{
返回新承诺（（解决）=>{
让fileReader:fileReader=newFileReader（）；
fileReader.onloadend=（e）=>{
让content=fileReader.result；
返回此.http.post（url、内容）
.map（（res）=>res.json（））.toPromise（）
。然后（（json）=>{
解析（json）；
});
};
readAsArrayBuffer（文件）；
})
};
返回此.doNext（操作）
}
private doNext（动作：（）=>承诺）：承诺{
if（此.currentTask）{
//如果某件事正在进行中，在完成后再做
this.currentTask=this.currentTask.then（操作）；
}否则{
//如果这是唯一的行动，现在就做
this.currentTask=action（）；
}
返回此.currentTask；
}
}

如果要在函数中包装调用，可以很容易地这样包装调用

函数链（调用：数组承诺）

您还可以很容易地从这样的项目数组中创建承诺返回函数的列表

let files=['a'，'b'，'c']；
函数上载文件（文件）{
返回承诺。解决它是否有效

有了它，您还可以通过订阅由doNext方法返回的承诺来收听每次上传

dispatcher.doNext（action1）.then（（结果）=>console.log（结果））；
dispatcher.doNext（action2）.then（（结果）=>console.log（结果））；

如果使用已解决的承诺初始化currentTask，则代码可以缩短

类队列服务{
private currentTask:Promise
我猜这是
的。http
是Angular http服务，它使用的是Observable。如果是这样，你可以使用
mergeMap
或
concatMap
来实现所需的行为：问题是我不能发送数组，只能逐个发送。我在ts和ng方面完全是初学者，但我将从你的a开始回答并从那里开始工作。我将您的答案标记为已接受，但如果这对您来说不难，请您从我的FileUploader服务器编写正确的解决方案好吗？我仍然迷失在承诺和观察中。您如何调用此方法？您如何接收无法以数组形式发送的文件？对此提出一个问题。；）这个函数是从应用程序中的多个组件调用的。用户将从组件A中选择文件并发送文件数组，这不是问题。但在上载时，用户将从组件B中选择另一个文件。还有另一个原因；我计划在上载之前调整图像大小。这就是为什么我需要承诺一个接一个，这样当用户选择20多个文件时，我就不会关闭浏览器。好的，那么解决方案就需要不同了。上传文件时，你应该在文件夹中建立一个排队机制。这样，即使单独调用此方法，他们也会等待以前的上传完成。@Zeljko查看图表，我希望它能帮助理解是什么这是怎么回事。