await/async/Promise

发布时间 2023-06-26 16:41:30作者: 村上春树的叶子

await 关键字:
在JavaScript中,await关键字用于等待一个异步函数的完成,并暂停当前函数的执行,直到异步函数返回一个解决的值(resolved value)或被拒绝的原因(rejected reason)。

await关键字只能在async函数内部使用。使用await时,需要将其放置在一个返回Promise的异步函数前面,并使用await等待该异步函数的执行结果。

以下是await的用法示例:

async function fetchData() {
  // 异步操作,返回一个Promise对象
  const response = await fetch('https://api.example.com/data');
  
  // 等待异步操作完成后获取结果
  const data = await response.json();
  
  // 对获取的数据进行处理
  console.log(data);
}

// 调用包含await的异步函数
fetchData();

在上面的示例中,fetchData函数是一个异步函数,使用await关键字等待fetch函数返回的Promise对象的结果。在等待期间,fetchData函数会暂停执行,直到Promise对象解决(或被拒绝)为止。然后,获取解决的结果,并进行进一步的处理。

需要注意的是,使用await关键字时,所等待的表达式必须返回一个Promise对象。如果不是Promise对象,它将被自动包装成一个解决的Promise对象。

Promise 对象:
Promise是JavaScript中用于处理异步操作的对象。它代表了一个可能在未来完成或失败的操作,并提供了一种结构化的方式来处理异步操作的结果。

Promise对象具有以下特点:

  1. 状态(State):Promise对象有三种状态:进行中(pending)、已完成(fulfilled)和已拒绝(rejected)。初始状态为进行中,可以转变为已完成或已拒绝。一旦状态发生改变,就不可再变。

  2. 解决值(Resolved value):Promise对象在状态转变为已完成时会返回一个解决值,表示操作成功完成的结果。

  3. 拒绝原因(Rejection reason):Promise对象在状态转变为已拒绝时会返回一个拒绝原因,表示操作失败的原因。

Promise对象提供了一组方法来处理异步操作的状态和结果,其中包括:

  • then(onFulfilled, onRejected):当Promise对象状态变为已完成时,调用onFulfilled函数;当状态变为已拒绝时,调用onRejected函数。可以通过链式调用多个then方法来处理操作的连续步骤。

  • catch(onRejected):当Promise对象状态变为已拒绝时,调用onRejected函数。相当于then(null, onRejected)的简写形式。

  • finally(onFinally):无论Promise对象状态如何(已完成或已拒绝),都会执行onFinally函数。

通过使用Promise对象,可以更方便地处理异步操作的结果,避免了回调地狱(callback hell)的问题,并提供了更清晰、可读性更高的代码结构。

async 关键字:
async 是 JavaScript 中的一个关键字,用于定义一个异步函数(async function)。异步函数是一种特殊的函数,它可以通过 await 关键字来暂停函数的执行,等待一个 Promise 对象的状态变为已完成,然后恢复函数的执行。

异步函数的定义方式如下:

async function functionName() {
  // 函数体
}

在异步函数内部,可以使用 await 关键字来等待一个 Promise 对象的结果。await 关键字后面跟着一个 Promise 对象,如果 Promise 对象的状态变为已完成,则返回 Promise 对象的解决值,否则暂停函数的执行直到 Promise 对象的状态变为已完成。

使用异步函数可以简化异步操作的代码,使代码更加清晰易读。通过 await 关键字,可以避免回调函数的使用,使异步操作的流程更加线性,更类似于同步代码的写法。

以下是一个使用异步函数的示例:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

在上述示例中,fetchData 函数是一个异步函数。它使用 await 关键字等待 fetch 函数返回的 Promise 对象,然后使用 await 关键字等待 response.json() 方法返回的 Promise 对象。这样可以保证在获取到数据后再进行后续的操作,避免了回调函数的嵌套使用。