Promise 状态

Promise 是一个对象，表示异步操作的结果。它有一个 [[PromiseState]] 属性，表示当前的状态，状态有两种，即 pending 和 fulfilled 以及 rejected。

在异步任务完成之前，Promise 的状态是 pending，即处于等待异步任务返回结果的状态中。

[[PromiseState]] 会根据异步任务完成的情况改变 fulfilled 或 rejected。异步任务成功时调用 resolve，并改变 Promise 的状态为 fulfilled ；失败时调用 reject，并改变 Promise 的状态为 rejected 。

resolve

resolve 即在异步任务成功时调用。它还可以携带一条成功消息给 then() 函数。

new Promise((resolve, reject) => {
resolve('success')
}).then((r) => {
console.log(r) // => 'success'
})

reject

reject 即在异步任务失败时调用。它可以携带一条错误消息给 then() 或者 catch() 函数。

new Promise((resolve, reject) => {
reject('failed')
}).then(
(r) => {},
(e) => {
console.log(e) // => 'failed'
}
)

Promise 链

Promise 允许链式异步操作，无需把每个操作嵌套在前一个操作的回调内部，因此 Promise 可以解决回调地狱的问题。

function asyncFn() {
return new Promise((resolve, reject) => {
resolve('success')
})
}

asyncFn()
.then((res) => {
return asyncFn()
})
.then((res) => {
return asyncFn()
})
.catch((error) => {
console.log(error)
})

all

静态方法 all() 可以并行执行任意数量的 Promise。它返回元素是 Promise 的 [[PromiseResult]] 字符串数组。若某个 Promise 调用了 reject ，就立即结束链式调用，程序进入 catch 函数。

function asyncFn(bool) {
return new Promise((resolve, reject) => {
bool == true ? resolve('successed') : reject('failed')
})
}

Promise.all([asyncFn(true), asyncFn(true)])
.then((res) => {
console.log(res) // ["success", "success"]
})
.catch((error) => {
console.log(error)
})

allSettled

allSettled() 也可以并行执行任意数量的 Promise。与 all() 不同的是，allSettled() 不会因为一个 rejected 而立即结束链式调用。

Promise.allSettled([asyncFn(true), asyncFn(false), asyncFn(true)])
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error)
})

allSettled() 返回数组，其元素是对象。对象中包含 status 和 value 属性，属性对应着 Promise 的 [[PromiseState]] 和 [[PromiseResult]] 两个属性。

async/await

async/await 是一组关键字，实际上它们是专门方便程序员书写 Promise 而定义的“语法糖”，其本质依旧是 Promise。

async 在声明函数关键字 function 之前（也有其他地方可以使用）。

async function asyncFn() {
let result = await Promise.resolve('success')
console.log(result) // => 'success'
return result
}

await 实际上就是在 Promise 的 [[PromiseState]] 为 fulfilled 或 rejected 状态时调用函数 then()。await 可以直接在普通字面量前使用，比如 await 'success'，实际上是 Promise.resolve('success') 。

打印函数，可以看到结果返回了一个 Promise 对象，其 [[PromiseState]] 为 fulfilled，说明异步任务执行成功并调用了 resolve 函数。

如果 Promise 的 [[PromiseState]] 为 rejected （即调用 reject 函数）时，可以用 try/catch 捕获错误信息。

async function asyncFn() {
let result = null
try {
result = await Promise.reject(new Error('error'))
} catch (e) {
console.error(e)
}
return result
}