网站首页 > 博客文章 正文
阅读本文大约需要 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 入门(点击阅读原文跳转链接)
猜你喜欢
- 2024-09-27 搞懂ES6语法之promise-那些常用姿势
- 2024-09-27 抢先熟悉ES2021新特性(es2021 新特性)
- 2024-09-27 JavaScript: Promises 介绍及为何 Async/Await 最终取得胜利
- 2024-09-27 种草 ES2020 八大新功能(es2020特性)
- 2024-09-27 碎片时间学编程「21]:异步 JavaScript 备忘总结
- 2024-09-27 async异步操作函数(async await异步请求)
- 2024-09-27 nodejs入门教程之Promise(十)(nodejs.)
- 2024-09-27 【JavaScript】ES6之Promise用法详解及其应用
- 2024-09-27 JavaScript,ES11,Promise.allSettled,返回一个Promise对象
- 2024-09-27 JavaScript中的Promise:异步编程的利器
你 发表评论:
欢迎- 最近发表
-
- 给3D Slicer添加Python第三方插件库
- Python自动化——pytest常用插件详解
- Pycharm下安装MicroPython Tools插件(ESP32开发板)
- IntelliJ IDEA 2025.1.3 发布(idea 2020)
- IDEA+Continue插件+DeepSeek:开发者效率飙升的「三体组合」!
- Cursor:提升Python开发效率的必备IDE及插件安装指南
- 日本旅行时想借厕所、买香烟怎么办?便利商店里能解决大问题!
- 11天!日本史上最长黄金周来了!旅游万金句总结!
- 北川景子&DAIGO缘定1.11 召开记者会宣布结婚
- PIKO‘PPAP’ 洗脑歌登上美国告示牌
- 标签列表
-
- ifneq (61)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)