为什么需要axios封装？
-
统一配置： 封装 Axios 允许你在一个集中的地方配置所有的 Axios 实例，比如基础 URL、超时时间、头部信息等。这样可以避免在每个请求中重复配置这些参数。
-
拦截器： 通过封装，你可以方便地添加请求拦截器和响应拦截器。这些拦截器可以在请求发送前或响应返回后统一处理数据，比如添加 token、检查响应状态码、统一错误处理等。
-
错误处理： 封装 Axios 可以让你在一个地方处理所有请求的错误，而不是在每个请求中单独处理。
-
代码复用： 如果你的项目中有很多相似的请求，你可以创建通用的请求方法来减少代码重复。
-
简化 API 调用： 封装可以让你创建更简洁的 API 调用接口，隐藏复杂的实现细节，使得调用 API 更加直观和简单。
-
支持 Promise 链： 封装 Axios 可以让你轻松地返回 Promise 对象，这样可以在调用端使用
.then()和.catch()方法处理异步请求。
初始代码
// const handleLogin = async () => {
// const res = await axios.post(
// 'http://172.18.208.1:5000/users/checkLogin',
// qs.stringify(userInfo.value),
// )
// console.log(res);// const res1 = await axios.post(
// url: 'http://172.18.208.1:5000/users/checkLogin',
// mothod: 'get',
// params: {
// currentPage: 1,
// pageSize:10
// }
// headers:{
// Authorization:res.data.token
// }
// qs.stringify(userInfo.value),
// )
// console.log(res1)
// }第一层封装背景
不封装直接使用是没有功能性问题的，但是如果直接使用会造成项目中充斥着大量重复代码，违背了diy原则,非常不利于维护，给项目带来了巨大的维护成本和风险，所以此时需要把请求中存在的重复代码进行第一次封装：把请求中重复的代码全部抽离出来放进request文件中，比如请求基路径，超时时间，请求拦截拦截器，请求头，异常处理，restful请求方法的公共代码
第一封装完请求代码
const handleLogin = async () => {const res = await request.post('user/checkLogin', userInfo.value)console.log(res)const res1 = await request.get('user/list', {currentPage: 1,pageSize: 10,})console.log(res1)
}resful文件
import axios from 'axios'
import qs from 'qs'
const instance = axios.create({baseURL: 'http://127.0.0.1:5000', //请求的基路径timeout: 5000, //请求超时时间
})
// 请求拦截器 对前端的所有请求做统一处理，比如同一个所有请求添加请求
instance.interceptors.request.use(// eslint-disable-next-line @typescript-eslint/no-explicit-any(config: any) => {const token = JSON.parse(localStorage.getItem('t_k')!)if (token) {config.headers.Authorization = ''}return config},(err) => {console.log(err)},
)
// 响应拦截器 对后端的所有响应结果做统一处理，比如异常处理
instance.interceptors.response.use(// eslint-disable-next-line @typescript-eslint/no-explicit-any(response: any) => {// TODO 在这里判断接口异常处理逻辑(比如token失败后跳转登陆页面)return response.data},(err) => {// TODO 在这里判断接口网络异常处理逻辑（比如网络超时、网络错误）console.log(err)},
)
// 创建基于restful接口规范的异步请求方法
/*** get请求方法* @param url 请求的url地址* @param params 请求时携带的参数* @returns*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const get = async (url: string, params: any = {}) => {return await instance.get(url, { params })
}
/*** post请求* @param url 请求的是url地址 例如user/list* @param data 请求参数，eg:{ account: '', password: '' }* @returns*/
const post = async (url: string, data: unknown) => {return await instance.post(url, qs.stringify(data))
}
/*** put请求* @param url 请求的url地址* @param data 提交的数据，将会被转成url编码的字符串* @returns*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
const put = async (url: string, data: any) => {return await instance.put(url, qs.stringify(data))
}/*** // delete请求* @param url 请求的url地址* @param params 可选* @returns*/
const del = async (url: string, params: unknown) => {return await instance.delete(url, { params })
}export default {get,post,put,del,
}
第二层封装背景
在项目中一般会有大量的异步请求代码，这写异步请求代码可能会在多个地方使用到，比较分散，同时这些异步请求的代码一把都应该是以模块来划分的，这样便于统一维护和管理
第二次封装完请求代码
const handleLogin = async () => {const res = await request.post('user/checkLogin', userInfo.value)console.log(res)const res1 = await request.get('user/list', {currentPage: 1,pageSize: 10,})console.log(res1)}index文件
import request from '@/utils/request'interface LoginData {account: stringpassword: string
}
/*** 登录接口异步方法* @param data 请求参数* @returns*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const fetchLogin = async (data: LoginData) => {// 这里可以写一些其他逻辑const res = await request.post('users/checkLogin', data)if (res.data.code === 0) {// 成功提示} else {// 失败提示}return res.data
}
第三层封装完的请求代码
const handleLogin = async () => {const res = await fetchLogin(userInfo.value)console.log(res)
}总结
第三层封装
第一层：把请求中的基路径，超时时间，拦截器等重复代码抽离到request中，遵循restful规范声明4个请求方式只暴露请求地址和请求参数
第二层：把所有的请求按照模块进行划分，把请求地址封装起来，把请求参数暴露出来
第三层：在vue组件中引入第二层封装，利用async / await 对异步代码同步化
