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

小树建站平台制作ppt的网站

wzjs 2025/9/18 15:30:21

小树建站平台,制作ppt的网站,wordpress手机 ios,临沂做网站公司哪家好在前端开发中，axios 是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。为了简化代码、统一处理请求和响应、以及增强功能（如请求拦截、响应拦截、错误处理等），通常会对 axios 进行二次封装。 1. 为什么要二次封装 …

在前端开发中，axios 是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。为了简化代码、统一处理请求和响应、以及增强功能（如请求拦截、响应拦截、错误处理等），通常会对 axios 进行二次封装。

1. 为什么要二次封装 `axios`？

统一配置：可以统一设置请求的基础 URL、超时时间、请求头等。
拦截器：可以在请求发送前和响应返回后添加统一的逻辑（如添加 Token、处理错误等）。
简化调用：封装后可以提供更简洁的 API，减少重复代码。
增强功能：可以扩展 axios 的功能，例如支持取消请求、缓存请求结果等。

2. 二次封装的核心功能

2.1 统一配置

通过 axios.create 创建一个实例，并设置全局配置。

2.2 请求拦截器

在请求发送前，对请求进行统一处理（如添加 Token）。

2.3 响应拦截器

在响应返回后，对响应进行统一处理（如错误处理）。

2.4 封装常用方法

封装 GET、POST、PUT、DELETE 等常用方法，简化调用。

3. 代码实现

以下是一个完整的 axios 二次封装示例：

import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: 'https://api.example.com', // 基础 URLtimeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json', // 默认请求头},
});// 请求拦截器
instance.interceptors.request.use((config) => {// 在发送请求之前做些什么const token = localStorage.getItem('token'); // 从本地存储获取 Tokenif (token) {config.headers.Authorization = `Bearer ${token}`; // 添加 Token 到请求头}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response) => {// 对响应数据做些什么if (response.status === 200) {return response.data; // 返回响应数据} else {return Promise.reject(response.data); // 返回错误信息}},(error) => {// 对响应错误做些什么if (error.response) {switch (error.response.status) {case 401:console.error('未授权，请重新登录');break;case 404:console.error('请求的资源不存在');break;case 500:console.error('服务器内部错误');break;default:console.error('请求失败', error.response.data);}} else {console.error('网络错误，请检查网络连接');}return Promise.reject(error);}
);// 封装 GET 请求
export const get = (url, params = {}) => {return instance.get(url, { params });
};// 封装 POST 请求
export const post = (url, data = {}) => {return instance.post(url, data);
};// 封装 PUT 请求
export const put = (url, data = {}) => {return instance.put(url, data);
};// 封装 DELETE 请求
export const del = (url, params = {}) => {return instance.delete(url, { params });
};// 导出实例
export default instance;

4. 功能解析

4.1 统一配置

通过 axios.create 创建了一个实例，并设置了 baseURL、timeout 和默认请求头。这样所有通过该实例发送的请求都会继承这些配置。

4.2 请求拦截器

在请求拦截器中，从本地存储中获取 Token，并将其添加到请求头中。这样可以确保每个请求都携带了认证信息。

4.3 响应拦截器

在响应拦截器中，对响应数据进行统一处理：

如果请求成功（状态码为 200），则直接返回响应数据。
如果请求失败（状态码不为 200），则根据状态码进行错误处理，并返回错误信息。

4.4 封装常用方法

封装了 GET、POST、PUT、DELETE 等方法，简化了调用方式。例如：

get('/users', { page: 1 }) 发送一个 GET 请求。
post('/users', { name: 'John' }) 发送一个 POST 请求。

5. 使用示例

5.1 发送 GET 请求

import { get } from './axios';get('/users', { page: 1 }).then((data) => {console.log('用户列表:', data);}).catch((error) => {console.error('获取用户列表失败:', error);});

5.2 发送 POST 请求

import { post } from './axios';post('/users', { name: 'John', age: 30 }).then((data) => {console.log('用户创建成功:', data);}).catch((error) => {console.error('用户创建失败:', error);});

5.3 发送 PUT 请求

import { put } from './axios';put('/users/1', { name: 'John Doe' }).then((data) => {console.log('用户更新成功:', data);}).catch((error) => {console.error('用户更新失败:', error);});

5.4 发送 DELETE 请求

import { del } from './axios';del('/users/1').then((data) => {console.log('用户删除成功:', data);}).catch((error) => {console.error('用户删除失败:', error);});

6. 扩展功能

6.1 取消请求

可以通过 axios.CancelToken 实现请求的取消功能。

import axios from 'axios';const CancelToken = axios.CancelToken;
let cancel;get('/users', { page: 1 }, {cancelToken: new CancelToken(function executor(c) {cancel = c;}),
});// 取消请求
cancel();

6.2 请求缓存

可以通过在封装中添加缓存逻辑，避免重复请求。

const cache = new Map();export const getWithCache = (url, params = {}) => {const cacheKey = JSON.stringify({ url, params });if (cache.has(cacheKey)) {return Promise.resolve(cache.get(cacheKey));}return get(url, params).then((data) => {cache.set(cacheKey, data);return data;});
};