ES6 Promise封装AJAX请求

原创

堕落飞鸟

发布于 2023-05-23 09:24:16

4600

发布于 2023-05-23 09:24:16

文章被收录于专栏：飞鸟的专栏

工作原理

Promise是一种处理异步操作的机制，它提供了一种更简洁和可读的方式来处理异步代码。当使用Promise封装AJAX请求时，我们可以将AJAX请求的结果作为Promise对象的解决值或拒绝原因，以便更好地管理和处理请求的结果。

一个Promise对象有三种状态：待定（pending）、已完成（fulfilled）和已拒绝（rejected）。当一个Promise对象处于待定状态时，它可以转换为已完成或已拒绝状态。一旦状态确定，就不可再改变。

语法

以下是使用ES6 Promise封装AJAX请求的基本语法：

const makeAjaxRequest = (url, method) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response); // 请求成功，调用resolve并传递响应数据
      } else {
        reject(new Error(xhr.statusText)); // 请求失败，调用reject并传递错误信息
      }
    };

    xhr.onerror = () => {
      reject(new Error('请求发生错误')); // 请求发生错误，调用reject并传递错误信息
    };

    xhr.send();
  });
};

创建一个Promise对象，传入一个执行器函数，该函数接受两个参数resolve和reject。
在执行器函数中执行AJAX请求，并根据请求结果调用resolve或reject。

示例

让我们通过一个示例来理解如何使用ES6 Promise封装AJAX请求。

const makeAjaxRequest = (url, method) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response); // 请求成功，调用resolve并传递响应数据
      } else {
        reject(new Error(xhr.statusText)); // 请求失败，调用reject并传递错误信息
      }
    };

    xhr.onerror = () => {
      reject(new Error('请求发生错误')); // 请求发生错误，调用reject并传递错误信息
    };

    xhr.send();
  });
};

// 使用Promise封装的AJAX请求
makeAjaxRequest('https://api.example.com/data', 'GET')
  .then((response) => {
    console.log('请求成功，响应数据：', response);
  })
  .catch((error) => {
    console.error('请求失败，错误信息：', error);
  });

在上面的示例中，我们定义了一个makeAjaxRequest函数，它接受URL和请求方法作为参数，并返回一个Promise对象。在Promise的执行器函数中，我们使用XMLHttpRequest对象执行AJAX请求，并根据请求的结果调用resolve或reject。

然后，我们使用makeAjaxRequest函数发起一个GET请求到https://api.example.com/data。通过调用then()方法，我们可以处理请求成功的情况，并打印响应数据。如果请求过程中发生错误，我们使用catch()方法捕获错误并进行处理，打印错误信息。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

登录后参与评论

0 条评论

热度