用 Promise 解决 Ajax 异步请求的问题-JavaScript中文网-JavaScript教程资源分享门户

什么是 Promise？

Promise 是一种解决 JavaScript 异步编程的方案。它是 ES6 引入的新特性，通过 Promise 对象可以更加优雅地处理异步操作，避免了层层嵌套的回调函数，使代码更加简洁易读。

Promise 对象代表一个异步操作，有三种状态：

Pending（进行中）
Fulfilled（已成功）
Rejected（已失败）

当异步操作成功时，Promise 对象会从 Pending 状态转变为 Fulfilled 状态，同时会将异步操作的结果作为参数传递给后续处理函数；当异步操作失败时，Promise 对象会从 Pending 状态转变为 Rejected 状态，同时会将错误信息作为参数传递给后续处理函数。

为什么需要 Promise？

在 JavaScript 中，异步操作是非常常见的，比如 Ajax 请求、定时器、事件监听等等。传统的方法是使用回调函数来处理异步操作，但是这种方式会导致回调函数层层嵌套，代码难以维护。

// javascriptcn.com 代码示例
function ajax(url, successCallback, errorCallback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        successCallback(xhr.responseText);
      } else {
        errorCallback(xhr.statusText);
      }
    }
  };
  xhr.send();
}

ajax('http://example.com/api', function(data) {
  console.log(data);
}, function(error) {
  console.error(error);
});

上面的代码中，ajax 函数接收三个参数：请求的 URL、成功回调函数、失败回调函数。在请求结束后，根据请求的状态调用对应的回调函数。

这种方式虽然可以处理异步操作，但是当需要处理多个异步操作时，就会出现回调函数嵌套的问题，代码难以维护。

Promise 可以解决这个问题，它提供了更加优雅的方式来处理异步操作。

如何使用 Promise 处理 Ajax 请求？

在使用 Promise 处理 Ajax 请求时，我们可以使用 fetch 函数来发起请求。fetch 函数返回一个 Promise 对象，我们可以在 Promise 对象的 then 方法中处理异步操作的结果。

// javascriptcn.com 代码示例
fetch('http://example.com/api')
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

上面的代码中，fetch 函数返回一个 Promise 对象，我们可以在 Promise 对象的 then 方法中处理异步操作的结果。如果请求成功，我们可以通过 response.text() 方法获取响应的文本内容，并将其作为参数传递给后续处理函数；如果请求失败，我们可以通过 throw new Error() 抛出一个错误，并将错误信息作为参数传递给 catch 方法。

Promise 的链式调用

Promise 还可以使用链式调用的方式来处理多个异步操作。在链式调用中，每个 then 方法都返回一个新的 Promise 对象，这个新的 Promise 对象的状态由当前 Promise 对象的状态决定。

// javascriptcn.com 代码示例
fetch('http://example.com/api')
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(function(data) {
    console.log(data);
    return fetch('http://example.com/data');
  })
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

上面的代码中，我们使用了两个 then 方法来处理两个异步操作。在第一个 then 方法中，如果请求成功，我们将响应的文本内容作为参数传递给后续处理函数，并返回一个新的 Promise 对象；在第二个 then 方法中，我们发起了另一个异步请求，并将响应的 JSON 数据作为参数传递给后续处理函数。

Promise 的错误处理

在 Promise 中，错误处理可以通过 catch 方法来实现。catch 方法接收一个错误处理函数作为参数，如果 Promise 对象的状态变为 Rejected，就会调用这个错误处理函数。

// javascriptcn.com 代码示例
fetch('http://example.com/api')
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(function(data) {
    console.log(data);
    return fetch('http://example.com/data');
  })
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的代码中，我们使用了 catch 方法来处理异步操作的错误。如果任意一个异步操作失败，Promise 对象的状态就会变为 Rejected，就会调用 catch 方法中的错误处理函数。

总结

Promise 是一种优雅地处理 JavaScript 异步操作的方案，它可以避免回调函数嵌套的问题，使代码更加简洁易读。在使用 Promise 处理 Ajax 请求时，我们可以使用 fetch 函数发起请求，并使用 then 方法处理异步操作的结果。如果需要处理多个异步操作，我们可以使用链式调用的方式，每个 then 方法都返回一个新的 Promise 对象，这个新的 Promise 对象的状态由当前 Promise 对象的状态决定。在错误处理方面，Promise 可以使用 catch 方法来处理异步操作的错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650e4d8395b1f8cacd7860e9