axios封装
文章目录
- axios封装
- 前言
-
- 1.为什么封装Axios
- 2.包括的功能
- 一、Axios是什么？
- 二、安装 Axios
-
- 1. 安装axios （JavaScript版本）
- 2. 安装axios （TypeScript版本）
- 三、封装 Axios
-
- 1.axios （JavaScript版本）
- 2.axios （TypeScript版本）
- 四、如何使用 Axios以及结果如下图
-
- 1.代码如下：
- 2.效果图：
-
- ①、重复请求关闭
- ②、缺少用户信息+错误处理
- ③、请求超时+错误处理
- 总结（整体流程）
-
- 1. 封装流程
- 2. 博客总结
前言
1.为什么封装Axios
封装 Axios 是一种常见的做法，以提高前端项目的代码可维护性和可重用性。在这篇博客中，我将向您介绍如何使用 Axios来进行网络请求，并将其封装成一个可重用的模块，以便在整个项目中使用。
2.包括的功能
- 创建 Axios 实例
- 请求拦截器
- 响应拦截器
- 全局错误处理
- 设置用户权限令牌
- 生成请求键
- 根据环境设置 baseURL
- API 方法：提供了一组 API 方法，包括设置自定义请求头、发起 GET、POST、PUT 和 DELETE 请求
一、Axios是什么？
Axios 是一个流行的 JavaScript 库，用于进行 HTTP 请求。它可以在浏览器和 Node.js 环境中使用，提供了一种简单而强大的方式来与后端服务器进行通信。Axios 具有许多有用的功能，如拦截器、异步请求和请求取消等。
二、安装 Axios
1. 安装axios （JavaScript版本）
//安装axios（javascript版本）
npm install axios
2. 安装axios （TypeScript版本）
//安装axios（typescript版本）
npm install axios @types/axios
三、封装 Axios
1.axios （JavaScript版本）
代码如下（示例）：
import axios, {
AxiosInstance,
AxiosRequestConfig,
AxiosResponse,
AxiosError,
CancelTokenSource,
} from "axios";
let userToken = ''; // 用于存储用户的权限token
// 创建 Axios 实例
const defaultAxiosConfig = {
timeout: 10000, // 请求超时时间为10秒
// 添加其他默认配置项
};
function createAxiosInstance(options = {
}) {
const instance = axios.create({
...defaultAxiosConfig, ...options });
// 请求拦截器，添加用户令牌到请求头
instance.interceptors.request.use(config => {
if (userToken) {
config.headers.Authorization = `Bearer ${
userToken}`;
}
return config;
}, error => {
// 处理请求错误
return Promise.reject(handleGlobalError(error));
});
// 响应拦截器，处理全局错误
instance.interceptors.response.use(response => {
const requestKey = generateReqKey(response.config);
pendingRequests.delete(requestKey);
return 服务器托管网response.data;
}, error => {
// 处理响应错误
return Promise.reject(handleGlobalError(error));
});
return instance;
}
// 处理全局错误
function handleGlobalError(error) {
if (error.response) {
switch (error.response.status) {
case 401:
return "错误：缺少身份信息";
case 403:
return "错误：没有权限";
case 404:
re服务器托管网turn "错误：资源未找到";
case 500:
return "错误：服务器内部错误";
default:
return "服务器响应错误：&服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
