前端技术分享
0%

Promise 和 async/await

发表于 分类于

Promise 基础

Promise 表示异步操作最终完成或失败。

1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (success) {
    resolve(value)
  } else {
    reject(error)
  }
})

Promise 状态

  • Pending：初始状态
  • Fulfilled：操作成功
  • Rejected：操作失败

Promise 方法

then()

1
2
3
4
5
promise.then(value => {
  // 成功处理
}).catch(error => {
  // 失败处理
})

catch()

1
2
3
promise.catch(error => {
  // 处理错误
})

finally()

1
2
3
promise.finally(() => {
  // 总是执行
})

Promise 静态方法

Promise.all()

1
2
3
Promise.all([p1, p2, p3]).then(values => {
  // 所有 Promise 成功
})

Promise.race()

1
2
3
Promise.race([p1, p2]).then(value => {
  // 第一个完成
})

Promise.allSettled()

1
2
3
Promise.allSettled([p1, p2]).then(results => {
  // 所有完成，无论成功失败
})

async/await

1
2
3
4
5
6
7
8
async function asyncFunction() {
  try {
    const value = await promise
    return value
  } catch (error) {
    throw error
  }
}

错误处理

1
2
3
4
5
6
7
8
9
10
11
12
13
// Promise
promise
  .then(() => { throw new Error('error') })
  .catch(error => console.error(error))

// async/await
async function func() {
  try {
    await promise
  } catch (error) {
    console.error(error)
  }
}

总结

Promise 和 async/await 让异步代码更可读。async/await 是 Promise 的语法糖，底层仍是 Promise。