使用 Promise 顺序执行多个 Ajax 请求

在前端开发中，我们经常需要进行多个 Ajax 请求，而这些请求可能会有一定的依赖关系，需要按照一定的顺序执行。在这种情况下，我们可以使用 Promise 对象来实现顺序执行多个 Ajax 请求。

Promise 简介

Promise 是 JavaScript 的一种异步编程解决方案，它可以解决 Callback Hell 的问题，使代码更加清晰易读。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 状态变为 fulfilled 或 rejected 时，会调用对应的回调函数。

Promise 对象有两个重要的方法：then() 和 catch()。then() 方法可以接收两个参数，第一个参数是 fulfilled 状态的回调函数，第二个参数是 rejected 状态的回调函数。catch() 方法可以捕获错误并处理。

顺序执行多个 Ajax 请求

使用 Promise 顺序执行多个 Ajax 请求的思路是将多个 Ajax 请求包装成一个 Promise 对象，然后按照顺序调用这些 Promise 对象的 then() 方法。

下面是一个示例代码：

// javascriptcn.com 代码示例
function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network Error'));
    };
    xhr.send();
  });
}

ajax('/api/getUserInfo')
  .then(function(response) {
    console.log(response);
    return ajax('/api/getOrderList');
  })
  .then(function(response) {
    console.log(response);
    return ajax('/api/getAddressList');
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

在上面的代码中，我们定义了一个 ajax() 函数来发送 Ajax 请求，并将其包装成一个 Promise 对象。然后我们按照顺序调用这些 Promise 对象的 then() 方法，并在每个 then() 方法中处理返回的数据。如果发生错误，我们可以使用 catch() 方法来处理。

总结

使用 Promise 顺序执行多个 Ajax 请求可以使代码更加清晰易读，同时也能够解决多个 Ajax 请求之间的依赖关系。在实际开发中，我们可以根据需要来使用 Promise 对象来处理异步操作，使代码更加优雅。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65711cecd2f5e1655d9c4f92