目录
简介
安装
返回效果
代码演示
全局配置
Axios实例
封装
拦截器
简介
Axios支持：XMLHttpRequests、node.js发送请求、Promisse、拦截请求和响应、转换请求和响应数据，用法有：
axios()
axios.request()
axios.get()
axios.delete()
axios.head()
axios.post()
axios.put()
axios.patch()
axios.all()
安装
npm install axios --save
返回效果
代码演示
import Vue from 'vue'
import App from './App'
import store from './store'
import axios from 'axios'
Vue.config.productionTip = false
/* 这里记得挂载store，否则this.$store失败，同时注意与import中大小写一致 */
new Vue({
el: '#app',
store,
render: h => h(App)
})
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios({
// url: '/home/multidata'
url: '/home/multidata',
method: 'get',
params: {
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
});
axios.all(
[
axios({url: '/home/multidata'}),
axios({url: '/home/multidata'})])
.then(results => {
console.log(results);
console.log(results[1]);
console.log(results[1]);
});
全局配置
就是把公共配置抽取出来，这里可以看官网的说明，有很多选项的：
Axios实例
全局配置，就是所有Axios共享同一个配置，但在于某些模块里面，希望使用该模块独有的配置，到了其他模块再去使用其他模块独有的配置，此时就可以使用该特定：
const instance1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
});
instance1({
url: '/home/multidata'
})
.then(res => {
console.log(res);
});
封装
建议只要是引用第三方组件，尽量避免在每个.Vue添加import依赖，否则后续改动，工作量很大的，鉴于此，可以使用这种思想来提供公共服务：
import Axios from "axios";
export function request(config) {
// 创建axios实例
const instance = Axios.create({
baseURL: '',
timeout: 5000
});
// 回调
return instance(config);
// return new Promise((resolve, reject) => {
// // 创建axios实例
// const instance = Axios.create({
// baseURL: '',
// timeout: 5000
// });
// // 回调
// instance(config)
// .then(res => resolve(res))
// .catch(err => reject(err));
// });
}
// 用的时候：request({}).then().catch();
拦截器
import Axios from "axios";
export function request(config) {
// 创建axios实例
const instance = Axios.create({
baseURL: '',
timeout: 5000
});
// axios实例拦截器，既有实例拦截器，也有全局拦截器
// 拦截请求
instance.interceptors.request.use(
config => {
console.log(config);
// 这里要返回config对象
return config;
},
err => {
console.log(err)}
);
// 响应拦截
instance.interceptors.response.use(
resp => {
console.log(resp.data);
return resp.data;
},
err => {
console.log(err);
}
);
// 回调
return instance(config);
// return new Promise((resolve, reject) => {
// // 创建axios实例
// const instance = Axios.create({
// baseURL: '',
// timeout: 5000
// });
// // 回调
// instance(config)
// .then(res => resolve(res))
// .catch(err => reject(err));
// });
}
// 用的时候：request({}).then().catch();
