screw-axios

screw-axios

介绍

axios 的扩展包，封装了常规方法，并且支持取消和断线重连的操作。

安装

npm 安装
npm i screw-axios -S

yarn 安装
yarn add screw-axios -S

pnpm 安装
pnpm add screw-axios -S

使用

创建扩展 axios 类库 在某个目录下创建 request.js 文件。写入下面的内容

import ScrewAxios from "ScrewAxios";
const request = new ScrewAxios({
  headers: {},
  baseURL: "", //基础url前缀
  timeout: "", //前端请求超时时间
  canRepeat: true,
  hasTimestamp: true,//启动时间戳
  reqInterceptor(config) {}, //request 拦截器的扩展方法
  resInterceptor(config) {}, //response 拦截器的扩展方法
  responseHandle: {
    //设置需要扩展的response的处理函数
    200: res => {
      console.log("返回了200")
      return res
    },
  },
})

export default request


//在调用的api文件
import request from "./request"

export default {
  middleViewData: data => request.get('/jscApi/middleViewData', { data }), // 正常请求
  cancelReq: data => request.post('http://localhost:3003/jscApi/middleViewData', { data, cancelRequest: true }), // 测试取消请求
  reqAgainSend: data => request.get('/equ/equTypeList11', { data, retry: 3, retryDelay: 1000 }), // 测试请求重发，除了原请求外还会重发3次
  cacheEquList: data => request.get('/equ/equList', { data, cache: true, setExpireTime: 30000 }), // 测试缓存请求带参数：setExpireTime 为缓存有效时间ms
  cacheEquListParams: data => request.get('/equ/equList', { data, cache: true }) // 测试缓存请求参数值不一样
};

正常的请求

request.get('/jscApi/middleViewData', { data:{a:1} })
request.post('/jscApi/middleViewData', { data:{a:1} })

避免重复请求

初始化配置时 canRepeat 为true

request.get('/jscApi/middleViewData', { data:{a:1} })
request.get('/jscApi/middleViewData', { data:{a:1} })
request.get('/jscApi/middleViewData', { data:{a:1} })

上述三个请求只会请求一次。

取消其中一次的请求

const source1 = request.getCancelToken()
request
  .get("http://localhost:3000/api/img", {
    data: { a: 3 },
    cancelTokenSource: source1,
  })
  .then(res => {
    console.log(res)
  })

//取消
source1.cancel() 或者  source1.cancel('这个请求取消了')