多异步操作的并行与串行
前言
日常开放过程中经常遇到如下场景：
- 多张图片同时上传，在所有图片都上传完毕，拿到所有url，再提交表单数据（异步并行）
- 多个连续的请求，并且下一个请求需要使用到上一个请求的数据（异步串行）
遇到这样的场景是不是迷茫，怎么去控制串行与并行喃！！！
异步串行（多个异步操作之间有关联）
实战场景：
- 需要按照顺序，调用多个接口。清空用户信息，需要先清除用户的一些信息，在亲空账号
- 计算某些数据，需要执行多个请求。比如工资，需要获取考勤、绩效，上下接口之间有联系
题目场景：
我有一个数组，需要依次处理一个数组，处理的过程是一个异步操作。
解决办法：
-
回调地狱：顾名思义，就是采用回调函数来解决。这也是老前端代码采用最多的方式
setTimeout(function () { console.log(arr[0]) //1 setTimeout(function () { console.log(arr[1]) //2 setTimeout(function () { console.log(arr[2]) //3 console.log("-----------所有异步执行完毕-----------") }, 1000) }, 1000) }, 1000) -
Promise：ES6提出的解决回调地狱的方案，从回调变成链式，但是更为繁琐new Promise(function (reslove, reject) { setTimeout(function () { console.log(arr[0]) reslove() }, 1000); }).then(function () { return new Promise(function (reslove, reject) { setTimeout(function () { console.log(arr[1]) //2 reslove() }, 1000); }) }).then(function () { return new Promise(function (reslove, reject) { setTimeout(function () { console.log(arr[2]) //3 console.log("-----------所有异步执行完毕-----------") reslove() }, 1000); }) }) 递归函数：把异步封装为一个函数，本质和回调函数差不多，但是不会出现回调地狱
let i = 0
function asyncFun() {
setTimeout(function () {
console.log(arr[i])
i++
if (i < arr.length) {
asyncFun()
} else {
console.log("-----------所有异步执行完毕-----------")
}
}, 1000)
}
asyncFun()
-
asyn/await（常用）：个人感觉这是最简单的版本，也是最舒服的async function asyncFun() { for (let i = 0; i < arr.length; i++) { await new Promise(function (reslove, reject) { setTimeout(function () { console.log(arr[i]) reslove() }, 1000); }) } console.log("-----------所有异步执行完毕-----------") } asyncFun()
异步并行（多个异步操作之间有无关联）
实战场景：
- 微信小程序上传图片，因为API限制，一次只能上传一张。
- 异步串行: 一次上传一张图片，等上张图片上传完毕，在上传下一张（不推荐，因为这样上传完毕的事件会很慢，如果图片很多，用户体验很不好）
- 异步并行：一起上传，会减少很多时间
题目场景：
我有三个文件，把目录路径放在数组，去异步读取所有文件，在读取完毕后再进行其他操作。
解决办法：
-
循环配合索引：设置一个变量，记录异步成功的数量，再在每次异步成功的回调函数里面判断是否所有文件都成功了
let files = ["a.txt", "b.txt", "c.txt"] let rNmu=0 //成功读取文件的数量 for (let i = 0; i < files.length; i++) { setTimeout(function () { console.log(files[i] + "已读取") rNmu++ if (rNmu >= files.length) { //判断是否所有文件都读取完毕 console.log("-----------文件读取完毕-----------") } }, 1000); } map配合Promise.all（常用）:通过map生成Promise列表，在调用Promise.all函数
// 方案1
let proList = files.map(function (name) {
return new Promise(function (reslove, reject) {
setTimeout(function () {
console.log(name + "已读取")
reslove()
}, 1000);
})
})
Promise.all(proList).then(function () {
console.log("-----------文件读取完毕-----------")
})
//方案二，配合async、await使用
let proList = files.map(async function (name) {
await new Promise(function (reslove, reject) {
setTimeout(function () {
console.log(name + "已读取")
reslove()
}, 1000);
})
})
Promise.all(proList).then(function () {
console.log("-----------文件读取完毕-----------")
})
