1、介绍
Promise是异步编程的一种解决方案，比回调函数和事件更合理且更强大。可以理解为一个容器，里面保存着某个未来才会结束的事件的结果。
2、特点
- Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），该状态不受外界影响。
- 状态可以从pending变为fulfilled，或者从pending变为rejected。一旦状态改变，就不会再变。
3、Promise的状态
-
peeding 未决定的
-
resolved / fulfilled 成功
-
rejected 失败
4、Promise的方法
-
Promise.resolve()
-
Promise.reject()
-
Promise.all()
参数：传入多个Promise的数组。
说明：返回一个新的Promise，只有所有的Promise都成功了才成功，如果有一个失败了就直接失败。
-
Promise.race()
参数：传入多个Promise的数组。
说明：返回一个新的Promise，第一个完成的Promise的结果就是最终的结果。
5、中断Promise链
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
}, 1000)
})
p.then(value => {
console.log('111')
// 有且只有一个方法
return new Promise(() => {})
})
.then(value => {
console.log('222')
})
.then(value => {
console.log('333')
})6、手写Promise函数
class Promise {
// 构造方法
constructor(executor) {
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 声明回调函数
this.callback = []
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data) {
// 增加判断
if (self.PromiseState !== 'pending') return
// 1、修改对象的状态(promiseState)
self.PromiseState = 'fulfilled'
// 2、设置对象的结果值(promiseResult)
self.PromiseResult = data
// 调用成功的回调函数
setTimeout(() => {
self.callback.forEach(item => {
item.onResolved(data)
})
})
}
// reject 函数
function reject(data) {
// 增加判断
if (self.PromiseState !== 'pending') return
// 1、修改对象的状态(promiseState)
self.PromiseState = 'rejected'
// 2、设置对象的结果值(promiseResult)
self.PromiseResult = data
// 调用失败的回调函数
setTimeout(() => {
self.callback.forEach(item => {
item.onRejected(data)
})
})
}
try {
// 同步调用【执行器函数】
executor(resolve, reject)
} catch (e) {
// 修改 Promise 对象状态为【失败】
reject(e)
}
}
// 添加 then 方法
then(onResolved, onRejected) {
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 {
const result = type(self.PromiseResult)
if (result instanceof Promise) {
result.then(
v => {
resolve(v)
},
r => {
reject(r)
}
)
} else {
resolve(result)
}
} catch (e) {
reject(e)
}
}
// 调用回调函数
if (this.PromiseState === 'fulfilled') {
setTimeout(() => {
callback(onResolved)
})
}
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected)
})
}
// 判断 pending 状态
if (this.PromiseState === 'pending') {
// 保存回调函数
this.callback.push({
onResolved: function () {
callback(onResolved)
},
onRejected: function () {
callback(onRejected)
}
})
}
})
}
// 添加 catch 方法
catch(onRejected) {
return this.then(undefined, onRejected)
}
// 添加 resolve 方法
static resolve(value) {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
v => {
resolve(v)
},
r => {
reject(r)
}
)
} else {
resolve(value)
}
})
}
// 添加 all 方法
static all(promises) {
return new Promise((resolve, reject) => {
let count = 0
const arr = []
// 遍历
for (let index = 0; index < promises.length; index++) {
const element = promises[index]
element.then(
v => {
// 得知状态是成功的
// n个promise成功才能调用
count++
// 将结果存储
arr[index] = v
if (count === promises.length) resolve(arr)
},
r => {
reject(r)
}
)
}
})
}
// 添加 race 方法
static race(promises) {
return new Promise((resolve, reject) => {
for (let index = 0; index < promises.length; index++) {
const element = promises[index]
element.then(
v => {
resolve(v)
},
r => {
reject(r)
}
)
}
})
}
}7、async和await
-
async 函数
- 函数的返回值为 Promise 对象。
- Promise 对象的结果由 async 函数执行的返回值决定。
-
await 表达式
- await 右侧的表达式一般为 Promise 对象，但也可以是其他的值。
- 如果表达式是 Promise 对象，await返回的是 Promise 成功的值。
- 如果表达式是其他值，直接将此值作为 await 的返回结果。
-
注意
- await 必须写在 async 函数中，但 async 函数中可以没有await。
- 若果 await 的 Promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理。