执行过程_Promise详细执行过程介绍

最新推荐文章于 2024-05-06 10:07:28 发布
最新推荐文章于 2024-05-06 10:07:28 发布
阅读量512 收藏 1
点赞数
文章标签： 执行过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36212198/article/details/112743427
版权

f89a76ebb2424b6b872d1e2bd9e9877b.gif

前言

平时工作中我们都在Promise，你真正了解它吗，今天一起详细看看它的执行过程。

定义

Promise对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

描述

一个Promise对象代表一个在这个promise被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个promise，以便在未来某个时候把值交给使用者。

一、resolve

返回一个操作成功的Promise对象。

let promiseResolve = new Promise((resFn, rejFn) => {
    console.log('promise pending');
    resFn('resolve value');
}).then(resVal => {
    console.log(`result fulfilled: ${resVal}`);
}, rejVal => {
    console.log(`result rejected: ${rejVal}`);
}).catch(err => {
    console.log(`result catch: ${err}`);
}).finally(() => {
    console.log(`result finally`);
});

promiseResolve;

// 输出结果
// promise pending
// result fulfilled: resolve value
// result finally

在确定操作成功时，简化如下：

Promise.resolve('resolve value').then(resVal => {
    console.log(`result fulfilled: ${resVal}`);
}, undefined).catch(err => {
    console.log(`result catch: ${err}`);
}).finally(() => {
    console.log(`result finally`);
});

// 输出结果
// result fulfilled: resolve value
// result finally

二、reject

返回一个操作失败的Promise对象。

let promiseReject = new Promise((resFn, rejFn) => {
    console.log('promise pending');
    rejFn('reject value');
}).then(resVal => {
    console.log(`result fulfilled: ${resVal}`);
}, rejVal => {
    console.log(`result rejected: ${rejVal}`);
}).catch(err => {
    console.log(`result catch: ${err}`);
}).finally(() => {
    console.log(`result finally`);
});

promiseReject;

// 输出结果
// promise pending
// result rejected: reject value
// result finally

在确定操作失败时，简化如下：

Promise.reject('reject value').then(undefined, rejVal=>{
    console.log(`result rejected: ${rejVal}`);
}).catch(err=>{
    console.log(`result catch: ${err}`);
}).finally(()=>{
    console.log(`result finally`);
});

// 输出结果
// result rejected: reject value
// result finally

三、then

返回一个 Promise。带有两个Promise的成功、失败情况的回调函数。

1、then接收到的全部是成功的回调函数。

let promiseMoreThenResolve = new Promise((resFn, rejFn) => {
    console.log('promise pending');
    resFn('0');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('1');
}, rejVal => {

}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('2');
}, rejVal => {

}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('3');
}, rejVal => {

}).catch(err => {
    console.log(`result catch: ${err}`);
}).finally(() => {
    console.log(`result finally`);
});

promiseMoreThenResolve;

// 输出结果
// promise pending
// result then: 0
// result then: 1
// result then: 2
// result finally

2、then接收带有失败(拒绝)的回调函数。

let promiseMoreThenReject = new Promise((resFn, rejFn) => {
    console.log('promise pending');
    resFn('0');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('1');
}, rejVal => {
    console.log(`result then: ${rejVal}`);
    return Promise.reject('a');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    throw Error('error');
    return Promise.resolve('2');
}, rejVal => {
    console.log(`result then: ${rejVal}`);
    return Promise.reject('b');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('3');
}, rejVal => {
    console.log(`result then: ${rejVal}`);
    return Promise.reject('c');
}).catch(err => {
    console.log(`result catch: ${err}`);
}).finally(() => {
    console.log(`result finally`);
});

promiseMoreThenReject;

// 输出结果
// promise pending
// result then: 0
// result then: 1
// result then: Error: error
// result catch: c
// result finally

3、当有多个then的时候，只需要处理接收成功的回调函数，异常放到catch里捕获。那什么情况会用到多个then，是在处理异步时，异步的请求顺序是串行，后面的异步依赖于前面异步的结果。

let promiseMoreThenReject = new Promise((resFn, rejFn) => {
    console.log('promise pending');
    resFn('0');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('1');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    throw Error('error');
    return Promise.resolve('2');
}).then(resVal => {
    console.log(`result then: ${resVal}`);
    return Promise.resolve('3');
}).catch(err => {
    console.log(`result catch: ${err}`);
}).finally(() => {
    console.log(`result finally`);
});

promiseMoreThenReject;
// 输出结果
// promise pending
// result then: 0
// result then: 1
// result then: Error: error
// result catch: c
// result finally

4、then返回结果值。如果要用到then的返回结果时，return返回结果值，要优于Promise对象。如果是同步行为都要在一个then中处理。

let pAne = new Promise(resFn => {
    console.log('1');
    resFn('1');
}).then(resVal => {
    console.log('2');
    return Promise.resolve('2')
}).then(() => {
    console.log('3');
});

let pTwo = new Promise(resFn => {
    console.log('a');
    resFn('a');
}).then(resVal => {
    console.log('b');
    return 'b'
}).then(() => {
    console.log('c')
});

pAne;
pTwo;

// 输出结果
// 1 a 2 b c 3

四、all

这个方法返回一个新的Promise对象，该Promise对象在iterable参数对象里所有的Promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的Promise对象失败则立即触发该Promise对象的失败。

1、全部返回成功。

let mulPromiseOne = new Promise((resFn, rejFn) => {
    resFn('one');
});

let mulPromiseTwo = new Promise((resFn, rejFn) => {
    resFn('two')
});

let mulPromiseThree = new Promise((resFn, rejFn) => {
    resFn('three')
});

Promise.all([mulPromiseOne, mulPromiseTwo, mulPromiseThree]).then(values => {
    console.log(values);
}).catch(err => {
    console.log(`result error: ${err}`);
}).finally(() => {
    console.log(`result finally`)
});

// 输出结果
// ["one", "two", "three"]
// result finally

2、返回包含失败(拒绝)。

let mulPromiseOne = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('one'), 3000);
});

let mulPromiseTwo = new Promise((resFn, rejFn) => {
    setTimeout(() => rejFn('two'), 500);
});

let mulPromiseThree = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('three'), 1000);
});

Promise.all([mulPromiseOne, mulPromiseTwo, mulPromiseThree]).then(values => {
    console.log(values);
}).catch(err => {
    console.log(`result error: ${err}`);
}).finally(() => {
    console.log(`result finally`)
});

// 输出结果，在500ms返回结果信息。
// result error: two
// result finally

五、allSettled

返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

let mulPromiseOne = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('one'), 3000);
});

let mulPromiseTwo = new Promise((resFn, rejFn) => {
    setTimeout(() => rejFn('two'), 500);
});

let mulPromiseThree = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('three'), 1000);
});

Promise.allSettled([mulPromiseOne, mulPromiseTwo, mulPromiseThree]).then(values => {
    console.log(values);
}).catch(err => {
    console.log(`result error: ${err}`);
}).finally(() => {
    console.log(`result finally`)
});

// 输出结果，在3000ms返回结果信息。
// [
//   {status: "fulfilled", value: "one"},
//   {status: "rejected", value: "two"},
//   {status: "fulfilled", value: "three"}
// ]
// result finally

六、any

接收一个Promise可迭代对象，只要其中的一个promise成功，就返回那个已经成功的promise。

let mulPromiseOne = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('one'), 3000);
});

let mulPromiseTwo = new Promise((resFn, rejFn) => {
    setTimeout(() => rejFn('two'), 500);
});

let mulPromiseThree = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('three'), 1000);
});

Promise.any([mulPromiseOne, mulPromiseTwo, mulPromiseThree]).then(values => {
    console.log(values);
}).catch(err => {
    console.log(`result error: ${err}`);
}).finally(() => {
    console.log(`result finally`)
});

// 输出结果，在1000ms返回结果信息。
// three
// result finally

七、race

返回一个Promise对象，一旦迭代器中的某个promise解决或拒绝，返回的promise就会解决或拒绝。

let mulPromiseOne = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('one'), 3000);
});

let mulPromiseTwo = new Promise((resFn, rejFn) => {
    setTimeout(() => rejFn('two'), 500);
});

let mulPromiseThree = new Promise((resFn, rejFn) => {
    setTimeout(() => resFn('three'), 1000);
});

Promise.race([mulPromiseOne, mulPromiseTwo, mulPromiseThree]).then(values => {
    console.log(values);
}).catch(err => {
    console.log(`result error: ${err}`);
}).finally(() => {
    console.log(`result finally`)
});

// 输出结果，在500ms返回结果信息。
// result error: two
// result finally

9d48e8a00fedc5e8de62b6c3710c4b31.png

关注哦！优质原创文章在这里等你哦！

振宁不是振宇
关注
借一道面试题讲讲promise、async和await在事件循环中的执行顺序
Coloryi的博客
09-14 854
题目如下所示： async function a1 () { console.log('a1 start') await a2() console.log('a1 end') } async function a2 () { console.log('a2') } console.log('script start') setTimeout(() => {...
promise async/await 顺序执行异步操作
paidaboluo的博客
08-02 762
promise async/await 顺序执行异步操作 简单封装ajax 解决回调地狱
promise执行过程
rookie的博客
11-18 833
在看到《前端面试之道》这本小册中关于手写Promise部分，对此部分有比较大的兴趣，于是按照书中的例子加上自己的理解产生了这篇文章。 先来实现一个简易版的Promise，代码较长，下面我会一一解释 const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "rejected"; --------------------------------------以上为1. function MyPromise(fn) { c
Promise 执行流程详细解释
weixin_45509705的博客
08-02 1600
先来看一个Promise实例 new Promise((resolve, reject) => { // 只能调用 resolve 和 reject 的其中一个 setTimeout(() => { console.log('异步任务执行...') // 如果异步任务执行成功 value 由自己指定 resolve(value) // 改变当前 Promise实例对象的状态为 fulfilled // 如果异步任务执行失败 reason.
promise 执行顺序
weixin_33686714的博客
11-07 306
1、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>promise 执行</title> </head> <body&
Promise的执行顺序
最新发布
weixin_63681863的博客
05-06 1315
Executor 是在创建 Promise 实例时作为参数传递的一个函数，它用于定义 Promise 的行为。这个函数会立即执行，并且接收两个参数：resolve 和 reject，它们是两个由 JavaScript 引擎提供的函数，用于改变 Promise 的状态。// 这里是执行器函数// 在这个函数内部，你可以编写异步或同步的代码// 你可以根据具体的情况调用 resolve 或 reject");// 将 Promise 状态设置为 resolved}, 1000);});
详解如何构建Promise队列实现异步函数顺序执行
10-17
本文将详细讲解如何利用Promise构建队列来确保异步函数按照指定顺序执行。 首先，我们要理解场景：假设我们有三个异步任务a、b、c，它们需要依次执行，而且后一个任务依赖于前一个任务的结果。传统的解决方案可能...
从setTimeout看js函数执行过程
10-18
JavaScript中的函数执行过程是一个复杂而微妙的主题，尤其是当涉及到异步操作如`setTimeout`时。在深入探讨之前，我们先来回顾一下标题和描述中提到的内容。本文将围绕`setTimeout`函数来理解JavaScript的执行机制，...
sprocit:基于Promise的API，用于执行SQL存储过程
05-12
Sproc它是一个基于Promise的API，用于执行SQL存储过程（适用于Nodejs） 努力，进行，做，做我们 :musical_score: ... 更努力更好更快更强 安装 npm i sprocit 创建您的配置 const config = { provider : 'mssql' ,...
小程序api实现promise封装过程解析
10-15
这篇文章就详细介绍了如何将小程序API封装成Promise的方法。 封装的核心思想是将小程序原有的API调用，如wx.request或my.request，改造成返回Promise对象的形式。这样，在进行数据请求时，就可以使用async/await...
Promise的执行步骤
weixin_51509116的博客
03-09 1013
//难点: // 事件循环 // 宏任务先执行 然后微任务再执行 // 先执行同步任务 然后执行宏任务 宏任务内部的同步任务 内部的微任务(开启下一轮的宏任务) 开启下一轮的宏任务 //一个宏任务执行完毕 检索下一轮宏任务 //脚本,计时器是宏任务 //then的执行体 then(()=>{}) //当异步(宏任务 微任务)执行完毕以后 就会回到回调函数 执行js线程的任务 //同步的代码先执行 异步的回调函数后执行 异步的回调函数想同时运行时 就看优先级 //先添加到队列的先运行 列.
Promise执行流程分析
yonggeit的博客
01-17 2060
先上代码 console.log(1); new Promise(function (resolve, reject){ reject(true); window.setTimeout(function (){ resolve(false); }, 0); }).then(function(){ console.log(2); }, function...
promise 按步骤执行
qq_24318853的博客
08-20 203
promise 按步骤操作 functionstep1(){ returnnewPromise((resolve,reject)=>{ setTimeout(()=>{ resolve({state:1,message:"第一步"}); },3000); }); } functionstep2(data){ returnnewPromise((resolve,reject)=>{ ...
Promise 执行过程的正确理解姿势
包磊磊的博客
05-10 704
Promise 执行过程的正确理解姿势 本文一步一步深入解读 Promise 的注册和执行过程，读懂这几段代码，Promise 的注册和执行过程你都将所向披靡，不再话下~~~~。你就是 Promise 大神！~~。 更全解析文章：juejin.im/post/5dc028… 前言 本文已代码解读的方式来学习整个过程。这里提供了四段代码，如果你都能理解清楚，正确的说出output过程，那么厉害大牛如你，Promise 的执行过程了如指掌。 好多大牛已经熟悉了，当然了，并不是所有的人都能理解这几段代码，
Promise原理及执行顺序
weixin_55538192的博客
02-19 1646
Promise 是 JavaScript 的一个内置对象，在语法上是一个构造函数，该构造函数只有一个参数，是一个函数。初始化时，这个函数在构造之后会直接被异步运行，所以称之为起始函数。起始函数包含两个参数： resolve 和 reject.resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，是成功时的回调；reject 是出现异常是调用的。
Promise 工作流程
weixin_45505615的博客
06-27 150
promise
promise实现过程
weixin_33845477的博客
05-19 123
异步发展流程： callback-> promise -> generator -> async + await promise实现过程： 例子： p1.then((res) => { return new Promise((resolve ,reject)=>{ return new Promise((resolve,reject)=&gt...
promise 使用
weixin_60084748的博客
08-05 718
promise基础使用 及其面试中所遇到的执行顺序问题 配合 async和await使用。* Pending -> Fulfilled Fulfilled状态（已成功）* Pending -> Rejected Rejected状态（已失败）* 对象的状态不受外界影响 （3种状态）* 创建Promise以后会立即执行。* Fulfilled状态（已成功）* Rejected状态（已失败）* Pending状态（进行中）* 一旦确认 状态不可逆转。...
ES6-Promise执行时序篇
热门推荐
往事不回头,余生不将就
09-24 1万+
前言 本篇文章主要是为大家介绍什么是宏任务（task），什么是微任务（Microtasks）， 以及哪些方法是宏任务，哪些方法是微任务，希望可以帮助到大家 宏任务 1、宏任务是主流，当js开始被执行的时候，就是开启一个宏任务，在宏任务中执行一条一条的指令； 2、宏任务可以同时有多个，但会按顺序一个一个执行； 每一个宏任务，后面都可以跟一个微任务队列，如果微任务队列中有指令或方法，那么就会执行； 如果没有，则开始执行下一个宏任务，直到所有的宏任务执行完为止，微任务相当于宏任务的小尾巴； 3、为什.
Promise 和 async/await执行顺序
06-09
在执行过程中，如果遇到了 `await`，JavaScript 引擎会暂停当前的异步操作，并等待 `Promise` 对象的状态变为 `resolved` 或 `rejected`，然后再继续执行后面的代码。 下面是一个简单的例子，演示了 `Promise` 和 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值