screw-axios

screw-axios

介绍

axios 的扩展包，封装了常规方法并且具备以下特性

• 可以通过配置取消单个请求，也可以通过方法取消所有请求
• 可以通过开启 去除重复连接调用（通过 url、method、参数作为唯一标识）
• 可以为单个请求或者全部连接，设置断线重连，包括设置重连次数和请求延时
• 可以将请求结果缓存到 localstorage，并且可以为缓存设置时间
• 可以为单个连接设置延迟请求

安装

npm 安装
npm i screw-axios -S

yarn 安装
yarn add screw-axios -S

pnpm 安装
pnpm add screw-axios -S

使用

新建一个 request.js 文件，文件名可以随便起，然后在这个文件中创建 ScrewAxios 的实

import ScrewAxios from "ScrewAxios";
const request = new ScrewAxios({
  headers: {},
  retry:3, //这是全局的retry次数，也可以为单个请求设置retry次数，默认为0，代表全部不重连
  retryDelay:3000,//设置断开、错误重连的间隔时间，默认2秒，单位毫秒
  baseURL: "", //基础url前缀
  timeout: 200000, //前端请求超时时间，单位是毫秒，默认5秒
  canRepeat: true,//相同的连接是否可以重复发送，默认是true，如果设置成false，那么想通过请求则不可以重复
  hasTimestamp: true,//启动时间戳，设置为true之后，所有的请求都会带有时间戳  默认为false
  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 }) // 测试缓存请求参数值不一样
};

请求的方法

const request = new ScrewAxios({
  ...
})
//根据methods进行请求
request.get("/jscApi/middleViewData", { data: { a: 1 } })
request.post("/jscApi/middleViewData", { data: { a: 1 } })
request.delete("/jscApi/middleViewData", { data: { a: 1 } })
request.put("/jscApi/middleViewData", { data: { a: 1 } })
request.head("/jscApi/middleViewData", { data: { a: 1 } })
request.options("/jscApi/middleViewData", { data: { a: 1 } })

//调用axios方法请求
request.axios({
  url: "http://localhost:3000/api/img2",
  methods: "get",
  data: { a: 1 },
  retry: 3, //配置参数
  retryDelay: 1000, //配置参数
}).then(res => {
  console.log(res)
})

避免重复请求

初始化配置时 canRepeat 为 false

const request = new ScrewAxios({
  ...
  canRepeat:false //不允许重复
})
request.get('/jscApi/middleViewData', { data:{a:1} })
request.get('/jscApi/middleViewData', { data:{a:1} })
request.get('/jscApi/middleViewData', { data:{a:1} })

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

取消其中一次的请求

const request = new ScrewAxios({
  ...
})
const source1 = request.getCancelTokenSource()
request
  .get("http://localhost:3000/api/img", {
    data: { a: 3 },
    cancelTokenSource: source1,
  })
  .then(res => {
    console.log(res)
  })
//取消
source1.cancel() 或者  source1.cancel('这个请求取消了')

取消所有请求

const request = new ScrewAxios({
  ...
})
//取消所有请求
request.cancelAll()

连接设置断线后 定时重连

//为所有连接设置重连次数和重连间隔
const request = new ScrewAxios({
  ...
  retry:3, //重连次数
  retryDelay:4000,//每4秒重连
})

//单个请求错误、断开重连，单个请求设置重连后，当前连接重连次数和重连间隔会覆盖全局的
request.get('/equ/equTypeList11', { data, retry: 3, retryDelay: 1000 })

设置请求的类型

后端接收前端请求常用类型分为

• application/json
• multipart/form-data
• application/x-www-form-urlencoded
• text/xml

其中 application/json 是 axios 的默认接收类型 如果想改变接收类型可以如下操作：

const request = new ScrewAxios({
  ...
})
//使用application/x-www-form-urlencoded
//直接使用axios
request.axios({
  url: "http://localhost:3000/api/img2",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  method: "post",
  data: { a: 1 },
})
//使用post方法
request.post( "http://localhost:3000/api/img2",{
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  data: { a: 1 }
})



//使用multipart/form-data
let formData = new FormData()
formData.append("appkey", "njssdjtkj")
formData.append("sign", 111)
formData.append("sign_method", "MD5")
formData.append("mobile", "15951971791")
formData.append("engine_no", "070939")
formData.append("plate_type", "02")
formData.append("plate_no", "苏EXW365")

request
  .axios({
    url: "http://localhost:3000/api/img2",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    method: "post",
    data: formData,
  })