nuxtjs中如何对axios二次封装
作者:Lsir1998
这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
nuxtjs中对axios二次封装
plugins文件夹新建request.js
import { Message} from "element-ui"; export default function ({ $axios,redirect,$cookies}) { //请求域名 if(process.env.NODE_ENV == 'development'){ $axios.baseURL = ''; }else if(process.env.NODE_ENV == 'debug'){ $axios.baseURL = ''; }else if(process.env.NODE_ENV == 'product'){ $axios.baseURL = ''; } $axios.onRequest(config => { //此处的$cookies为cookie-universal-nuxt,当然也可以使用其它的缓存工具类 //loginInfo 是登录态 const loginInfo = $cookies.get('loginInfo') //区分axios的post请求和其它请求 因为post请求为data参数而get则为params参数 if(config.method == 'post'){ if(loginInfo && config.data){ //Object.assig为合并对象,将token和其它参数合并,当然和接口文档有关,有的是要求 //token放在请求头中的,依据接口文档而定 config.data = Object.assign(config.data,loginInfo) } }else{ if(loginInfo && config.params){ config.params = Object.assign(config.params,loginInfo) } } return config }) $axios.onResponse(response => { if(process.server){ //判断是服务端还是客户端的请求 return response.data } //状态码依接口文档而定 if(!process.server && response.data.code == '401'){ return Message({ type:'error', message:'您还未登录', duration:1500 }) } if(!process.server && response.data.code == '400'){ Message({ type:'error', message:response.data.msg, duration:1500 }) return response.data } if(!process.server && response.data.code == '404'){ Message({ type:'error', message:response.data.msg, duration:1500 }) return response.data } if(!process.server && response.data.code == '200'){ return response.data } }) $axios.onRequestError(err => { console.log(err) }) $axios.onResponseError(err => { console.log(err) }) $axios.onError(error => { const code = parseInt(error.response && error.response.status) if (code === 400) { redirect('/') } }) }
对api进行同一管理,在plugins文件夹下新建api.js
export default ({$axios},inject) => { inject('base',(params)=>$axios({ url:'/appapi/config/base', method:'GET', params })) //多个可以继续往后写inject,inject第一个参数随便取名 }
在nuxt.config.js中配置
export default { plugins: [ '@/plugins/request', '@/plugins/api', ], }
在页面组件中使用方法
export default{ async asyncData(app){ const list = await app.$base({}) }, //methods中使用可以通过this.$base({}) }
axios二次封装,设置请求、响应拦截器
axios的拦截器非常好用,分为请求拦截器与响应拦截器两种,一般把拦截器卸载api文件下的xxx.js下,
xxx.js中配置,二次封装
//对于axios进行二次封装 import axios from 'axios' //主要是要用到他的请求和拦截器(为什么要二次封装) //1.利用axios对象的方法create,去创建一个axios实例 //2.request就是axios,只不过稍微配置一下 const requests = axios.create({ //配置对象 baseUrl:'/api', //基础路径,发送请求时候,代表基于哪个路径出现api //代表请求的时间 timeout:5000, })
对axios函数配置了一下,下面可以直接用requests,写拦截器
//1.利用axios对象的方法create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
1.请求拦截器,在发请求之前,请求拦截器可以监测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{ //config 配置对象,对象里面有一个属性很重要,headers请求 return config })
2.响应拦截器:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情
//响应拦截器 requests.interceptors.response.use((re)=>{ //成功的回调函数:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情 return res.data; },(error)=>{ //响应失败的回调函数 return Promise.reject(new Error('faile')) //终止Promise链子 })
最后对外暴露就完成了axios二次封装,设置了两个拦截器
export default requests;
ps完整代码
//对于axios进行二次封装 import axios from 'axios' //主要是要用到他的请求和拦截器(为什么要二次封装) //1.利用axios对象的方法create,去创建一个axios实例 //2.request就是axios,只不过稍微配置一下 const requests = axios.create({ //配置对象 baseUrl:'/api', //基础路径,发送请求时候,代表基于哪个路径出现api //代表请求的时间 timeout:5000, }) //请求拦截器,在发请求之前,请求拦截器可以监测到,可以在请求发出去之前做一些事情 requests.interceptors.request.use((config)=>{ //config 配置对象,对象里面有一个属性很重要,headers请求 return config }) //响应拦截器 requests.interceptors.response.use((re)=>{ //成功的回调函数:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情 return res.data; },(error)=>{ //响应失败的回调函数 return Promise.reject(new Error('faile')) //终止Promise链子 }) //对外暴露 export default requests;
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。