你是不是还在vue项目中像下面代码一样使用axios呢，如果是，那你应该考虑换种更酷的方式，将axios单独封装一下，让你少些很多没必要的代码。
methods: {
getData () {
axios.get('http://xxx.com/api/data',{uuid: 1}).then(response => {
let result = response.data
...
})
}
},
上面的写法是完全ok的，只是每次都要调用一长串的axios链条，不太方便，我们可以考虑将axios封装一下，当请求通过封装层时，直接返回的就是我们想要的数据，我们不必每次都是要写大量的过滤数据的操作。
好在axios提供给我们了丰富的api，其中就有一个api axios.interceptors,我们称之为拦截器，它可以在浏览器网络进程发起网络请求之前和客户端接收到服务器返回的之后的第一时间点，对发送时要传递的数据和接受到的数据进行一些处理，方便我们后续业务的开发。
话不多说，我们直接来看代码吧。
创建axios.config.js文件
// axios 配置
import Vue from 'vue'
import axios from 'axios'
// 设置 axios 请求的 baseURL
axios.defaults.baseURL = 'http://www.xxx.com'
/**
* 设置拦截器，interceptors 响应处理
* 所有使用 axios 的请求响应，都会优先回调到拦截器中
* 在正确的返回情况下，数据会优先进入第一个回调方法
* 在请求错误的情况下，错误会进入第二个回调函数
*/
axios.interceptors.response.use((response) => {
// 统一处理数据
return response.data;
}, (error) => {
// 处理错误响应
return Promise.reject(error)
})
// 绑定到vue原型中，组件中： this.$http -> axios
Vue.prototype.$http = axios
在main.js中引入axios.config.js
import '@js/axios.config.js'
在组件中使用$http
methods: {
getData () {
this.$http.get('/getInfo')
.then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
}
},
哈哈，不管是装逼，还是偷懒，都挺不错的。当然，我们当前设置的拦截功能并不完整。我们只设置了对响应后的处理，其实我们对发送请求之前的处理更具有实际的意义。比如，可以实现的预处理有：token传递，数据纠正等等功能。以一言蔽之，只有是大多数请求都要需求处理，我们就可以将相应的功能封装到拦截器当中。
这里再补充一个小点，那就行使用axios.all()一次性发起多个网络请求，这种方式跟单个请求一起发送是一样的，但是，再编写代码的时候会更具有封装性。代码如下：
methods: {
getData () {
this.$http.all([
this.$http.get('/swiper'),
this.$http.get('/activitys')
]).then(this.$http.spread(swiperData, activityData) => {
this.swiperDatas = swiperData.list;
this.activityDatas = data.list;
})
}
}
本文会持续更新。。。
网友评论