vue 全局使用 axios,可以直接在 main.js 中引入 axios;也可以对 axios 进行封装,封装之后再引入到 main.js 中。总之要想全局使用,就得引入到 main.js 中,才行
1、安装 axios
npm install axios --save
2、直接引入到 main.js 中,代码如下
// 引入axios
import axios from 'axios';
Vue.prototype.axios = axios; //axios是一个基于promise的HTTP库,没有install方法,不能使用Vue.use()的方式
Vue.prototype.axios.interceptors.response.use(data => {
//console.log(data.status);
return data;
});
Vue.prototype.axios.interceptors.request.use(config => {
return config;
});
使用时直接使用 this.axios 即可
this.axios.post('http://localhost/product/test').then( res => {
this.msg = res.data.message;
this.products = res.data.data;
})
3、对 axios 进行封装
新建 api.js ,用于对 axios 进行封装
import axios from 'axios'
var api = axios.create({
timeout: 5000,
Headers: {'Content-Type': 'application/json'}
//Headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
api.interceptors.request.use(config => {
//config.headers['token'] = '01234567890';
return config
})
api.interceptors.response.use(data => {
return data
})
export default api;
在 main.js 中引入 api.js
import api from './lib/api'
Vue.prototype.$api = api
使用时直接使用 this.$api
this.$api.post('http://localhost/product/asyncList','offset=0&pageSize=10',
).then(
res => {this.msg = res.data.message;
this.products = res.data.data;
})