axios-request-tool

对 axios 的封装，拦截请求、响应，取消请求

安装

Using npm:

npm install axios-request-tool

配置

使用前配置 new requestTool(options)

- options参数

- 参数一： axios对象（必须）

- 参数二： apiList 请求地址列表（必须）

- 参数三： interceptors 拦截对象配置（非必须）

- 参数四： axiosConfig axios配置（非必须）

import axios from 'axios'
import RequestTool from 'axios-request-tool'
const requestTool = new RequestTool({
  // 需要将axios传入
  axios,
  // 请求接口地址列表
  apiList: {
    login: '/login',
	other: '/other',
	...
  },
  // 拦截对象
  interceptors: {
    // 请求拦截 AxiosRequestConfig
    requestInterceptor(config: AxiosRequestConfig) {
      return config
    },
    // 请求错误拦截
    requestError(err) {},
    // 响应拦截
    responseInterceptor(res: AxiosResponse) {
      return res
    },
    // 响应错误拦截
    responseError(err) {},
  },
  // axios请求配置 这一点没有变动，可以参考axios官网
  axiosConfig: {
    baseURL: 'http://**********',
    timeout: 1000,
  },
})

实例参数解读

const requestTool =  new RequestTool({....})

| key | type | description | | -------------------- | ------------------------------------------: | :----------: | | axiosInstance | AxiosInstance | axios实例 | CancelToken | CancelTokenStatic |CancelToken实例| | Apis | { key:() => {},... } | 请求方法集合 | | cancelQueue | {key:() => {} | 取消方法集合 |

使用

配置好 RequestTool 可以在html或 js 文件中 直接 import 使用。

requestTool.Apis
  .login(data, "GET", { config })
  .then((res) => {})
  .catch((err) => {});

axios-request-tool 将会根据 requestTool.options 中配置的 apiList 对象中的 key 生成请求方法,返回 Promise 对象。 方法中第三个参数可以设置本次请求的 其他 参数配置, 也可以设置自定义其他的对象, 在拦截器中 config 参数获取，做出处理。

- 方法参数描述 —— 对应示例中的 login

| key | type | description | | ------ | -------------------------------------------------------------------: | :---------: | | 参数一 | {} | 请求参数 | | 参数二 | 可选: "GET"/"POST"/"PUT"/"DELETE"/"TRACE"/"CONNECT"等常见请求方式 | 请求方式 | | 参数三 | {url:string, params:object, urlParam:string} | 自定义选项 |

- 参数三解读： url 若传递url参数，将直接替换掉apiList中配置的url，采用传递的url

- 参数三解读： parmas 可用于POST等支持请求时传递query参数, 下面案例中会有提到

- 参数三解读：urlParam 可用于请求中将一些url请求参数拼接到当前url上面 下面案例中会有提到

案例使用

// params 使用
requestTool.Apis.Login(
  {
    name: 'lll',
    password: '123456',
  },
  'POST',
  {
    params: {
      name: 'lll',
      password: '123456',
    },
  }
)
  .then((er) => {
    console.log(er)
  })
  .catch((error) => console.log(error))
  
/**
 * 实际发出请求参数
 * query参数 /login?name=lll&password=123456
 * body 参数 {name: 'lll', password: '123456'}
 */
 
// urlParam 使用
requestTool.Apis.Login(
  {
    name: 'lll',
    password: '123456',
  },
  'POST',
  {
    urlParam: /12323
  }
)
  .then((er) => {
    console.log(er)
  })
  .catch((error) => console.log(error))
  
/**
 * 实际发出请求参数
 * query参数 /login/12323
 * body 参数 {name: 'lll', password: '123456'}
 */

requestTool.cancelQueue 取消请求

requestTool.cancelQueue 可以获取当前请求的取消请求方法强制中断某个请求

// requestTool.cancelQueue[apiKey]();
requestTool.cancelQueue.login();

执行 cancelQueue 中对应 apikey 的函数强行中断某个请求 catch 可以捕捉中断信息

TS的支持

如果想在ts中获得更好的Apis集合提示，需传入范型

import apiList from '@/apiList'
const requestTool = new RequestTool<typeof apiList>({
  axios,
  apiList,
})
requestTool.Apis.Login({}, 'POST').then((res) => {
  console.log(res)
})