axios三层封装 - 技术栈

为什么需要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: string
  password: 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 对异步代码同步化