当前位置 : 主页 > 网页制作 > HTTP/TCP >

vuebase-10_Axios配置

来源:互联网 收集:自由互联 发布时间:2021-06-16
1.全局配置 axios .defaults .baseURL = ‘https://api.example.com‘ ; axios .defaults .headers .common [ ‘Authorization‘ ] = AUTH_TOKEN ; axios .defaults .headers .post [ ‘Content-Type‘ ] = ‘application/x-www-form-urlencoded‘

1.全局配置

axios.defaults.baseURL = ‘https://api.example.com‘;

axios.defaults.headers.common[‘Authorization‘] = AUTH_TOKEN;

axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;

2.拦截器

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import Axios from ‘axios‘
import qs from "qs"// 解决参数格式的转码问题 ?name=iwen&age=20 {name:iwen,age:20}
Vue.prototype.$axios=Axios
axios.defaults.baseURL = ‘https://api.example.com‘;
axios.defaults.headers.common[‘Authorization‘] = AUTH_TOKEN;
//axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;
//拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if(config.method=="post"){
config.data=qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(!response.data){
return{
"msg":"数据没有成功返回"
}
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

Vue.config.productionTip = false
//自定义指令
Vue.directive("focus",{
//当前的生命周期
inserted:function(el,binding){
console.log(el);
console.log(binding)
el.focus();
},
bind:function(el){
console.log("只执行一次钩子函数")
},
update:function(el){
console.log("更新")
}

})/* eslint-disable no-new */new Vue({ el: ‘#app‘, data:{msg:"vue.root"}, components: { App }, template: ‘<App/>‘})

网友评论