知其然不知其所以然，是最让人头疼的。之前做项目总是偷懒，只会用promise其皮毛，aysnc/await也搞不明白。遇到问题不知如何debug，真是让人头疼。毕竟今天不学习，明天变垃圾，开始向不懂的东西进击吧，前端小菜菜！
课程的五大部分内容：
1.介绍与基本使用
2.Promise的API
3.Promise 中的几个关键问题
4.自定义封装
5.async和await（异步编程的终极解决方案）
1.介绍与基本使用
- 介绍：promise是新的异步编程的解决方案，支持链式调用，解决了回调地狱的问题，以及指定回调的方式更为灵活（异步编程有：fs文件操作、数据库操作、jax请求、定时器等）
- 状态：promise的状态是指实例对象当中的一个【promiseState】属性，有pending，fulfilled，rejected。另一个属性【promiseResult】保存了状态的结果。
-
流程：
image.png
2.Promise的API
Promise构造函数，里面代码是同步执行的
.then方法
.catch方法
.finally方法
Promise.resolve()方法，不是实例上的方法，返回一个成功的promise
Promise.reject()方法，不是实例上的方法，返回一个失败的promise
Promise.race()方法
Promise.all()方法，传入的多个promise都成功才能返回res list，不然会返回第一个失败的结果，可以进行多个ajax的请求
3.Promise 中的几个关键问题
- 如何改变promise的状态？（resolve/reject/抛出异常)
- 当一个promise对象指定多个回调即then方法，是否都会调用吗？（是的）
- 改变promise的状态与指定回调，谁先执行？（都有可能）
- promise.then方法返回新的promise的结果状态由什么指定？（由then方法指定的回调函数执行结果来决定）
- promise如何串联多个操作任务？（在then()方法里return一个新的promise对象，下一个.then方法就能实现链式调用）
- promise的异常穿透？（异常穿透是中间任意一个环节错误，都会捕获到错误，并执行.catch方法）
- 如何中断promise链？在.then方法中
return new Promise(()=>{})，即返回一个pending状态的新promise
4.自定义封装
思考
经过两天的学习与测试，完整的封装源码来咯！
- 思路：主要先封装好promise的构造函数，扩展实例对象上的then方法以及catch方法，再往上添加构造函数的resolve、reject、all、race等方法。
- 注意：是异常穿透的捕获、this的指向问题，以及then方法返回的也是个promise，如何实现了链式调用等问题，以及要实现then方法进入异步队列
class版本Promise封装
// class版本Promise封装
class Promise{
constructor(executor){
this.PromiseState = 'pending'
this.promiseResult = null
this.callbacks = []
// 成功的函数
const resolve = (data) =>{
// 判断状态，仅能修改一次
if (this.PromiseState !== 'pending') {
return false
}
// 1，修改对象的状态(promiseState)
this.PromiseState = 'fulfilled'
// 2，修改对象的返回值(promiseResult)
this.promiseResult = data
// 3，调用成功的回调函数
setTimeout(() => {
this.callbacks.length>0 && this.callbacks.forEach(item=>{
item.onResolved(data)
})
});
}
// 失败的函数
const reject = (data) =>{
if (this.PromiseState !== 'pending') {
return false
}
this.PromiseState = 'rejected'
this.promiseResult = data
setTimeout(() => {
this.callbacks.length>0 && this.callbacks.forEach(item=>{
item.onRejected(data)
})
});
}
// 捕获异常, 抛出错误
try {
//同步调用的【执行器函数】
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
then(onResolved, onRejected){
// 判断onRejected是否为一个函数 实现异常穿透的捕获
if (typeof onRejected !== 'function') {
onRejected = reason=>{
throw reason
}
}
// 返回一个promise对象
return new Promise((resolve, reject)=>{
function callback(params) {
// console.log(params);
try {
let result = params
// 判断回调函数是否是promise对象
if (result instanceof Promise) {
result.then(v=>{
resolve(v)
},r=>{
reject(r)
})
} else {
resolve(result)
}
} catch (error) {
reject(error)
}
}
// pending => fulfilled
if (this.PromiseState === 'fulfilled') {
setTimeout(() => {
callback(onResolved(this.promiseResult))
});
}
// pending => rejected
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected(this.promiseResult))
});
}
// 判断pending状态（即构造函数是异步任务时）
if (this.PromiseState === 'pending') {
// 保存多个回调函数 执行链式调用
this.callbacks.push({
onResolved: ()=>{
callback(onResolved(this.promiseResult))
},
onRejected: ()=>{
callback(onRejected(this.promiseResult))
},
})
}
})
}
catch(onRejected) {
return this.then(()=>{}, onRejected)
}
static resolve(value) {
return new Promise((resolve, reject)=>{
if (value instanceof Promise) {
value.then(v=>{
resolve(v)
},r=>{
reject(r)
})
} else {
resolve(value)
}
})
}
static reject(value) {
return new Promise((resolve, reject)=>{
reject(value)
})
}
static all(list) {
// 返回的结果 为promise对象
return new Promise((resolve, reject)=>{
let count = ''
let arr = []
for (let index = 0; index < list.length; index++) {
// 判断只有全返回成功状态 才能进入数组
list[index].then(v=>{
count++
// 这里不用push是要保证传进来的数组返回时也要一一对应
arr[index] = v
if (count === list.length) {
resolve(arr)
}
},r=>{
reject(r)
})
}
})
}
static race(list) {
// 返回的结果 为promise对象
return new Promise((resolve, reject)=>{
for (let i = 0; i < list.length; i++) {
list[i].then(v=>{
resolve(v)
},r=>{
reject(r)
})
}
})
}
}
5.async和await（异步编程的终极解决方案）
思考
- async：函数的返回值是promise对象，并且结果由async函数的返回值决定（有点类似与then方法）
- await：右侧一般为promise对象，并且返回的是其成功的值
- 注意：
1.await必须写在async关键字的函数中
2.如果await的promise对象返回失败的值，就会抛出异常（需要try catch捕获处理）
3.await的执行是异步的
用promise封装一个ajax异步请求，结合async语法糖进行调用
// 用promise封装一个ajax异步请求
function sendAjax(url){
return new Promise((resolve, reject)=>{
let xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.send()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status >= '200') {
resolve(xhr.response)
}else{
reject(xhr.status)
}
}
}
})
}
// 第一种：直接实际调用
sendAjax('https://api.apiopen.top').then(res=>{
console.log('res', res);
}).catch(err=>{
console.log('err', err);
})
// 第二种：结合async语法糖进行调用
async function getMetadata(){
try {
const data= await sendAjax('https://api.apiopen.top')
} catch (error) {
console.log(error);
}
}
getMetadata()
