@sasaiweb/axios NPM

Axios 封装

导语

普通的项目直接使用 Axios 已经是足够的，但是相对复杂的项目，尤其是使用不同的后端服务，axios需要针对于不同的服务做出不同的配置或者处理，就需要创建多个axios，简单粗暴的同学会多复制一份axios.js,这样能处理问题，但是不符合编程思想，所以使用类语法进行封装，来创建多个实例，一套代码传入不同配置来应对不同的需求

TS版本1.0 （主要参考网上代码,以及代码解析）团队npm 发包版本

可创建多个axios实例, 实现多个实例不同, 支持传入配置 axios 所有支持的配置，并支持手动传入自定义拦截器
拦截器更加灵活，有全局、实例、接口三种拦截器。
增加请求优化配置可以移除请求
TS语法，代码更加规范化，减少运行错误发生

下载依赖

npm i @sasaiweb/axios

项目引入

import SasaiRequest from '@sasaiweb/axios'

实例化

new SasaiRequest({
  baseURL: '',
  timeout: 1000 * 60 * 5,
  interceptors: {
    // 请求拦截器
    requestInterceptors: (config) => {
      console.log('实例请求拦截器 :>> ')
      return config
    },
    // 响应拦截器
    responseInterceptors: (result) => {
      console.log('实例响应拦截器 :>> ',result)
      return result
    }
  }
})

npm.io

js文件完整代码

import SasaiRequest from '@sasaiweb/axios'

//实例化请求
const request = new SasaiRequest({
  baseURL: '',
  timeout: 1000 * 60 * 5,
  interceptors: {
    // 请求拦截器
    requestInterceptors: (config) => {
      console.log('实例请求拦截器 :>> ')
      return config
    },
    // 响应拦截器
    responseInterceptors: (result) => {
      console.log('实例响应拦截器 :>> ',result)
      return result
    }
  }
})

/**
 * @description: 请求
 * @param {baseRequestConfig} config 不管是GET还是POST请求都使用data
 * @returns {Promise}
 */
const baseRequest = (config) => {
  const { method = 'GET' } = config
  if (method === 'get' || method === 'GET') {
    config.params = config.data
  }
  return request.request(config)
}


// 取消请求
export const cancelRequest = (url) => {
  return request.cancelRequest(url)
}
// 取消全部请求
export const cancelAllRequest = () => {
  return request.cancelAllRequest()
}

export default baseRequest

页面使用

import baseRequest  from '@/utils/request'

baseRequest ({
  url: '/tapd/bugs',
  method: 'post',
  data,
  interceptors: {
    requestInterceptors(res) {
      console.log('A接口当前接口请求拦截')
      return res
    },
    responseInterceptors(result) {
      console.log('A接口当前接口响应拦截', result)
      return result
    }
  }
})

Ts文件完整代码

import SasaiRequest from '@sasaiweb/axios'

import type { RequestConfig } from '@sasaiweb/axios'
interface baseRequestConfig<T> extends RequestConfig {
  data?: T
}
interface baseResponse<T> {
  statusCode: number
  desc: string
  result: T
}

const request = new SasaiRequest({
  baseURL: '',
  timeout: 1000 * 60 * 5,
  interceptors: {
    // 请求拦截器
    requestInterceptors: (config) => {
      console.log('实例请求拦截器 :>> ')
      return config
    },
    // 响应拦截器
    responseInterceptors: (result) => {
      console.log('实例响应拦截器 :>> ',result)
      return result
    }
  }
})

/**
 * @description: 函数的描述
 * @generic D 请求参数
 * @generic T 响应结构
 * @param {baseRequestConfig} config 不管是GET还是POST请求都使用data
 * @returns {Promise}
 */
const baseRequest = <D = any, T = any>(config: baseRequestConfig<D>) => {
  const { method = 'GET' } = config
  if (method === 'get' || method === 'GET') {
    config.params = config.data
  }
  return request.request<baseResponse<T>>(config)
}

// 取消请求
export const cancelRequest = (url: string | string[]) => {
  return request.cancelRequest(url)
}
// 取消全部请求
export const cancelAllRequest = () => {
  return request.cancelAllRequest()
}


export default baseRequest