高强度专攻Promise

2024-04-04 17:36
文章标签 高强度 promise 专攻

本文主要是介绍高强度专攻Promise，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. Promise介绍和基本应用

1.1 Promise是什么

1.1.1 理解

抽象表达1. 新的技术，ES6规范
2. JS进行异步编程的新解决方案（旧方案是单纯使用回调函数）

具体表达

1. 语法：Promise是一个构造函数

2. 功能：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

异步编程有哪些：

  • fs文件操作
// 回调函数形式
require('fs').readFile('./index.html',(err,data)=>{if(err) throw err;console.log(data.toString());
})
// Promise形式let promise = new Promise((resolve,reject)=>{fs.readFile('./html',(err,data)=>{if(err) reject(err);resolve(data);})
})promise.then((value) => {console.log(value.toString());
},
(err) => {console.log(err);
})
  • 数据库操作
  • AJAX
const xhr = new XMLHttpRequest();
xhr.open('GET','http://api.apiopen.top/getJob');
xhr.send();
xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){console.log(xhr.response);}else{console.log(xhr.status)}}
}
// Promise形式
const promise = new Promise((resolve,reject) => {const xhr = new XMLHttpRequest();xhr.open('GET','http://api.apiopen.top/getJob');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){resolve(xhr.response)}else{reject(xhr.status)}}}
})promise.then((value) => {console.log(value)
},
(err) => {console.warn(err);
})
  • 定时器 
    • setTimeout(()=>{},2000)

       

 

1.2 为什么要使用Promise

1.2.1 指定回调函数的方式更加灵活

旧的方法Promise方法
必须在启动异步任务前指定

1. 启动异步任务；

2. 返回Promise对象；

3. 给Promise对象绑定回调函数；

（可以在异步任务结束后指定多个）

1.2.2 支持链式调用，可解决回调地狱问题

1. 什么是回调地狱

  • 回调地狱嵌套调用，外部回调函数异步执行的结果是内部嵌套的回调函数执行的条件
  • asyncFunc1(opt,(...args1)=>{asyncFunc2(opt,(...args2)=>{asyncFunc3(opt,(...args3)=>{asyncFunc4(opt,(...args4)=>{// 一些操作});   });});
});

     

2. 回调地狱缺点

  • 可读性差
  • 不便于异常处理

3. 解决方案

  • Promise链式调用

1.3 Promise的状态改变

  • pending未决定的
  • resolved / fulfilled 成功
  • rejected 失败

注意只有这两种改变方法，每个promise对象只能改变一次。

  • pending --> resolved / fulfilled
  • pending --> rejected

无论是成功还是失败，都会有一个结果数据（value / reason）

1.4 Promise基本流程

e0bb2036ca7149eab1c7403069eb5fb8.png

 

2. Promise API

2.1 Promise构造函数 Promise( (executor) { } )

2.1.1 excutor函数

执行器：（resolve，reject）=> { }

executor会在Promise内部立即同步调用，异步操作在执行器中执行

new Promise((resolve,reject)=>{console.log('111'); // 同步调用
})
console.log('222');// 打印 
// 111
// 222

2.1.2 resolve函数

内部定义成功时调用 (value) => { }

2.1.3 reject函数

内部定义失败时调用（reason）=> { }

2.2 Promise.prototype.then((value) => {},(reason) => {})

指定用于得到成功value的成功回调和失败reason的失败回调

返回一个新的promise对象

在不同回调函数里返回的promise对象是怎样的？

2.2.1 onResolved函数

成功的回调函数（value）=> { }

2.2.3 onRejected函数

失败的回调函数（reason）=> { }

2.3 Promise.prototype.catch((reason) => {})

2.3.1 onRejected函数

失败的回调函数（reason）=> { }

2.4 Promise.resolve((value) => {})

形参非Promise对象Promise对象
返回的promise对象成功promise对象取决于传入对象的结果

2.5 Promise.reject((reason) => {})

形参任何数据
返回的promise对象失败的promise对象

 

2.6 Promise.all((promises) => {})

形参[ 所有promise对象都是成功的 ][ 存在失败的promise对象 ]
返回的Promise对象state: 成功state: 失败
result：[ 所有promise对象的结果 ]result：失败对象的结果

 

2.7 Promise.race((promises) => {})

形参[ 多个promise对象 ]
返回的promise对象state：首个执行完的promise状态
result：首个执行完的promise结果

 

3. Promise关键问题

1. 如何改变promise的状态？

  • 执行resolve（）：pending --> resolved
  • 执行reject（）：pending --> reject
  • throw : pending --> reject

2. 一个promise执行多个成功/失败回调函数，都会调用吗？

  • 当promise对象状态改变为相应状态时，通过then执行多个回调函数
    • 状态必须改变

3. 改变promise状态和指定回调函数，谁先谁后？

  • 都可能
    • 正常情况：先指定回调再改变状态
    • 如何先改变状态再执行回调
      • 在执行器中直接调用resolve（）/ reject（）
      • 延迟更长时间才调用then（）
    • 什么时候才得到数据
      • 先指定回调时
        • 状态改变时调用回调函数 --> 得到数据
      • 先改变状态时
        • 指定回调时调用回调函数 --> 得到数据

4. promise.then( )返回的新promise的结果状态由什么决定？

  • 若抛出异常：新promise的state为reject，result为抛出的异常
  • 若返回非promise的任意值：新promise的state为resolved，result为返回的值
    • undefined | 其他指定值
  • 若返回另一个promise，新promise的结果为该promise的结果

5. promise如何串联多个操作任务

  • 通过then（）进行链式调用，串联多个同步/异步任务

6. promise异常穿透

  • 使用promise的then链式调用时，可在最后指定失败的回调
  • 前面任何操作出了异常，都会传到最后失败的回调中处理

7. 中断promise链

  • 当使用promise的then链式调用时，在中间中断，不在调用后面的回调函数
    • 在回调函数中返回一个pending状态的Promise对象

 

4. Promise自定义封装

 

 

 

5. 异步之宏队列与微队列

5.1 原理图

69abdda999a84bfdbf700a8ad4d5ce6e.png

5.2 说明

  • JS有两种不同队列来存储待执行回调函数
    • 宏队列：保存待执行的宏任务
      • 定时器回调
      • DOM事件回调
      • AJAX回调
    • 微队列：保存待执行的微任务
      • Promise回调
      • MutationObserver回调
  • 如何按顺序执行
    • JS引擎首先必须先执行所有的初始化同步任务代码
    • JS每次执行第一个宏任务前，都要将微队列中的微任务执行完毕
      • 先执行微队列里的所有微任务
      • 当该执行宏队列里的宏任务，宏任务里存在微任务时
        • 将其中的微任务放入微队列
        • 在执行下一个宏任务前，执行完微队列里的微任务
        console.log('同步任务1');setTimeout(() => {Promise.resolve(1).then(value=>{console.log('定时器宏任务1里的微任务1');})  });setTimeout(() => {console.log('定时器宏任务2');   },1000);console.log('同步任务2');setTimeout(() => {console.log('定时器宏任务3');   });console.log('同步任务3');setTimeout(() => {Promise.resolve(1).then(value=>{console.log('定时器宏任务4里的微任务1');})  });console.log('同步任务4');Promise.resolve(2).then(value=>{console.log('Promise微任务1');})  console.log('同步任务5');new Promise((resolve,reject)=>{console.log('Promise微任务2里的Executor同步任务6');resolve();}).then(value=>{console.log('Promise微任务2');}) console.log('同步任务7');// 打印：
//         同步任务1
//         同步任务2
//         同步任务3
//         同步任务4
//         同步任务5
//         Promise微任务2里的Executor同步任务6
//         同步任务7
//         Promise微任务1
//         Promise微任务2
//         定时器宏任务1里的微任务1
//         定时器宏任务3
//         定时器宏任务4里的微任务1
//         定时器宏任务2
  • 同步任务
    • executor函数
      • 同步任务executor在微任务new Promise里容易混淆
// 按顺序执行，将同步任务输出，处理异步函数：微任务-->宏任务const first=()=>(new Promise((resolve,reject)=>{console.log(3);         // 微任务1 同步任务1let p= new Promise((resolve,reject)=>{console.log(7);     // 微任务1-1 Executor同步任务1setTimeout(() => {  // 微任务1-1 宏任务1console.log(5); // 微任务1-1 宏任务1里的同步任务1resolve(6)      // 不执行了，已经resolve(1)}, 0);resolve(1);         // 微任务1-1 同步任务2 // Promise{<fulfilled>:1}})resolve(2);             // 微任务1 同步任务2 // Promise{<fulfilled>:2}p.then((arg)=>{console.log(arg);   // 微任务1-2 输出1})}))first().then((arg)=>{console.log(arg);           // 微任务2 输出2})console.log(4);                 // 同步任务1// 打印顺序 3 7 4 1 2 5
  • 可以试着模拟两个队列的进出
    setTimeout(() => {console.log(0);   // 宏任务1 }, 0);new Promise((resolve,reject)=>{console.log(1);     // 微任务1 Executor同步任务1resolve();}).then(()=>{console.log(2);     // 微任务2new Promise((resolve,reject)=>{console.log(3); // 微任务3 Executor同步任务1resolve();}).then(()=>{console.log(4); // 微任务4 }).then(()=>{console.log(5); // 微任务5})}).then(()=>{console.log(6);     // 微任务6})new Promise((resolve,reject)=>{  console.log(7);     // 微任务7 Executor同步任务1resolve();}).then(()=>{console.log(8);     // 微任务8 })//打印  1 7 2 3 8 4 6 5 0
  • 这块有部分执行顺序不太理解
// 宏队列 【】
// 微队列 【】
// 打印 1 7 2 3 9 8 4 6 5 0setTimeout(() => {console.log(0);   // 宏任务1 }, 0);new Promise((resolve,reject)=>{console.log(1);     // 微任务1 Executor同步任务1resolve();}).then(()=>{console.log(2);     // 微任务2new Promise((resolve,reject)=>{console.log(3); // 微任务3 Executor同步任务1resolve();}).then(()=>{console.log(4); // 微任务4 }).then(()=>{console.log(5); // 微任务5})console.log(9);// 这部分执行后到6}).then(()=>{console.log(6);     // 微任务6})new Promise((resolve,reject)=>{  console.log(7);     // 微任务7 Executor同步任务1resolve();}).then(()=>{console.log(8);     // 微任务8 })

 

 

6. Promise语法糖

6.1 async 函数

  • 函数返回值为 Promise 对象
  • promsie对象的结果由 async函数执行结果 决定
// async的返回结果类似于then方法
async function testAsync(){// return '123';              // Promise {<fulfilled> : '123'}return new Promise((resolve,reject)=>{resolve('456');           // Promise {<fulfilled> : '456'}// reject('sorry')        // Promise {<rejected> : 'sorry'}// throw 'bad'            // Promise {<rejected> : 'bad'}})// throw 'error'              // Promise {<rejected> : 'error'}
}let result = testAsync();
console.log(result);

6.2 await表达式

  • await 右侧表达式
    • 若为Promise对象，await 返回的是Promise成功的值
    • 若为其他值，await直接返回该值
async function testAsync(){let a = await '123';     // 123let b = await new Promise((resolve,reject)=>{resolve('456');      // 456reject('sorry')      // Uncaught (in promise) sorrythrow 'bad'          // Uncaught (in promise) bad})console.log('a',a);console.log('b',b);
}

 

6.3 注意

  • await必须写在async中
  • async中可以没有await
  • 如果await的promise失败，会抛出异常，需要try..catch处理
async function testAsync(){let a = await '123';     // 123console.log('a',a);try {         let b = await new Promise((resolve,reject)=>{// resolve('456');      // 456reject('sorry')         //  sorry// throw 'bad'          // bad})             console.log('b',b);} catch (error) {console.log(error);}
}

 

7. 实例

7.1 文件读写

案例：拼接多个文件的内容

  • 回调函数方法
fs.readFile('./resource/1.html',(err,data1) => {if(err) throw err;fs.readFile('./resource/2.html',(err,data2) => {if(err) throw err;fs.readFile('./resource/3.html',(err,data3) => {if(err) throw err;console.log(data1 + data2 + data3)});});
});
  • async await方法
async function read(){try{let data1 = await mineReadFile('./resource/1.html');let data2 = await mineReadFile('./resource/2.html');let data3 = await mineReadFile('./resource/3.html');console.log(data1 + data2 + data3)}catch(e){console.log(e)}
}

 

 

这篇关于高强度专攻Promise的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/876417。

相关文章

JavaScript Promise技术

JavaScript Promise技术

你可能已经知道Promises现在已经是JavaScript标准的一部分了。Chrome 32 beta版本已经实现了基本的Promise API。如今，Promise的概念在web开发中已经不是什么新鲜玩意了。我们中的大多数人已经在一些流行的JS库例如Q、when、RSVP.js中使用过了Promises。即使是jQuery中也有一个和Promises很类似叫做Deferred的东西。但是Ja
阅读更多...
Promise的异步调用

Promise的异步调用

Promise调用两个接口，第二个接口的入参为第一个接口的返回值 Promise的异步调用 应用场景实例 应用场景 Promise调用两个接口，第二个接口的入参为第一个接口的返回值 实例 1.两个接口的调用，正常的写法 // 登录接口function login(userInfo) {return new Promise(function(resolve, reject)
阅读更多...
JavaScript高级语法之异步Promise(1:入门)

JavaScript高级语法之异步Promise(1:入门)

文章目录 1 callback hell(回调地狱)1.1 问题引入1.2 promise简介 2 Promise使用2.1 创建一个Promise容器2.2 then方法2.3 then方法链式操作2.4 then方法链式操作的异常处理2.5 触发resolve条件2.6 Jquery中使用Promise 1 callback hell(回调地狱) 1.1 问题引入 层层嵌
阅读更多...
Promise顺序打印#Vue3#for循环中调用接口顺序输出

Promise顺序打印#Vue3#for循环中调用接口顺序输出

Promise顺序打印#Vue3#for循环中调用接口顺序输出 按照文件id来顺序打印出图片路径 <!-- <el-scrollbar max-height="500"> --><div v-for="(item, index) in testArr" style="float: left"><span>{{ index + 1 }}</span><img style="width: 30
阅读更多...
[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

关于promise我在之前的文章已经应用过好几次，如[js高手之路]Node.js jade express mongodb mongoose promise实现todolist，本文就来讲解下promise的常见用法. 为什么会有promise,他的作用是什么？ promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中，我们可以看出，Pro
阅读更多...
浅谈Promise、Async和Await

浅谈Promise、Async和Await

Promise 1、Promise 是异步编程的一种解决方案，本质是一个构造函数。使用Promise，可以避免“回调地狱”，即多层嵌套的回调函数，从而使代码更加清晰和易于维护 2、有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败） 3、then方法、catch方法 all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的
阅读更多...
await-to-js，promise错误拦截

await-to-js，promise错误拦截

今天介绍一个 npm 包 —— await-to-js。它可以有效地帮助我们写出健壮的异步逻辑，降低异步编写成本。 众所周知，Promise 是 es6 当中一个非常方便的流程控制对象，大大简化了异步逻辑的编写。我们可以使用await来让异步代码像同步代码一样写 const r1 = await doAsync1();const r2 = await doAsync2(r1.xxx);co
阅读更多...
如何驾驭长时间高强度的项目？

如何驾驭长时间高强度的项目？

在要开始大项目“攻坚战”的时候，想要获得高产出，背后真的是悬梁刺股、挑灯夜战吗？做好规划，就可以健康、轻松、高效度过你的每一天。 前段时间，我出版了我的第一本书《Marissa Mayer和她的雅虎保卫战》。很多人都问过我写它花了多长时间。 这个问题有不同的答案。我从2014年5月初开始休假写书，在2014年8月末完成初稿。所以你可以说我写了4个月。但我在2013年9月签的写作合同，所以答案
阅读更多...
es6（基础十七） Promise

es6（基础十七） Promise

一、作用：解决异步编程的一种方案，让异步编程写法感觉像是同步 二、用法 new Promise(function(resolve,reject){resolve()}).then(function(){//成功.},function(){//失败}).then(function(){//成功},function(){//失败})     es6之前的回调函数 {let fn = funct
阅读更多...
Web Works API 和 Promise 的对比和区别

Web Works API 和 Promise 的对比和区别

Web Workers 和 Promise 都是强大的工具，用于不同的异步处理场景。Web Workers 适用于需要并行处理的复杂任务，通过后台线程避免阻塞主线程。而 Promise 则简化了单线程中的异步操作管理，使代码更加清晰和结构化。根据具体需求选择合适的技术，可以显著提升网页的性能和用户体验。 1. Web Workers API Web Workers API 是一种用于在后台线程
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2