5.axios 封装请求，并实现接口防抖

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

封装了一个axios的请求方法,同时加了一个缓存防抖,以及请求错误时可以重新请求自动请求接口的方法. 当然,其中存在不完善的地方请见谅

  封装代码：

``` import axios from 'axios' import qs from 'qs'

// 防抖数据 let requestDou =localStorage.getItem('requestDou')?JSON.parse(localStorage.getItem('requestDou')):[];

// 创建axios实例 const initAxios = (postData,timeout=60000) => { // 拦截 const AxiosInstance = axios.create({ baseURL: process.env.VUEAPPBASE_URL, timeout: timeout, withCredentials: true, emulateJSON: true, }) // 接口发起前 AxiosInstance.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/x-www-form-urlencoded' // 不使用config里面的数据，如果做加解密判断，使用qs会改变数据的类型 if(config.method.toUpperCase() === 'GET'){ config.params=postData }else{ config.data=qs.stringify(postData, { arrayFormat: 'indices'}) } return config }) // 接口发起后 AxiosInstance.interceptors.response.use( // 成功的请求 response => { if(response.data.status==1){ return Promise.resolve(response.data) }else{ return Promise.reject(response) } }, // 失败的请求 error=>{ let errorMsgTitle=error || '请求失败！' let errorObjecy={ msg:errorMsgTitle } // 页面超时 if(error.code === 'ECONNABORTED' || error.message ==="Network Error" || error.message.includes("timeout")){
errorObjecy.msg='请求超时，请重新刷新页面' // 返回页面超时 errorObjecy['isTimeout']=true } // 抛错 return Promise.reject(errorObjecy) } ) return AxiosInstance }

// 防抖数据缓存处理 function setDouData(data,delIndex=0,number=0){ if(number>0){ requestDou.splice(delIndex,number) }else{ requestDou.splice(delIndex,number,data) } localStorage.setItem('requestDou',JSON.stringify(requestDou)) } // 清除防抖 function delDouData(data){ setTimeout(()=>{ let index=requestDou.findIndex(n=>n && n.url==data.url && data.data==n.data) if(index!=-1){ setDouData(data,index,1) } },300) }

// request方法 const requestAxios =( { url, method = 'post', data={},//参数 timeout=60000,//超时时间，默认60秒 isanti=true, } )=>{ // axios配置 const options = { url, method, params: method.toUpperCase() === 'GET' || method.toUpperCase() === 'DELETE' ? data : null, data: method.toUpperCase() === 'POST' || method.toUpperCase() === 'PUT' ? data : null, } let thisPostTime=new Date().getTime() let requestDouItem={ url:url, time:thisPostTime, data:JSON.stringify(data) } // 提交数据 return new Promise((resolve, reject) => { // 接口防抖判断 if(isanti){ if(requestDou.findIndex(n=>n && n.url==url && n.data==JSON.stringify(data))!=-1){ reject({ msg:'操作频繁！' }) return false; } } setDouData(requestDouItem) const AxiosInstance = initAxios(data,timeout) AxiosInstance(options).then(res=>{ delDouData(requestDouItem) if(res){ resolve(res) } }).catch(error=>{ delDouData(requestDouItem) reject(error) }) })

} // 导出 export function request(requestParms,reuseData={}){ if(!Object.hasOwnProperty.call(reuseData,'isreuse')){ reuseData.isreuse=false } if(!Object.hasOwnProperty.call(reuseData,'num')){ reuseData.num=1 } return new Promise((resolve, reject) => { requestAxios(requestParms).then(res=>{ resolve(res) }).catch(error=>{ if(reuseData.is_reuse && reuseData.num>0){ reuseData.num=reuseData.num-1 request(requestParms,reuseData) } reject(error) }) }) } ```

使用： 

import {request} from '@/utils/request' request({ url:'https://www.baidu.com', // method:'GET', data:{ xx:99, c:88, } },{is_reuse:true,num:5}).then(res=>{ console.log(res) })