如何使用 Promise 封装一个 AJAX 请求？

推荐答案

// www.javascriptcn.com code example
function ajaxPromise(url, method = 'GET', data = null) {
  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);
      } else {
        reject(new Error(`Request failed with status: ${xhr.status}`));
      }
    };

    xhr.onerror = () => {
      reject(new Error('Network error'));
    };

    if (data) {
        xhr.setRequestHeader('Content-Type', 'application/json'); // 通常使用JSON
        xhr.send(JSON.stringify(data)); 
    } else {
        xhr.send();
    }

  });
}

// 示例用法
ajaxPromise('/api/users', 'GET')
  .then(data => {
    console.log('Data received:', JSON.parse(data)); // 假设返回JSON
  })
  .catch(error => {
    console.error('Error:', error);
  });

ajaxPromise('/api/users', 'POST', { name: 'John Doe', age: 30 })
    .then(data => {
        console.log('Post response:', JSON.parse(data));
    })
    .catch(error => {
        console.error('Post error:', error)
    })

本题详细解读

1. 理解Promise和AJAX

• Promise: Promise是JavaScript中用于处理异步操作的对象。它代表一个异步操作的最终完成 (或失败) 及其结果值。Promise有三种状态：pending (进行中)、fulfilled (已成功) 和 rejected (已失败)。
• AJAX (Asynchronous JavaScript and XML): AJAX允许web页面在不刷新整个页面的情况下与服务器进行数据交互。XMLHttpRequest (XHR) 是执行AJAX请求的核心对象。

2. Promise封装AJAX的必要性

传统的AJAX请求使用回调函数处理结果，这会导致“回调地狱”问题，代码难以阅读和维护。Promise通过链式调用 then 和 catch 方法，使得异步操作的处理更加清晰和可控。

3. 代码解析

1. 函数定义: ajaxPromise(url, method = 'GET', data = null)

   • 接收 url (请求地址), method (请求方法，默认为GET), 和 data (请求数据，默认为null) 作为参数。
   • 返回一个 Promise 对象。

2. 创建XMLHttpRequest对象: const xhr = new XMLHttpRequest();

   • 创建一个新的XMLHttpRequest实例。

3. 配置请求: xhr.open(method, url);

   • 使用 open() 方法配置请求类型和URL。

4. 处理响应:

   • xhr.onload = () => {...}: 当请求成功完成时触发 onload 事件。
     • 检查HTTP状态码 (xhr.status): 如果状态码在200到299之间，则认为请求成功。
     • 调用 resolve(xhr.response) 将Promise状态设置为fulfilled，并将响应数据传递出去。
     • 否则，创建一个带有错误信息的Error对象，并调用 reject(error)将Promise设置为rejected。
   • xhr.onerror = () => {...}: 当请求发生错误时触发 onerror 事件（例如，网络错误）。
     • 创建一个表示网络错误的 Error 对象，并调用 reject(error)。

5. 发送请求:

• 如果data 存在，设置 Content-Type 为 application/json 并使用 JSON.stringify 将数据转换为 JSON 字符串，使用 xhr.send 发送数据
• 如果data不存在，使用 xhr.send() 发送请求。

1. 使用Promise:
   • 通过 then 方法处理成功 (fulfilled) 的情况。例如，解析JSON格式的响应数据。
   • 通过 catch 方法处理失败 (rejected) 的情况。例如，打印错误信息。

4. 改进方向

• 可以添加请求超时处理。
• 可以添加请求头部的配置，例如自定义头部。
• 可以添加进度监听，展示请求的进度条。
• 可以处理各种类型的返回数据，不局限于JSON格式。