使用promise实现多请求并发

小约翰仓鼠

已于 2022-05-06 20:47:56 修改

阅读量4.7k

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2022-05-06 20:30:10 首次发布

本文链接：https://blog.csdn.net/djh052900/article/details/124617912

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先引用一下阮一峰大佬的一段话：

promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

其实正常的业务中，按理来说是一个按钮控制一个请求，处理一项业务。
但有的时候还是会出现一个按钮控制多个并发请求的业务，这几个请求之间还没有关联。
但问题是，你得知道所有的请求处理完成之后，要给用户一个反馈的。
这个时候如果使用传统的ajax请求的话，好像我们不知道啥时候所有的并发请求都处理完了，或者是那个请求出了问题然后报出对应的错误。

其实通过一个系统的设计还是能用es5的方式处理这些并发请求的

但今天就讲解下 promise.all的用法，让你快速实现呢，promise这个东西出来也好几年了，建议能用新的语法还是用新的语法，毕竟下一代标准呢，大不了用babel转下，问题不大。

Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，

也不一定非得是数组, 可能es5写习惯的程序员还是比较喜欢用数组的方式

奈何这个 api实际业务中用的也比较少，

var promiseAll = new Set();

function s1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('1111')
        }, 1000)
    })
}

function s2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('22222222')
        }, 2000)
    })
}

function s3() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('333')
        }, 3000)
    })
}
promiseAll.add(s3());
promiseAll.add(s2());
promiseAll.add(s1());

Promise.all(promiseAll).then(res => {
    // 输出结果  [ '333', '22222222', '1111' ]
    console.log(res); 
}).catch((err) => {
    console.log(err);
})

先声明一个可迭代的对象，然后吧后续的promise对象推入进去，不要只是把函数名字推进去，人家要的promise对象，也就是你函数的执行结果，要不你就直接放入一个promise对象

Promise.all 当且仅当传入的可迭代对象为空时为同步

还有就是对失败的处理，只要有一个失败了，那么整个promise就会转变成失败状态
但是执行成功的还是成功执行的，只是失败的那个失败，而且整个状态也变成失败，会被catch捕获到。

promise使用延伸：使用Promise解决多个请求数据并发问题

https://blog.csdn.net/weixin_43353524/article/details/107685078?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165183788816782391851367%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165183788816782391851367&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-107685078-null-null.142^v9^pc_search_result_control_group,157^v4^control&utm_term=promise%E8%A7%A3%E5%86%B3%E5%A4%9A%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82&spm=1018.2226.3001.4187