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

分别用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请求的示例及说明：
<hr> 一、Axios封装

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

1. import axios from 'axios';
3. // 创建实例并配置默认参数
4. const instance = axios.create({
5.    
6.   baseURL: 'https://api.example.com',
7.   timeout: 10000, // 超时时间
8. });
10. // 请求拦截器（如添加Token）
11. instance.interceptors.request.use(
12.   config => {
13.    
14.     config.headers.Authorization = `Bearer ${
15.      localStorage.getItem('token')}`;
16.     return config;
17.   },
18.   error => Promise.reject(error)
19. );
21. // 响应拦截器（统一处理错误）
22. instance.</

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。