vue3 效率提升神器，howuse/axios 入坑指南

// 封装
const service = axios.create({
  baseURL: '/',
  headers: {
  }
})

// api 文件定义
export const xxxType = (params: any) =>
    service({
        url: "/xxx/types",
        method: "get",
        params,
    });

// 使用
xxxType({ dimension }).then(({data})=>{
      tableLists.value = data?.data || []
})

相对于原生axios解决问题：

1. 加入节流自动过滤多余的重复请求，节省带宽同时，一定程度防止表单短时间重复提交的问题

2. vue页面销毁自动取消未完成的请求，节省页面资源

3. 在有必要的情况下，可手动终止当前请求

4. 响应式用法

5. 响应默认值设置

6. 增加path传参模式

import { createAxios, type HowAxiosRequestConfig, type HowExRequestOptions } from "howuse/axios"
import { AUTHORIZATION } from './const';

// createAxios 相当于 axios.create，参数完全保持一直， server 相当于 axios.create 的返回值
// 这里很明显，作者没有进行多余的装饰，只是额外封装了 useAxiosRequest 和 useBlobDownload 两个方法
export const { useAxiosRequest, useBlobDownload, server } = createAxios({
  baseURL: "/",
  timeout: 0
});

// 拦截器的创建和原生一模一样
// 请求拦截器
server.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem(AUTHORIZATION)
    if (!token) {
      console.warn("token获取失败...")
    }

    // 设置请求头
    if (config.headers) {
      config.headers[AUTHORIZATION] = `Bearer ${token}`
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  });

// 响应拦截器 适合做一些不影响数据结构的操作，例如token失效返回登录页面等
server.interceptors.response.use(
  (response) => {
    if(response.data?.code === 1 && response.data?.msg) {
      ElMessage.error(response.data.msg);
    }
    // return response.data
    // 网上许多示例将此处直接设置为 response.data ，一定程度上影响未来响应头的获取，一旦需要使用响应头时，变得异常困难
    // 正确的方式应该是将响应的server二次封装
    return response
  },
  (error) => {
    const status = error?.response?.status
    if (status === 401) {
      sessionStorage.clear()
      localStorage.clear()
      // 跳转到登录页面 ...
    } else {
      ElMessage.error(error.response.data.msg || httpStatus[error.response.status]);
    }
    return Promise.reject(error);
  }
)

// 这里定义了后端常用的接口形式
// T 根据自己的业务传入
export interface DefResult<T> {
  msg: string,
  data: T,
  code: 0 | 1
}

// 假如我的数据如下
interface IData {
  title: string,
  value: string,
}

// 我在页面使用如下
const { response, data, error, edata,  execute, aborted, abort, finished, loading } = useAxiosRequest<DefResult<IData>>(config, options);

// 根据ColumnId 查询列表，主要用于栏目排序。这里有一个参数在路径上
export function useArticleListByColumnIdRequset() {
  return useDefAxiosRequest<IArticle[]>({ url: "/article/admin-list/{columnId}" })
  // 如果是POST
  // return useDefAxiosRequest<IArticle[]>({ url: "/article/admin-list/{columnId}", method: "POST" })
}

const { execute: articleListByColumnIdexecute, data: articleListByColumnIData , abort } = useArticleListByColumnIdRequset()

articleListByColumnIdexecute({ path: { columnId } }) // 路径参数，当然也可以使用 params 和 data

// 假如需要对返回数据二次加工可以直接这样子
const dataSource = computed(() => unref(articleListByColumnIData).data || [])

// 如果想要在请求完成后做一些事情，可以直接.then
articleListByColumnIdexecute({ path: { columnId } }).then(res=>{
   responseMsg(res)
})

// 页面离开中断请求
onUnmounted(() => {
    abort()
})