Promise封装AJAX请求

AJAX简介

AJAX（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步数据交互的技术。它允许我们通过JavaScript发送HTTP请求，并在请求完成后处理响应数据，而无需刷新整个页面。

常用的AJAX请求方法有XMLHttpRequest对象和fetch函数。在本文中，我们将使用fetch函数作为示例来封装AJAX请求。

封装AJAX请求为Promise

下面是将AJAX请求封装为Promise的代码示例：

代码语言：javascript复制

function ajaxRequest(url, options) {
  return new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        if (response.ok) {
          resolve(response.json()); // 处理请求成功的情况，解析响应数据并传递
        } else {
          reject(new Error(response.statusText)); // 处理请求失败的情况，传递错误信息
        }
      })
      .catch(error => {
        reject(error); // 处理请求过程中出现的错误
      });
  });
}

在上述代码中，我们定义了一个ajaxRequest函数，它接受URL和选项参数，并返回一个Promise对象。在Promise的执行器函数中，我们使用fetch函数进行实际的AJAX请求。

如果请求成功（状态码为200-299），我们调用response.json()方法解析响应数据，并通过resolve函数将Promise状态转变为已完成状态，并传递解析后的数据。如果请求失败（状态码不在200-299范围内），我们创建一个新的Error对象，并通过reject函数将Promise状态转变为已失败状态，并传递错误信息。

如果在请求过程中发生了错误（如网络错误），则会通过.catch()方法捕获，并通过reject函数将Promise状态转变为已失败状态，并传递错误信息。

使用Promise封装的AJAX请求

现在我们可以使用封装好的ajaxRequest函数来发送AJAX请求，并处理请求的结果和错误。下面是一个示例：

代码语言：javascript复制

ajaxRequest('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(data => {
    console.log('Response:', data); // 处理请求成功的情况，输出响应数据
  })
  .catch(error => {
    console.error('Error:', error); // 处理请求失败的情况，输出错误信息
  });

在上述示例中，我们调用ajaxRequest函数发送一个GET请求到https://api.example.com/data，并设置请求头为Content-Type: application/json。

通过.then()方法，我们添加了处理已完成状态的回调函数，其中我们打印出响应数据。通过.catch()方法，我们添加了处理已失败状态的回调函数，其中我们打印出错误信息。

前端

0 人点赞