阅读本文大约需要 7 分钟
概述
- 什么是 Promise
- Promise 用法
- Marcro task 与 Micro task
- Promise 面试题
什么是 Promise
Promise 库是用来处理异步操作的,由于好用且强大,ES6 原生提供了 Promise。
Promise 有三种状态:
- pending(进行中)
- fulfilled(已成功)
- rejected(已失败)
如图,Promise 可以从 pending 转为 fulfilled ,也可以从 pending 转为 rejected 。但是一但状态转变之后,Promise 就会记住运行结果,再次调用时会直接获取结果。还有一个要知道的是,当 Promise 在运行的时候,是无法中断执行的。
但是在实际编程当中,会用 resolved 代指 fulfilled 。
Promise 用法
const myPromise = new Promise(function (resolve, reject) { if (true) {//异步操作成功 resolve("success"); } else { reject("there is some error!"); } }) myPromise.then(function (value) { console.log("111"); console.log(value); }, function (error) { console.log("222"); console.log(error) }); //运行结果: //111 //success
Promise 的构造函数接受两个由 JavaScript 引擎提供的回调函数,分别是:resolve,reject。resolve 是操作成功时的回调函数,与此同时 Promise 的状态由 pending 转化为 resolved。reject 是操作失败的回到函数,与此同时 Promise 的状态由 pending 转化为 reject。
Promise 实例生成之后,使用 then 方法继续操作。then 方法接受两个回调函数作为参数。分别对应构造 Promise 的时候的两个回调函数(resolv,reject)
Promise.then() 与 Promise.catch()
Promise.catch() 相当于 Promise.then(null, rejection),用于捕获错误的回调函数。
const myPromiseCatch = new Promise(function (resolve, reject) { if (true) { reject(new Error("there are some errors!!!")) } else { resolve("asdf"); } }); myPromiseCatch.then(function (value) { console.log(value) }).catch(function (error) { console.log(error) }) //运行结果:there are some errors!!!
Promise.all
将多个 promise 实例合并成一个。
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定:
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
// 生成一个Promise对象的数组 const promises = [2, 3, 5, 7, 11, 13].map(function (id) { return getjson('/post/' id ".json"); }); Promise.all(promises).then(function (posts) { // ... }).catch(function(reason){ // ... });
Marcro task 与 Micro task
为什么要写这个呢?是为了接下来的面试题而做铺垫。
关于这个,我搜索了挺多文章,好像都没有解释得通的。还好,最后搜到了一篇比较满意的(见文末)。
nodejs 中的 EventLoop 有任务队列 EventQueue(TaskQueue)
Task 分为两大类:Marcro task 与 Micro task;两者的执行顺序:每执行完成一个 Macro Task 就要清空当前所有的 Micro Task。接下来是一些分类:
Macrotask
- setImmediate
- setTimeout
- setInterval
Microtask
- process.nextTick
- Promise
- Object.observe
- MutaionObserver
(图作者@BusyRich)。
再进一步划分,从微观实现的角度讲, 引擎都会有三个 Task Queue:
- Macro Task Queue -----> 处理 Micro Task Queue
- Micro Task Queue ------> 处理 Promise 等 microtask
- Tick Task Queue -------> 处理 process.nextTick
那么在一个事件循环中,其伪代码展示如下:
for (macroTask of macroTaskQueue) { // 1. Handle current MACRO-TASK handleMacroTask(); // 2. Handle all NEXT-TICK for (nextTick of nextTickQueue) { handleNextTick(nextTick); } // 3. Handle all MICRO-TASK for (microTask of microTaskQueue) { handleMicroTask(microTask); } }
Promise 面试题
这个题是大佬 nswbmw 的,我觉得还是挺不错的,有些题我们能够直接看注释看懂。而有些题则需要涉及到上面的 Marcro task 与 Micro task 的知识。
Macrotask 与 Microtask 核心概念(点击阅读原文跳转链接)
ECMAScript 6 入门(点击阅读原文跳转链接)
,