尚硅谷Web前端Promise教程从入门到精通教程:
https://www.bilibili.com/video/BV1GA411x7z1?p=1
本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结,仅用于个人复习以及学习交流分享。
1. Promise介绍与基本使用
1.1 Promise是什么?
1.1.1 promise介绍
Promise是ES6新增的异步解决方案,可以封装异步的任务,并且对结果进行处理。最大的好处是可以解决回调地狱,而且指定回调与错误处理更加灵活方便。
- 从语法上来说:Promise是一个构造函数
- 从功能上来说:Promise对象用来封装一个异步操作并且获取其成功值/失败值
异步编程:
- fs文件操作(nodejs的模块)
require('fs').readFile('./index.html', (err, data)=>{})
- 数据库操作
- ajax
$.get('/server', (data)=>{})
- 定时器setTimeout、setInterval
setTimeout(() => {}, 2000)
1.1.2 Promise状态
Promise状态是实例对象中的一个属性 PromiseState
- pending 待定
- resolved / fullfilled 已解决
- rejected 已拒绝
状态改变:
- pending变为resolved
- pending变为rejected
注:只有这两种改变方式,而且只能改变一次。无论是成功还是失败,都只会有一个数据结果。成功数据一般称为value,失败结果一般称为reason。
1.1.3 Promise对象的值
Promise值是实例对象中的另一个属性 PromiseResult
保存着异步任务成功/失败的结果
可以通过这两个函数进行赋值,设置完后可以在then和catch回调中对值进行操作。
- resolve
- reject
1.1.4 Promise的基本流程
1.2 为什么使用Promise?
1.2.1 指定回调函数的方式更加灵活
- 旧的:必须在启动异步任务前指定
- promise:启动异步任务→返回promise对象→给promise对象绑定回调函数(甚至可以在异步任务结束后指定/ 多个)
1.2.2 支持链式调用,解决回调地狱问题
回调地狱:回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件。
缺点:
- 不便于阅读
- 不便于异常处理(每个异步任务都需要进行错误处理,可能会有重复性代码)
// 回调地狱
asyncFunc1(opt, (...args1) => {
asyncFunc2(opt, (...args2) => {
asyncFunc3(opt, (...args3) => {
asyncFunc4(opt, (...args4) => {
// some operation
})
})
})
})
1.3 Promise实例
1.3.1 中奖demo
<div class="container">
<h2 class="page-header">Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
// 点击按钮,1s后显示是否中奖(30%概率)
// 若中奖,弹出恭喜恭喜;若未中奖,弹出再接再厉
// 获取随机数值
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 获取元素对象
const btn = document.querySelector('#btn');
// 绑定单击事件
btn.addEventListener('click', function () {
// 未封装:
// setTimeout(() => {
// // 30%的中奖概率,获取1-100的一个随机数
// let n = rand(1, 100);
// // 判断
// if (n <= 30) {
// alert('恭喜恭喜');
// } else {
// alert('再接再厉');
// }
// }, 1000);
// Promise 形式实现
const p = new Promise((resolve, reject) => {
setTimeout(() => {
// 30%的中奖概率,获取1-100的一个随机数
let n = rand(1, 100);
// 判断
if (n <= 30) {
resolve(n); // 将promise对象的状态设置为成功
} else {
reject(n); // 将promise对象的状态设置为失败
}
}, 1000);
});
// 调用then方法,如果成功,执行第一个回调函数,如果失败,执行第二个回调函数
p.then(value => {
alert('恭喜恭喜,您的中奖数字为' + value);
}, reason => {
alert('再接再厉,您的号码为' + reason);
})
});
</script>
1.3.2 Promise封装原生AJAX
<div class="container">
<h2 class="page-header">Promise 封装AJAX操作</h2>
<button class="btn btn-primary" id="btn">点击发送AJAX</button>
</div>
<script>
// 获取元素对象
const btn = document.querySelector('#btn');
// 绑定单击事件
btn.addEventListener('click', function () {
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化
xhr.open('GET', 'https://api.apiopen.top/getJoke');
// 3. 发送
xhr.send();
// 4. 处理响应结果
// 未封装:
// xhr.onreadystatechange = function () {
// // 状态为4时响应
// if (xhr.readyState === 4) {
// // 判断响应状态码2xx
// if (xhr.status >= 200 && xhr.status < 300) {
// // 控制台输出响应体
// console.log(xhr.response);
// } else {
// // 输出相应响应状态码
// console.log(xhr.status);
// }
// }
// }
// promise封装:
xhr.onreadystatechange = function () {
// 创建promise
const p = new Promise((resolve, reject) => {
// 状态为4时响应
if (xhr.readyState === 4) {
// 判断响应状态码2xx
if (xhr.status >= 200 && xhr.status < 300) {
// 控制台输出响应体
resolve(xhr.response);
} else {
// 输出相应响应状态码
reject(xhr.status);
}
}
})
// 调用then方法
.then(value => {
console.log(value);
}, reason => {
console.log(reason);
});
}
});
</script>
2. Promise API
2.1 Promise构造函数 Promise(executor) {}
- executor函数:执行器
resolve, reject() => {}
- resolve函数:内部定义成功时调用的函数
value => {}
- reject函数:内部定义成功时调用的函数
reason => {}
注: executor会在Promise内部立即同步调用,异步操作在执行器中执行
/* API - executor */
let p = new Promise((resolve, reject) => {
// 同步调用
// 修改promise对象的状态为resolved
resolve('ok');
// // 修改promise对象的状态为rejected
// reject('error');
});
2.2 Promise.prototype.then方法 (onResolved, onRejected) => {}
- onResolved函数:成功的回调函数 (value) => {}
- onRejected:失败的回调函数 (reason) => {}
注:指定用于得到成功value的成功回调和用于得到失败reason的失败回调。返回一个新的promise对象
p.then(value => {
console.log(value);
});
2.3 Promise.prototype.catch方法 (onRejected) => {}
- onRejected:失败的回调函数 (reason) => {}
注:用于得到失败reason的失败回调。返回一个新的promise对象
p.catch(reason => {
console.log(reason);
});
2.4 Promise.resolve方法 (value) => {}
resolve方法 属于promise函数对象,不属于实例对象。
-
value:成功的数据或promise对象
返回一个成功的promise对象
/* API - resolve */
// 如果传入的参数为非promise类型的对象,则返回的结果为成功promise对象
let p1 = Promise.resolve(521);
console.log(p1);
// 如果传入的参数为promise对象,则参数的结果决定了resolve的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
// resolve('OK');
reject('error');
})).catch(reason => {
console.log(reason);
});
console.log(p2);
2.5 Promise.reject方法 (reason) => {}
reject方法 属于promise函数对象,不属于实例对象。
-
reason:失败的原因
返回一个失败的promise对象
/* API - reject */
// 无论传入的参数是否为promise对象,返回的结果均为失败promise对象
let p3 = Promise.reject(521);
console.log(p3);
let p4 = Promise.reject(new Promise((resolve, reject) => {
resolve('OK');
}));
console.log(p4);
2.6 Promise.all方法 (promises) => {}
-
promises:包含n个promise的数组
说明:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败。如果成功,返回所有promise的结果数组。如果失败,返回的是第一个失败的promise的结果。
/* API - all */
let p5 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 0);
});
let p6 = Promise.resolve('success');
let p7 = Promise.reject('error');
let p8 = Promise.resolve('Oh Yeah');
const result1 = Promise.all([p5, p6, p8]);
console.log(result1);
const result2 = Promise.all([p5, p7, p8]);
console.log(result2);
2.7 Promise.race方法 (promises) => {}
-
promises:包含n个promise的数组
说明:返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态。
/* API - race */
const result3 = Promise.race([p5, p6, p8]);
console.log(result3);
3. Promise关键问题
3.1 如何修改对象的状态
resolve(value);
如果当前是pending,变为resolvedreject(reason);
如果当前是pending,变为rejectedthrow '出问题了'
抛出异常。如果当前是pending,变为rejected
let p = new Promise((resolve, reject) => {
// 1. resolve函数
// resolve('ok');
// 2. reject函数
reject('error');
// 3. 抛异常(可以是字符串或异常对象)
// throw '出问题了';
}).catch(reason => {
console.log(reason);
});
console.log(p);
3.2 能否执行多个回调
一个promise指定多个成功/失败回调函数,都会调用吗?
- 当promise改变为对应状态时都会调用
let p = new Promise((resolve, reject) => {
resolve('OK');
});
// 指定回调1
p.then((value) => {
console.log(value);
});
// 指定回调2
p.then((value) => {
alert(value);
});
3.3 改变状态与指定回调的顺序问题
改变promise状态和指定回调函数的执行顺序谁先谁后?
- 都有可能,正常情况下是先指定回调再改变状态,但也可以先改变状态再指定回调
- 如何先改变状态再指定回调?
- 在执行器中直接调用resolve()、reject()
- 延迟更长时间才调用then()
- 什么时候才能得到数据?
- 如果先指定的回调,那当状态发生改变时,回调函数就会执行,得到数据
- 如果先状态改变,那么当指定回调时,回调函数就会执行,得到数据
let p = new Promise((resolve, reject) => {
// 情况1:执行器函数中为同步任务时,先改变状态,再指定回调
// resolve('OK');
// 情况2:执行器函数中为异步任务时,可以先指定回调,再改变状态
setTimeout(() => {
resolve('OK');
}, 0);
});
p.then(value => {
console.log(value);
}, reason => {
console.log(reason);
});
console.log(p);
3.4 then方法返回结果由什么决定
promise.then()返回的新promise的结果状态由什么决定?
- 由then()指定的回调函数执行的结果决定
- 情况分类:
- 如果抛出异常,新promise变为rejected,reason为抛出的异常
- 如果返回的是非promise对象,新promise变为resolved,value为返回的值
- 如果返回的是另一个新promise,此promise就会变成新promise的结果
let p = new Promise((resolve, reject) => {
resolve('ok');
});
// 执行then方法
let result = p.then(value => {
// 1. 抛出异常
// throw '出问题了';
// 2. 返回结果是非promise对象
// return 521;
// 3. 返回的结果是promise对象
return new Promise((resolve, reject) => {
// resolve('success');
reject('error');
});
}, reason => {
console.warn(reason);
});
console.log(result);
3.5 串连多个任务
promise如何串连多个操作任务?
- promise的then()返回一个新的promise,可以写为then()的链式调用
- d通过then的链式调用串连多个同步/异步任务
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 1000);
});
p.then(value => {
return new Promise((resolve, reject) => {
resolve('success');
});
}).then(value => {
console.log(value); // success
}).then(value => {
console.log(value); // undefined
});
3.6 异常穿透
- 当使用promise的then链式调用时,可以在最后指定失败的回调
- 前面任何操作出了异常,都会传到最后的失败回调中处理
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
// reject('err');
}, 1000);
});
p.then(value => {
// console.log(111);
throw '失败了';
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});
3.7 如何中断promise链
- 当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数
- 办法:在回调函数中返回一个pendding状态的promise对象
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 1000);
});
p.then(value => {
console.log(111);
// 有且只有一个方式,返回一个pending状态的promise对象
return new Promise(() => { });
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});
4. Promise自定义封装(手写promise)
promise.js
// 封装Promise类
class Promise {
// 构造方法
constructor(executor) {
// 添加属性
this.PromiseState = 'pending';
this.PromiseResult = null;
// 声明属性
this.callbacks = [];
// 保存实例对象的this的值(手动修改this指向)
const self = this;
// resolve 函数
function resolve(data) {
// 判断状态
if (self.PromiseState !== 'pending') return;
// 1. 修改对象的状态(promiseState)
self.PromiseState = 'fullfilled';
// 2. 设置对象结果值(promiseResult)
self.PromiseResult = data;
// 调用成功的回调函数
setTimeout(() => {
self.callbacks.forEach(item => {
item.onResolved(data);
});
});
}
// reject 函数
function reject(data) {
if (self.PromiseState !== 'pending') return;
self.PromiseState = 'rejected';
self.PromiseResult = data;
// 调用失败的回调函数
setTimeout(() => {
self.callbacks.forEach(item => {
item.onRejected(data);
});
});
}
try {
// 同步调用执行器函数
executor(resolve, reject);
} catch (e) {
// 修改promise对象为失败
reject(e);
}
}
// then方法封装
then(onResolved, onRejected) {
// 保存this
const self = this;
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason;
}
}
if (typeof onResolved !== 'function') {
onResolved = value => value;
}
return new Promise((resolve, reject) => {
// 封装函数
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if (result instanceof Promise) {
// 如果是Promise类型的对象
result.then(v => {
resolve(v);
}, r => {
reject(r);
});
} else {
// 结果的对象状态为成功
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if (this.PromiseState === 'fullfilled') {
setTimeout(() => {
callback(onResolved);
});
}
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected);
});
}
// 判断pending状态
if (this.PromiseState === 'pending') {
// 保存回调函数
this.callbacks.push({
onResolved: function () {
callback(onResolved);
},
onRejected: function () {
callback(onRejected);
}
});
}
});
}
// catch方法封装
catch(onRejected) {
return this.then(undefined, onRejected);
}
// 添加resolve方法
static resolve(value) {
// 返回promise对象
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
// 状态设置为成功
resolve(value);
}
});
}
// 添加reject方法
static reject(reason) {
// 返回promise对象
return new Promise((resolve, reject) => {
reject(reason);
});
}
// 添加all方法
static all(promises) {
// 返回promise对象
return new Promise((resolve, reject) => {
// 声明变量
let count = 0;
let arr = [];
// 遍历数组
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
// 得知对象的状态是成功的
count++;
// 将当前promise对象成功的结果存入数组中
arr[i] = v;
if (count === promises.length) {
resolve(arr);
}
}, r => {
// 对象的状态失败
reject(r);
});
}
});
}
// 添加race方法
static race(promises) {
// 返回promise对象
return new Promise((resolve, reject) => {
// 遍历数组
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
resolve(v);
}, r => {
reject(r);
});
}
});
}
}
5. async和await
5.1 async函数
- 函数的返回值为promise对象
- promise对象的结果由async函数执行的返回值决定的
// 与then方法返回的规则相同
async function main() {
// 1. 如果返回值是一个非promise对象
// return 521;
// 2. 如果返回值是一个promise对象
return new Promise((resolve, reject) => {
// resolve('ok');
// reject('error');
});
// 3. 抛出异常
throw 'oh no';
}
let result = main();
console.log(result);
5.2 await表达式
- await右侧的表达式一般为promise对象,但也可以是其它的值
- 如果表达式是promise对象,await返回的是promise成功的值
- 如果表达式是其它值,直接将此值作为await的返回值
注:
- await必须写在async函数中,但async函数中可以没有await
- 如果await的promise失败了,就会抛出异常,需要通过try catch捕获异常
async function main() {
let p1 = new Promise((resolve, reject) => {
resolve('ok');
});
let p2 = new Promise((resolve, reject) => {
reject('error');
});
// 1. 右侧为promise的情况
let res1 = await p1;
console.log(res1);
// 2. 右侧为其他类型的数据
let res2 = await 20;
console.log(res2);
// 3. 如果promise是失败的状态
try {
let res3 = await p2;
} catch (e) {
console.log(e);
}
}
main();
5.3 async与await结合实践
const fs = require('fs');
const util = require('util');
const minReadFile = util.promisify(fs.readFile);
// 回调函数的方式
fs.readFile('./前端学习路线/JavaScript/Promise期约/async函数.html', (err, data1) => {
if (err) throw err;
fs.readFile('./前端学习路线/JavaScript/Promise期约/await表达式.html', (err, data2) => {
if (err) throw err;
fs.readFile('./前端学习路线/JavaScript/Promise期约/中奖demo.html', (err, data3) => {
if (err) throw err;
console.log(data1 + data2 + data3);
});
});
});
// async与await
async function main() {
try {
let data1 = await minReadFile('./前端学习路线/JavaScript/Promise期约/async函数.html');
let data2 = await minReadFile('./前端学习路线/JavaScript/Promise期约/await表达式.html');
let data3 = await minReadFile('./前端学习路线/JavaScript/Promise期约/中奖demo.html');
console.log(data1 + data2 + data3);
} catch (e) {
console.log(e.code);
}
}
main();
5.4 async与await结合发送AJAX请求
<button class="btn btn-primary" id="btn">点击获取段子</button>
<script>
// axios
function sendAjax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = function () {
// 创建promise
// 状态为4时响应
if (xhr.readyState === 4) {
// 判断响应状态码2xx
if (xhr.status >= 200 && xhr.status < 300) {
// 控制台输出响应体
resolve(xhr.response);
} else {
// 输出相应响应状态码
reject(xhr.status);
}
}
}
})
// 调用then方法
.then(value => {
console.log(value);
}, reason => {
console.log(reason);
});
}
// 获取元素对象
const btn = document.querySelector('#btn');
btn.addEventListener('click', async function () {
let duanzi = await sendAjax('https://api.apiopen.top/getJoke');
console.log(duanzi);
});
</script>