AI智能
改变未来

[JS]Promise


Promise 状态

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

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

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

Promise 可以做什么?请转至[JS]异步 JavaScript – 回调地狱一文,了解 Promise 能够解决什么问题。

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 = nulltry {result = await Promise.reject(new Error(\'error\'))} catch (e) {console.error(e)}return result}
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » [JS]Promise