JS多异步操作的并行与串行(异步循环)-一一网

JS多异步操作 —- 并行与串行

前言

日常开放过程中经常遇到如下场景：

多张图片同时上传，在所有图片都上传完毕，拿到所有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("-----------文件读取完毕-----------")
})
复制代码