Promise 与 XMLHttpRequest 的使用-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端领域，如果有一个异步请求需要发送，那么我们通常会选择使用 XMLHttpRequest (XHR) 这个 API 进行处理。不过，XHR 并不是直接返回数据的，而是通过回调函数实现，代码可读性低，且易出错。同时，这个 API 的 Callback Hell 现象也让我们很头疼。随着 Promise API 的出现，越来越多的前端开发者开始使用它来优化异步流程。

在本文中，我们会总结一些 Promise 和 XHR 的使用技巧，同时给出一些实用的示例代码。

Promise

Promise 是 ES6 添加的新特性，在异步操作的起点生成一个 Promise 对象，作为一个容器保存着异步操作的结果。可以看成一种局部的事件订阅，它的好处就是可以避免回调地狱，将异步请求的代码组织得更加清晰和易于阅读。

Promise 三种状态

Pending（进行中）：Promise 对象的初始状态，既不是成功，也不是失败状态。
Fulfilled（已成功）：指异步操作成功完成，Promise 对象的状态变为 Fulfilled，同时会有一个异步操作的结果传递给处理程序。
Rejected（已失败）：指异步操作失败，Promise 对象的状态变为 Rejected，同时会有一个异步操作失败的原因传递给处理程序。

Promise 使用示例

// javascriptcn.com 代码示例
const promiseExample = new Promise((resolve, reject) => {
  if (/*异步操作成功*/) {
    resolve('Async function success.');
  } else {
    reject(new Error('Async function failed.'));
  }
});

promiseExample.then((value) => {
  console.log(value);
}).catch((error) => {
  console.error(error);
});

XMLHttpRequest

通常情况下，我们使用 XMLHttpRequest 向服务器发出请求，并且需要挂载一个回调函数来获取响应值。虽然很方便，但这种方式的可读性并不高，并且容易出现“回调地狱”的情况。为了更好的理解它的使用方法，我将针对一些常用的功能进行介绍。

创建 XMLHttpRequest 对象

let xhr = new XMLHttpRequest();

创建 XMLHttpRequest 对象后可以对它进行一些其他操作，比如设置请求URL、请求方式、请求头等。

设置 HTTP 请求头

xhr.setRequestHeader(key, value);

其中，key 和。value 分别是请求头的键值对。

发送 GET 请求

xhr.open('GET', url, async);
xhr.send();

设置好请求头和 URL 后，通过 send() 发送请求。

发送 POST 请求

xhr.open('POST', url, async);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);

其中，data 指的是要发送的数据。

监听响应

xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
});

Promise 和 XMLHttpRequest 的结合使用

下面是一个较完整的 Promise 和 XMLHttpRequest 的结合使用示例，此段代码通过 Promise 实现了异步请求的异步回调。

// javascriptcn.com 代码示例
function httpGet(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        resolve(xhr.responseText);
      } else if (this.readyState === 4 && this.status !== 200) {
        reject(xhr.status);
      }
    };

    xhr.onerror = function() {
      reject(xhr.responseText);
    };

    xhr.send('');
  });
}
httpGet('url')
.then((data) => {
  console.log(data);
})
.catch((error) => {
  console.error(error);
});

总结

Promise 和 XMLHttpRequest 是两个非常实用的前端 API，结合使用可以大大优化异步请求的处理。在实际项目中，我们可以使用 Promise 对 XMLHttpRequest 进行封装，组织出更具备可读性和可维护性的代码，有利于团队协作及项目进度的把控。

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