前端人必须了解的Promise/async await

2023-12-20 01:56:54

前言

JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。当 JavaScript 执行耗时操作时，比如网络请求或文件读取，它会将这些操作交给浏览器来处理，然后继续执行其他任务。当浏览器完成耗时操作后，它会将结果返回给 JavaScript。

在早期，前端开发人员使用回调函数来处理异步操作。回调函数是一种在异步操作完成后执行的函数。然而，使用回调函数来处理异步操作会使代码变得难以阅读和维护。

Promise 和 async/await 是两种新的 JavaScript 特性，它们可以帮助前端开发人员更轻松地处理异步操作。

Promise

Promise 是一个对象，它表示一个异步操作的最终完成或失败。Promise 可以处于三种状态：

待定（pending）：异步操作尚未完成。
已完成（fulfilled）：异步操作已完成，并且成功返回了结果。
已拒绝（rejected）：异步操作已完成，但失败了。

Promise 可以使用 .then() 方法来处理其结果。.then() 方法接受两个参数：

成功回调函数：当 Promise 已完成并且成功返回结果时，会调用成功回调函数。
失败回调函数：当 Promise 已完成但失败时，会调用失败回调函数。

以下是一个使用 Promise 处理异步操作的示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, world!");
  }, 2000);
});

promise.then((result) => {
  console.log(result); // "Hello, world!"
});

async/await

async/await 是两个新的 JavaScript ，它们允许前端开发人员以同步的方式编写异步代码。

要使用 async/await，首先需要使用 async 关键字声明一个函数。然后，可以使用 await 关键字来等待异步操作完成。

以下是一个使用 async/await 处理异步操作的示例：

async function greet() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello, world!");
    }, 2000);
  });

  console.log(result); // "Hello, world!"
}

greet();