1.axios作为vue里面用来请求数据的方法已经非常强大,底层依然是基于ajax的封装,我们在使用以前可以对其做一些简单的处理,方便后期的使用:
为了更好的使用,一般我们是会基于qs模板来做一些处理
import axios from 'axios'
import qs from 'qs'
// 测试地址
const API = {
local:'xxxxxx',
online:'xxxxxxx'
}
//production 为生产环境
if( process.env.NODE_ENV != 'production' ){
axios.defaults.baseURL = API.local;
}else{
axios.defaults.baseURL = API.online;
}
axios.defaults.timeout = 6000;
//http request 拦截器(对发送的数据做提前处理)
axios.interceptors.request.use(
config => {
config.data = qs.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
return config;
},
err => {
return Promise.reject(err);
}
);
//http response 拦截器(对返回的数据做一些处理)
axios.interceptors.response.use(
response => {
if(response.status == 200){
return response.data;
}
},
error => {
return Promise.reject(error.data)
}
)
2.为了可以全局使用这样的处理方法,我们在vue的入口文件 main.js 里面直接引入并绑定在vue原型上:
import axios from 'axios'
import '../src/assets/js/ajax.js' //文件地址
Vue.prototype.$http = axios //原型绑定