学会promise和async/await的巧用小妙招

温暖前端

已于 2024-02-18 21:48:47 修改

阅读量1.4k

点赞数 40

分类专栏：精选文章文章标签： es6 javascript 前端 html5 前端框架

于 2024-02-01 20:47:26 首次发布

本文链接：https://blog.csdn.net/qq_45914628/article/details/135981862

版权

本文详细介绍了JavaScript中处理异步操作的Promise和async/await。Promise通过链式调用来处理异步，而async/await提供了一种更简洁、易读的异步编程模式，避免回调地狱。异步错误处理在async/await中使用try/catch，在Promise中使用catch。此外，还对比了两者在并发执行和使用场景上的差异，并提供了实例演示。

摘要由CSDN通过智能技术生成

全文链接
因为JavaScript是一种单线程的语言，无法同时执行多个任务。为了解决这个问题，JavaScript引入了Promise和async/await两种方式来处理异步操作。

Promise是一种用于处理异步操作的对象，它可以将异步操作包装成一个对象，通过链式调用的方式来处理异步操作的结果。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当异步操作执行完成后，Promise对象的状态会从pending变为fulfilled或rejected，并且会调用相应的回调函数。

而async/await是ES2017引入的一种用于处理异步操作的语法糖，它是基于Promise的一种更加简洁和可读性更高的异步编程模式。，它基于Promise实现，使得异步代码的编写更加简洁和易读。async函数是一个返回Promise对象的函数，通过在函数前面加上关键字async来声明。在async函数中，可以使用await关键字来等待一个Promise对象的结果，然后将结果赋值给一个变量。

一、Promise

Promise是一种用于处理异步操作的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一个Promise对象可以通过调用resolve方法来转为fulfilled状态，或者通过调用reject方法来转为rejected状态。当一个Promise对象的状态变为fulfilled或rejected时，会触发相应的回调函数。Promise 是 ES6 中引入的一种处理异步操作的方式，它通过 then 和 catch 方法来处理异步操作的结果和错误。

Promise的基本用法如下：

const promise = new Promise((resolve, reject) => {
   
  // 异步操作
  if (异步操作成功) {
   
    resolve(结果);
  } else {
   
    reject(错误);
  }
});

promise.then((结果) => {
   
  // 处理成功的结果
}).catch((错误) => {
   
  // 处理失败的错误