axios-config-http

plugin-axios

介绍

axios 二次封装
1. 公共请求配置
2. 统一请求拦截器
3. 统一响应拦截器
4. 公共报错提示处理
5. 支持自定义请求拦截器
6. 支持自定义响应拦截器
8. 支持自定义token获取方法

安装教程

npm install axios-plugin-http

使用说明

在项目中引入创建实例方法createAxiosInstance，并使用该方法创建axios实例。

例子

在项目中使用

import { createAxiosInstance } from 'axios-config-http'
import type { IAxiosResponse } from 'axios-config-http'
import type { InternalAxiosRequestConfig } from 'axios'
// vue 使用提示框
import { ElMessage } from 'element-plus'
import { message } from 'element-ui'
// react 使用提示框
import { message } from 'antd'

const service = createAxiosInstance({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: ResultEnum.TIMEOUT as number,
  messageEl: ElMessage,
  TOKEN_HEADER_NAME: 'Token',
  getToken: () => {
    const token = Cookie.get('token')
    return token
  },
  // 自定义请求拦截器（在统一请求拦截器后触发）
  requestInterceptors: [
    (request: InternalAxiosRequestConfig) => {
      console.log('request-2', request)
      return request
    },
    (request: InternalAxiosRequestConfig) => {
      console.log('request-1', request)
      return request
    },
  ],
  // 自定义响应拦截器（在统一响应拦截器前触发）
  responseInterceptors: [
    [
      (response: IAxiosResponse): any => {
        const { data } = response
        // 失效状态码是203，失效后处理
        if (data.code === ResultEnum.EXPIRE) {
          RESEETSTORE()
          ElMessage.error(data.msg || ResultEnum.ERRMESSAGE)
          router.replace(LOGIN_URL)
          return Promise.reject(data)
        }
        return response
      },
      (error) => {
        ElMessage.error('>>>test-error')
        return Promise.reject(error)
      },
    ],
  ],
})

// 请求拦截器-最开始执行（axios执行顺序）
service.interceptors.request.use((config) => {
  console.log('config-最开始执行')
  return config
})

// 响应拦截器-最后执行（axios执行顺序）
service.interceptors.response.use((response) => {
  console.log('response-最后执行')
  return response
})

export default service

在组件中使用

import { service } from '@/api/http'

const getList = async () => {
    service.get('/api/list')
        .then((res) => {
            console.log(res)
        })
        .catch((error) => {
            console.log(error)
        })
}

import { service } from '@/api/http'

export function getAllOrgListApi(params: any) {
  return service.get<any>(All_ORG_LIST, { params })
}

const result = await getAllOrgListApi({ id: '1' })
console.log('result', result)