axios的使用
参考官网:https://www.kancloud.cn/yunye/axios/234845
1 引入
# 安装axios
npm install axios --save
// 给Vue函数添加一个原型属性$axios指向axios(全局使用axios)
// vue实例中直接用this.$axios就可以执行axios方法
Vue.prototype.$axios=axios
2 使用
2.1 get示例
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.2 post示例
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.3 执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
2.4 自定义axios请求模板
① 创建模板
import axios from 'axios'
// baseURL---基本路径
var service = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
export default service
② 使用模板
import service from "@/path";
// get请求,传参id,getUser()
export function getUser(id){
return service({
url: "/path",
method: "get",
params:{
id:id
}
});
}
// post 请求,传参user对象,login()
export function login(data){
return service({
url: "/path",
method: "post",
params:{
data:user
}
});
}
3 拦截器
3.1 时机
在请求或响应被then或catch处理前拦截它们
3.2 创建拦截器,代码示例
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
3.3 删除拦截器,代码示例
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
3.4 实例
3.4.1 需求
对所有的请求,如果是"/“或者”/login",不做任何处理,如果不是,给请求头中加上token字段,token的value是根据localStorage中获取
3.4.2 思路
使用axios的请求拦截,请求拦截发生在vue中router.beforeEach()之前
3.4.3 代码示例
//请求拦截器
service.interceptors.request.use(
(config) => {
console.log("请求拦截");
let pathname = location.pathname;
if(localStorage.getItem('token')){
if(pathname != '/' && pathname != '/login'){
config.headers.common['token'] = localStorage.getItem('token');
}
}
console.log(config);
return config;
},
(error) => {
return Promise.reject(error);
})