免费资源部落

本篇内容主要讲解“vue中如何实现axios的二次封装”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue中如何实现axios的二次封装”吧!

axios

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

在前端框架中的应用也是特别广泛，不管是vue还是react，都有很多项目用axios作为网络请求库。

我在最近的几个项目中都有使用axios，并基于axios根据常见的业务场景封装了一个通用的request服务。

npm:

$npminstallaxios

bower:

$bowerinstallaxios

Using cdn:

<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

业务场景：

全局请求配置。

get,post,put,delete等请求的promise封装。

全局请求状态管理，供加载动画等使用。

路由跳转取消当前页面请求。

请求携带token，权限错误统一管理。

默认配置

定义全局的默认配置

axios.defaults.timeout=10000//超时取消请求axios.defaults.headers.post['Content-Type']='application/json;charset=UTF-8'axios.defaults.baseURL=process.env.BASE_URL

自定义配置（非常见业务场景，仅作介绍）

//创建实例时设置配置的默认值varinstance=axios.create({baseURL:'https://api.another.com'});//在实例已创建后修改默认值instance.defaults.headers.common['Authorization']=AUTH_TOKEN;

优先级：自定义配置 > 默认配置

请求及响应拦截器

请求拦截器

//请求列表constrequestList=[]axios.interceptors.request.use((config)=>{//1.将当前请求的URL添加进请求列表数组requestList.push(config.url)//2.请求开始，改变loading状态供加载动画使用store.dispatch('changeGlobalState',{loading:true})//3.从store中获取token并添加到请求头供后端作权限校验consttoken=store.getters.userInfo.tokenif(token){config.headers.token=token}returnconfig},function(error){returnPromise.reject(error)})

1.请求拦截器中将所有请求的url添加进请求列表变量，为取消请求及loading状态管理做准备2.请求一旦开始，就可以开启动画加载效果。3.用户登录后可以在请求头中携带token做权限校验使用。

响应拦截器

axios.interceptors.response.use(function(response){//1.将当前请求中请求列表中删除requestList.splice(requestList.findIndex(item=>item===response.config.url),1)//2.当请求列表为空时，更改loading状态if(requestList.length===0){store.dispatch('changeGlobalState',{loading:false})}//3.统一处理权限认证错误管理if(response.data.code===900401){window.ELEMENT.Message.error('认证失效，请重新登录！',1000)router.push('/login')}returnresponse},function(error){//4.处理取消请求if(axios.isCancel(error)){requestList.length=0store.dispatch('changeGlobalState',{loading:false})thrownewaxios.Cancel('cancelrequest')}else{//5.处理网络请求失败window.ELEMENT.Message.error('网络请求失败',1000)}returnPromise.reject(error)})

1.响应返回后将相应的请求从请求列表中删除2.当请求列表为空时，即所有请求结束，加载动画结束3.权限认证报错统一拦截处理4.取消请求的处理需要结合其他代码说明5.由于项目后端并没有采用RESTful风格的接口请求，200以外都归为网络请求失败

promise封装及取消请求

constCancelToken=axios.CancelToken//canceltoken列表letsources=[]constrequest=function(url,params,config,method){returnnewPromise((resolve,reject)=>{axios[method](url,params,Object.assign({},config,{//1.通过将执行程序函数传递给CancelToken构造函数来创建canceltokencancelToken:newCancelToken(functionexecutor(c){//2.将canceltoken存入列表sources.push(c)})})).then(response=>{resolve(response.data)},err=>{if(err.Cancel){console.log(err)}else{reject(err)}}).catch(err=>{reject(err)})})}constpost=(url,params,config={})=>{returnrequest(url,params,config,'post')}constget=(url,params,config={})=>{returnrequest(url,params,config,'get')}//3.导出canceltoken列表供全局路由守卫使用export{sources,post,get}

1.axios cancel token API2.存入需要取消的请求列表导出给导航守卫使用3.router.js

...import{sources}from'../service/request'...router.beforeEach((to,from,next)=>{document.title=to.meta.title||to.name//路由发生变化时取消当前页面网络请求sources.forEach(item=>{item()})sources.length=0next()})

request.js完整代码：

//引入网络请求库https://github.com/axios/axiosimportaxiosfrom'axios'importstorefrom'../store'importrouterfrom'../router'//axios.defaults.timeout=10000constrequestList=[]axios.defaults.headers.post['Content-Type']='application/json;charset=UTF-8'axios.defaults.baseURL=process.env.BASE_URL//自定义拦截器axios.interceptors.request.use((config)=>{requestList.push(config.url)store.dispatch('changeGlobalState',{loading:true})consttoken=store.getters.userInfo.tokenif(token){config.headers.token=token}returnconfig},function(error){returnPromise.reject(error)})axios.interceptors.response.use(function(response){requestList.splice(requestList.findIndex(item=>item===response.config.url),1)if(requestList.length===0){store.dispatch('changeGlobalState',{loading:false})}if(response.data.code===900401){window.$toast.error('认证失效，请重新登录！',1000)router.push('/login')}returnresponse},function(error){requestList.length=0store.dispatch('changeGlobalState',{loading:false})if(axios.isCancel(error)){thrownewaxios.Cancel('cancelrequest')}else{window.$toast.error('网络请求失败！',1000)}returnPromise.reject(error)})constCancelToken=axios.CancelTokenletsources=[]constrequest=function(url,params,config,method){returnnewPromise((resolve,reject)=>{axios[method](url,params,Object.assign(config,{cancelToken:newCancelToken(functionexecutor(c){sources.push(c)})})).then(response=>{resolve(response.data)},err=>{reject(err)}).catch(err=>{reject(err)})})}constpost=(url,params,config={})=>{returnrequest(url,params,config,'post')}constget=(url,params,config={})=>{returnrequest(url,params,config,'get')}export{sources,post,get}

到此，相信大家对“vue中如何实现axios的二次封装”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！