一、Promise的理解和使用
1.Promise是什么?
1.1 理解
1.抽象表达:
1)promise是一门新的技术(ES6规范)
2)promise是JS中进行异步编程的新解决方案
备注:旧方案是单纯使用回调函数
例如:
fs文件操作:require('fs').readFile('./index.html',(err,data)=>{})
数据库操作
AJAX:$.get('/server',(data)=>{})
定时器:setTimeout(()=>{},2000)
2.具体表达:
1)从语法上来说:Promise是一个构造函数
2)从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
1.2 为什么要用Promise?
1**.指定回调函数的方式更加灵活**
1)旧的:必须在启动异步任务前指定
2)promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个回调函数)
2.支持链式调用,可以解决回调地狱问题(重要知识点)
1)什么是回调地狱?
回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调函数执行的条件
asyncFunc1(opt,(...args1) => {
asynFunc2(opt,(...args2) => {
asynFunc3(opt,(...agrs3) => {
asynFunc4(opt,(...args4) => {
// some operation
})
})
})
})
2)回调地狱的缺点?
不利于阅读
不便于异常处理
3)解决方案?
promise链式调用
2.Promise初体验
// promise实现
// resolve 解决 函数类型的数据 异步成功时调用
// reject 拒绝 函数类型的数据 异步失败时调用
// promise 可以包裹一个异步操作
btn.addEventListener('click',function(){
const p = new Promise((resolve,reject) => {
setTimeout(() => {
let n = rand(1, 100);
console.log(n);
if (n <= 30) {
resolve(n); // 将 promise 对象的状态设置为 [成功]
} else {
reject(n); // 将 promise 对象的状态设置为 [失败]
}
}, 1000);
})
// 回调写在then里
// 调用 then 方法
// resolve 和 reject 传递参数给 then
p.then((value) =>{
// 第一个回调是异步成功的回调,即resolve的回调
alert("恭喜中奖,奖品为10RMB 劳斯莱斯优惠卷,您的中奖号码是:" + value);
},(reason) =>{
// 第一个回调是异步失败的回调,即reject的回调
alert("未中奖,再接再厉,您的号码是" + reason);
})
})
3.Promise封装操作
3.1 Promise封装fs模块
/*
封装一个函数 mineReadFile 读取文件内容
参数:patn 文件路径
返回:promise 对象
*/
function mineReadFile(path) {
return new Promise((resolve,reject) => {
require('fs').readFile(path,(err,data) => {
// 失败
if(err) reject(err)
// 成功
resolve(data)
})
})
}
mineReadFile('./resource/content.txt').then(value => {
// 输出文件内容
console.log(value.toString());
},reason => {
console.log(reason);
})
3.2 util.promisify方法
util.promisify
:将回调函数风格的方法 转为 promise风格的方法
// 1.引入 util模块
const util = require("util");
// 2.引入 fs 模块
const fs = require("fs");
// 3.返回一个新的函数
const mineReadFile = util.promisify(fs.readFile);
mineReadFile("./resource/content.txt").then((value) => {
console.log(value.toString());
});
4.Promise 的状态
定义:promise实例对象中的一个属性(PromiseState),表示promise异步任务是否成功
状态值:pending
未决定的 resolved
/ fulfilled
成功 rejected
失败
状态值的改变:(1)pending 变为 resolve (2)pending 变为 reject
说明:(1)只有这两种,且一个promise对象只能改变一次
(2)无论变为成功还是失败,都会有一个结果数据
(3)成功的结果数据一般称为 value,失败的结果数据一般称为 reason
5.Promise 对象的值
定义:promise实例对象中的一个属性(PromiseResult),保存着异步任务成功/失败后的结果数据
注:resolve
和 reject
两个函数(即then里的函数)可以分别对 PromiseResult
的值进行修改
6.Promise 的 API
6.1 Promise 构造函数:Promise(executor){}
(1)executor 函数:执行器(resolve,reject)=> {}
(2)resolve 函数:内部定义成功时调用的函数 value => {}
(3)reject 函数:内部定义失败时调用的函数 reason => {}
说明:executor 会在 Promise内部立即同步调用,异步操作在执行器中执行
6.2 Promise.prototype.then 方法:(onResolved,onRejected) => {}
(1)onResolved 函数:成功的回调函数 (value) => {}
(2)onReject 函数:失败的回调函数(reason) => {}
说明:指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的Promise 对象
6.3 Promise.prototype.cath 方法:(onrejected) => {}
(1)onrejected 函数:失败的回调函数 (reason) => {}
说明:then() 的语法糖,相当于:then(undefined,onRejected)
p.catch((reason) => {
console.log(reason);
});
6.4 Promise.resolve 方法:(value) => {}
(1)value:成功的数据或 promise 对象
说明:返回一个成功/失败的 promise 对象
// 2.promise.resolve() :返回一个成功/失败的promise 对象,对象的值为括号里的参数的值
// 2.1 如果传入的参数为 非promise类型的对象,则返回的结果为成功的peomise对象
let p1 = Promise.resolve(521);
console.log(p1);
// 2.2 如果传入的参数为 promise对象,则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve,reject) => {
reject('Error')
}))
p2.catch(reason => {
console.log(reason);
})
6.5 promise.reject 方法:(reason) => {}
(1)reason:失败的原因
说明:返回一个失败的 promise 对象
// 括号里的参数就是失败结果
let p3 = Promise.reject(666);
// reject(成功的promise对象)后也返回失败的promise,失败的值为那个括号里的成功的promise对象
6.6 Promise.all 方法:(promises) => {}
(1)promises:包含 n 个 promise 的数组
(2)说明:返回一个新的 promise,只有所有的 promise 都成功才成功,只要有一个失败了就直接失败
(3)成功的值为:所有 promise 成功值组组成的数组;失败值为:第一个失败的promise 的结果
6.7 Promise.race 方法 (promise) => {}
(1)promise:包含n个promise的数组
说明:返回一个新的promise,第一个完成的promsie的结果状态就是最终的结果状态
7.Promise几个关键问题
7.1 状态改变
(1)resolve 函数:pending ==> resolved(fulfilled)
(2)reject 函数 :pending ==> rejected
(3)throw 抛出错误
7.2 一个promise指定多个成功/失败回调函数(then),都会调用吗
当promise改变为对应状态时都会调用
7.3 改变promise状态和指定回调函数谁先谁后?
(1)都有可能,正常情况下是先指定回调再改变状态,但也可以先改变状态再指定回调
(2)如何先改状态再指定回调?
1.在执行器中直接调用 resolve()
/ reject()
2.延迟更长时间才调用then()
(3)如何先指定回调再改变状态
resolve()
或reject()
写在异步任务(定时器)内
(3)什么时候才能得到数据?
1.如果先指定回调,当状态发生改变时,回调函数就会调用,得到数据
2.如果先改变状态,当指定回调时,回调函数就会调用,得到数据
总结:只有状态改变时,回调函数才会执行,得到数据
7.4 promise.then()返回的新promise对象的结果状态由什么决定?
(1)简单表达:由 then()
指定的回调函数执行的结果决定
(2)详细表达:
1.如果抛出异常,新 promise 变为 rejected,reason为抛出的异常
2.如果返回的是非promise的任意值,新promise变为resolved,value为返回的值
3.如果返回的是另一个新promise,此 promise 的结果就会成为新promise的结果
7.5 promise 如何串联多个操作任务?
(1)promise 的 then() 返回一个新的 promise,可以看成 then() 的链式调用
(2)通过 then() 的链式调用串联多个同步/异步任务
7.6 promise 异常穿透
(1)当使用 promise 的 then() 链式调用时,可以在最后指定失败的回调
(2)前面任何操作出了异常,都会传到最后失败的回调中处理
7.7 中断 promise 链
(1)当使用 promsie 的 then 链式调用时,在中间中断,不再调用后面地回调函数
(2)办法:在回调函数中返回一个 pending 状态的 promise 对象
8.async 与 await
8.1 async 函数
(1)函数的返回值为promsie对象
(2)promsie对象的结果由async函数执行的返回值决定
8.2 await 表达式
(1)await右侧的表达式一般为 promsie 对象,但也可以是其他的值
(2)如果表达式是 成功的promsie 对象,await 返回的是 promise 成功的值
(3)如果表达式是 失败的promsie 对象,直接抛出错误,用 try…catch 解决
(4)如果表达式是其它值,直接将此值作为 await 的返回值
注:(1)await 必须写在async 函数中,但 async 函数中可以没有 await
(2)如果 await 的 promsie 失败了,就会抛出异常,需要通过 try…catch 捕获处理