承诺异步等待 - JavaScript

在JavaScript中，异步代码经常用于处理需要时间的、非阻塞操作，如网络请求和文件读取。在异步执行时，代码会执行异步调用并立即继续执行，而不是等待调用完成后再继续执行。

当需要等待异步操作完成时，可以使用JavaScript中的“承诺”对象来管理异步操作。承诺对象代表了操作的最终状态，并且可以在操作完成后执行回调函数。

创建一个承诺

要创建一个承诺对象，可以使用以下代码：

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

在承诺对象的构造函数中，需要传递一个带有两个参数的函数：resolve和reject。resolve函数用于指示操作成功完成，并将结果传递给回调函数，而reject函数用于指示发生错误，并将错误信息传递给回调函数。

执行异步操作

在承诺对象创建后，可以执行异步操作。以下是一个使用XMLHttpRequest对象的示例：

const promise = new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://api.github.com/users');
  request.onload = () => {
    if (request.status === 200) {
      resolve(request.response);
    } else {
      reject(Error(request.statusText));
    }
  };
  request.onerror = () => {
    reject(Error('Network Error'));
  };
  request.send();
});

在上面的示例中，我们创建了一个XMLHttpRequest对象，并指定一个GET请求。然后，我们使用onload回调函数来处理成功完成的响应，使用reject函数来处理错误响应或网络错误。

处理承诺

对于承诺对象，可以使用then方法来处理成功响应，使用catch方法来处理错误响应。以下是使用then和catch的示例：

promise.then((response) => {
  console.log('Success!');
  console.log(response);
}).catch((error) => {
  console.log('Error!');
  console.log(error.message);
});

在使用then方法时，我们可以访问操作成功完成后的响应结果。在使用catch方法时，我们可以访问错误信息。

嵌套承诺

在JavaScript中，可以嵌套使用多个承诺来管理异步操作。以下是使用嵌套承诺的示例：

const promise = new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://api.github.com/users');
  request.onload = () => {
    if (request.status === 200) {
      resolve(request.response);
    } else {
      reject(Error(request.statusText));
    }
  };
  request.onerror = () => {
    reject(Error('Network Error'));
  };
  request.send();
});

promise.then((response) => {
  console.log('Success!');
  console.log(response);
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open('GET', 'https://api.github.com/users/octocat');
    request.onload = () => {
      if (request.status === 200) {
        resolve(request.response);
      } else {
        reject(Error(request.statusText));
      }
    };
    request.onerror = () => {
      reject(Error('Network Error'));
    };
    request.send();
  });
}).then((response) => {
  console.log('Success!');
  console.log(response);
}).catch((error) => {
  console.log('Error!');
  console.log(error.message);
});

在上面的示例中，我们首先创建了一个承诺对象来处理第一个异步操作。如果操作成功完成，我们将创建另一个承诺对象来处理第二个异步操作。如果操作失败，我们将使用catch方法来处理错误。

等待异步操作

在JavaScript中，可以使用异步等待来暂停代码执行，直到承诺对象的状态改变。以下是使用async和await等待承诺的示例：

async function myFunction() {
  try {
    const response = await promise;
    console.log('Success!');
    console.log(response);
  } catch (error) {
    console.log('Error!');
    console.log(error.message);
  }
}

在使用async函数时，我们可以使用await关键字来等待承诺对象的状态改变。如果操作成功完成，我们可以访问操作的响应结果，否则我们可以访问错误信息。

结论

承诺对象是JavaScript中管理异步操作的一种强大的机制。使用承诺对象，可以更轻松地管理异步操作，并在操作完成后执行回调函数。通过使用await关键字，还可以等待异步操作完成，从而暂停代码的执行。