JavaScript异步Promise.all()、Promise.race()以及Promise.finally()

最新推荐文章于 2024-05-07 15:46:24 发布
最新推荐文章于 2024-05-07 15:46:24 发布
阅读量1.9k 收藏 6
点赞数 2
分类专栏： JavaScript异步 文章标签： JavaScript异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42911663/article/details/85996370
版权

今天我们讲一下es6对Promise的扩展,我们使用axios进行ajax请求来演示一下，
首先我先准备了3个接口：
在这里插入图片描述

Promise.all()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript异步</title>
</head>
<body>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script>
    const promise1 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise1')
        .then(res => {
            console.log('promise1成功了!');
            return res.data.data
        })

    const promise2 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise2')
        .then(res => {
            console.log('promise2成功了!');
            return res.data.data
        })

    const promise3 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise3')
        .then(res => {
            console.log('promise3成功了!');
            return res.data.data
        })

    const promise = Promise.all([promise1, promise2, promise3])
        .then(res=> {
            console.log(res);
            console.log('Promise.all成功了!');
        })
        .catch(err=>{
            console.log(err)
            console.log('Promise.all出错了!');
        })
</script>
</body>
</html>

我们知道axios返回的是一个promise对象,我们可以打印一下：

console.log(promise1)
输出:

在这里插入图片描述
Promise.all就是用于将多个 Promise 实例，包装成一个新的 Promise 实例
Promise.all,接收的参数是一个可迭代对象，比如：Array、String等，我们这个例子是接收了一个数组，数组的每一项都返回Promise实例

promise1,promise2,promise3都是返回promise实例，如果他们都返回成功的状态，Promise.all则返回成功的状态，输出一个数组，是promise1,promise2,promise3的返回值，数组的顺序和他们的执行顺序无关，和他们作为参数排列的顺序有关
看下我们例子的输出:
在这里插入图片描述
我们将promise1做一下改动，使promise1报错:

    const promise1 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise1')
        .then(res => {
            console.log('promise1成功了!');
            return err
        })

在这里插入图片描述
如果有一个返回失败（reject），Promise.all则返回失败（reject）的状态，此时第一个被reject的实例的返回值，会传递给promise的回调函数。
promise的执行结果依赖于promise1,promise2,promise3的执行结果，全部成功，Promise.all就返回成功，有一个失败，Promise.all就返回失败
Promise.all只关心集体的执行结果

Promise.race()

Promise中的竞态，用法和Promise.all类似，对应参数也与Promise.all相同是个可迭代对象
race() 返回一个 Promise，谁执行的快，就返回谁的执行结果，不管是成功还是失败

const promise = Promise.race([promise1, promise2, promise3])
        .then(res => {
          console.log(res);
          console.log('Promise.all成功了!');   
        })
        .catch(err=>{
          console.log(err);
          console.log('Promise.all出错了!')
        })

输出：
在这里插入图片描述
通过输出我们发现
promise2是第一个完成的，所以promise的返回结果就是promise2的执行结果
而且就算完成，但是 进程不会立即停止，还会继续执行下去。

Promise.finally()

finally() 方法返回一个Promise，在promise执行结束时，无论结果是成功或者是失败，在执行then()和catch()后，都会执行finally指定的回调函数,该方法是 ES9 引入标准的。

      const promise = Promise.race([promise1, promise2,promise3])
        .then(res => console.log(res))
        .catch(err => console.log(err))
        .finally(() => {
          console.log("finally的执行与状态无关")
        });

在这里插入图片描述
如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时，finally() 方法可能是有用的。

友情链接：点击查看所有文章目录

友情链接：点击查看　JavaScript异步系列文章目录

刘家军
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
9000字教你弄懂Promise对象（详细、新手入门级）——涵盖方法then、catch、resolve、reject、all、race、finally
Concise200的博客
03-03 1047
在本篇文章中你可以了解Promise出现的背景，理解回调地狱是什么。9000字包含多个代码片段，用于理解Promise对象的多个方法：then、catch、resolve、reject、all、race、finally。
Promise学习
weixin_42351895的博客
08-22 386
Promise 特点： 1、对象状态不受外界影响（pedding进行中、fulfilled已成功、rejected以失败） 2、一旦转跳发生给吧，就不会再变，任何时候都可以拿到这个结果。Promise对象状态改变只有两种 pending -> fulfilled 或 pending -> rejected 只要发生这两种改变，状态就会凝固，此时称之为resolved（已成型） Promise新建后立刻执行指定的内容，等宏任务执行完后再将then存放到微任务的Event Queue中等待
JavaScript 中的 Promise.all
最新发布
RumbleWx的博客
05-07 411
Promise.all是一个静态方法，它接收一个Promise对象数组作为参数，并返回一个新的Promise对象。这个新的Promise对象在传入的所有Promise对象都解决（resolve）时解决，或者其中一个Promise对象被拒绝（reject）时被拒绝。
Promise中的finally、all、race方法
qq_53848768的博客
10-24 1077
这两天看了一些关于Promise的内容，记录并总结一下学习内容 Promise.prototype.finally 该方法接收一个onFinally处理程序作为参数，不同于then和catch方法，该方法不关心最后落定成什么状态，只要状态由默认状态落定成功状态或失败状态，该处理程序都会执行。该方法不关心最后的结果，所以onFinally处理程序不接受参数， let promise = new Promise((res, rej) => { setTimeout(() => {
ES6——异步编程Promise全方位学习，从零到源码（.then()、.catch()、.finally()、Promise.all()）
cnailili的博客
02-05 2803
ES6——异步编程Promise学习（.then( )回调问题） 异步编程：开发中无论是在浏览器环境中还是在Node环境中，我们都会使用JavaScript我完成各种异步操作（定时器、事件、ajax、读取文件、事件等），伴随着异步编程就避免不了回调机制的产生；会产生很多问题； 异步编程问题：产生回调地狱，难于维护和扩展；try catch只能捕获同步代码中的异常；同步并发的异步会存在一定的问题； ...
Promise多个请求、finally、链式调用学习
黄彪博客
06-24 2031
文章目录文章参考基本语法捕获异常处理链式调用promise的finally方法应用场景异步应用场景使用说明两个请求没有必然关系，各自执行回调即可两个请求有先后顺序，一定要先请求One之后再用Two多个请求都成功，但是请求之间没有关系多个请求只需要一个成功就做逻辑处理axios多个异步请求全部成功之后处理的业务请求封装使用案例 文章参考 阮一峰 ES6 promise vue实力封装axios 基本语法 早期浏览器兼容：Promise对象是ES6的内容，我们可以使用babel做一个转换，基本语法如下：
Promise.rar
11-09
Promise.race()方法与Promise.all()相反，它会返回第一个完成（无论是fulfilled还是rejected）的Promise的结果。其他未完成的Promise将被忽略： ```javascript let promise1 = new Promise((resolve, reject) => ...
JavaScript期约Promise.doc
10-22
此外，Promise还支持并行处理多个异步任务，可以使用`Promise.all()`或`Promise.race()`来合并多个Promise。`Promise.all()`等待所有Promise都解决，而`Promise.race()`只要第一个Promise完成（无论是解决还是拒绝）...
promise.js
09-08
此外，`Promise.all()`方法可以同时处理多个Promise，只有当所有Promise都成功时才会触发回调，而`Promise.race()`则会在第一个Promise完成（无论是成功还是失败）时立即触发回调。 在提供的压缩包中，有两个文件：...
Promise.js:JavaScript Promises的天真的实现
05-01
在Promise.js-master这个项目中，你可能会看到不同类型的Promise用法，包括如何链式调用、如何处理并行操作（使用`Promise.all`）和如何处理竞争条件（使用`Promise.race`）。`Promise.all`接受一个Promise数组，当...
Javascript异步编程模型Promise模式具体介绍_.docx
10-09
此外，`Promise.all`方法可以处理多个Promise并行执行，只有当所有Promise都成功时才会触发回调。而`Promise.race`则会在第一个Promise完成（无论成功或失败）时立即触发回调。 在错误处理方面，Promise提供了更好...
Promise的用法及相关的JS执行顺序
weixin_48661004的博客
12-11 1235
Promise的用法及相关的JS执行顺序，Promise的方法、参数、状态、特点、优点，回调函数、回调地狱
Promise-详解
qq_48109675的博客
09-19 2979
是一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数，可以链式调用降低了操作难度
实现Promise.all、Promise.race、Promise.finally
zl13015214442的博客
07-21 5754
1. 实现Promise.all 实现思路 promise.all(iterable)返回一个新的promise实例。此实例在iterable参数内所有的promise都fulfilled或者参数中不包含promise时，状态才变成fulfilled；如果参数中有一个失败rejected，此实例回调失败，失败的信息是第一个失败promise的返回结果。 let p1 = new Promise...
Promise.all()、Promise.race()和Promise.finally()
weixin_39342847的博客
08-01 1423
Promise.all() Promise.all接收一个可迭代对象（比如数组），并返回一个Promise对象。当可迭代对象中的所有Promise都fulfilled后，就能在.then()中调用它们的结果。如果有一个或多个Promise对象rejected，就会可以在.catch()中得到第一个rejected的结果。 举个例子： var p1 = Promise.resolve(3); var p2 = 1337; var p3 = new Promise((resolve, reject) =>
promise的finally方法
热门推荐
黄彪博客
07-15 5万+
参考文档 promise-finally学习 问题来源 在做移动app开发的时候，需要每次发送请求，都会有‘菊花’提示，请求发送完毕，就需要关闭loading提示框，不然界面就无法被点击。但是请求有的是成功、有的失败、有的超时，为了不影响整个系统的正常使用，就需要强制关闭提示框，正好利用promise的finally来关闭提示框 案例 var promise = new Promise(fun...
手写Promise.all, Promise.race,Promise.finally方法
weixin_47140911的博客
09-01 379
Promise.all(): /* 参数：可迭代的数据类型,包括Array,Map, Set，例如[promise1, promise2, promise3...] 返回值：一个promise对象 规则： 1.如果传入参数为空的可迭代对象，则返回一个已完成状态的promise 2.等待所有完成或第一个失败 */ Promise.all = function (promises) { return ..
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
向宇
07-20 3037
vue实现循环发起多个异步请求——Promise.all()与Promise.race()————from 向宇
如何中断promise.all（以多文件上传为例）
hzxOnlineOk的博客
01-17 1587
// 发送文件 getFn(file) { const formdata=new FormData(); formdata.append('file',file); return this.$axios({ method: "post", url: "/upload", data: formdata, cancelToken: new CancelToken(c =>
Promise的属性
03-17
6. Promise.all()方法：Promise对象具有Promise.all()方法，用于将多个Promise对象包装成一个新的Promise对象。当所有的Promise对象都成功时，新的Promise对象才会成功；只要有一个Promise对象失败，新的Promise对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘家军

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值