当前位置：首页 > article >正文

前端基础——axios、fetch和xhr来封装请求

article 2025/2/21 9:52:17

分别用axios、fetch和xhr来封装请求。首先，我得先理解这三种技术各自的特点和封装方式。Axios是一个基于Promise的第三方库，底层可能使用XHR或Node.js的http模块，而fetch是浏览器原生的API，也是基于Promise的。XHR则是比较原始的浏览器API，需要手动处理回调，代码相对冗长。

首先看Axios的封装。根据Axios通常通过创建实例并配置baseURL、超时时间，使用拦截器处理请求和响应。比如，提到使用axios.create来创建实例，设置baseURL和timeout。请求拦截器可以用来添加token，响应拦截器处理错误。还提到统一处理config、请求头和错误处理。所以封装Axios需要创建实例，配置默认值，添加拦截器，然后导出封装后的方法。

然后是fetch的封装。指出，fetch使用Promise，但需要手动处理响应，比如检查状态码，转换数据格式。中的示例展示了如何封装post和get方法，设置headers和credentials。需要注意fetch默认不携带cookie，且对400、500状态码不会自动reject，所以封装时要处理这些情况。比如，在post方法中设置method、headers、body，并使用res.json()解析数据。此外，还提到fetch不支持超时控制，可能需要用Promise.race和setTimeout模拟，但无法真正中止请求。

接下来是XHR的封装。说明XHR需要手动创建实例，设置open方法，监听readystatechange事件。的示例展示了如何设置请求头，发送数据。由于XHR基于事件回调，封装时最好用Promise包装，使其支持异步。比如，在函数中返回Promise，在onload中resolve，onerror中reject。另外，GET请求需要将参数拼接到URL，POST需要设置Content-Type并发送字符串化的数据。

在整理过程中，需要确认各技术的关键点。比如Axios的拦截器配置，fetch的响应处理，XHR的回调封装成Promise。同时注意各证据中的差异，例如提到Axios底层可能使用XHR或fetch，但多数证据显示Axios主要封装XHR。此外，fetch的兼容性问题，如指出其兼容性不如XHR，可能需要polyfill。

最后，综合各证据的示例代码，分别写出三种方法的封装示例，确保每个步骤都有相应的证据支持，并正确引用来源。例如，Axios的实例创建和拦截器来自；fetch的封装参考；XHR的Promise封装参考。同时注意处理错误和配置项，如超时、请求头等，确保封装的健壮性。

以下分别用axios、fetch和XMLHttpRequest（XHR）封装HTTP请求的示例及说明：

一、Axios封装

Axios是基于Promise的第三方库，支持请求拦截、响应拦截等功能，适合复杂场景。

import axios from 'axios';

// 创建实例并配置默认参数
const instance = axios.create({
   
  baseURL: 'https://api.example.com',
  timeout: 10000, // 超时时间
});

// 请求拦截器（如添加Token）
instance.interceptors.request.use(
  config => {
   
    config.headers.Authorization = `Bearer ${
     localStorage.getItem('token')}`;
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器（统一处理错误）
instance.</