vue使用axios 配置自定义接口地址
api.js 方法import Vue from 'vue'import axios from 'axios';Vue.prototype.$axios = axios;export default {apiUrl:'',//本地测试后台接口地址前缀 ajax:function(options){ var defaults = { method:'POST', url : ""
api.js 方法
import Vue from 'vue'
import axios from 'axios';Vue.prototype.$axios = axios;
export default {
apiUrl:'',//本地测试后台接口地址前缀
ajax:function(options){
var defaults = {
method:'POST',
url : "",
data : "",
success : ""
};
var $this = this
var opts = this.replaceDf(defaults,options)//将参数替换默认参数
opts.url = $this.apiUrl+opts.url//接口地址前缀和后缀拼接在一起
var timestamp=new Date().getTime() // 传时间戳 添加时间戳 避免读取缓存
axios.defaults.headers.common['Authentication'] = token;//增加token到公共 头部
if(opts.method=="GET"){
axios.get(opts.url+"?"+timestamp, {
params: opts.data
})
.then(function (response) {
if(response.data.code==9006||response.data.code==1003||response.data.code==1002){ // 未登录
localStorage.setItem('isLogin','')
window.location.href='#/login'
}else{
opts.success(response.data);
}
})
.catch(function (error) {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误'
break
case 401:
error.message = '未授权,请登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '未找到访问地址'
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器内部错误'
break
case 501:
error.message = '服务未实现'
break
case 502:
error.message = '网关错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网关超时'
break
case 505:
error.message = 'HTTP版本不受支持'
break
default:
}
}
opts.success(error);
});
}
else if(opts.method=="POST"){
axios.post(opts.url+"?"+timestamp, opts.data)
.then(function (response) {
if(response.data.code==9006||response.data.code==1003||response.data.code==1002){ // 未登录
localStorage.setItem('isLogin','')
window.location.href='#/login'
}else{
opts.success(response.data);
}
})
.catch(function (error) {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误'
break
case 401:
error.message = '未授权,请登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '未找到访问地址'
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器内部错误'
break
case 501:
error.message = '服务未实现'
break
case 502:
error.message = '网关错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网关超时'
break
case 505:
error.message = 'HTTP版本不受支持'
break
default:
}
}
opts.success(error);
});
}
},
replaceDf:function(obj1,obj2){ //**把obj2中的的属性值赋值给obj1对应的属性
for(var key in obj2){
obj1[key]=obj2[key]
}
return obj1;
}
}
mian.js
import Vue from 'vue';
import App from './App';
import router from './router';
import axios from 'axios';
import api from './assets/js/api'
// 将API方法绑定到全局
Vue.prototype.$api = api
Vue.prototype.$axios = axios;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
调用方式
getGame(){//获取游戏
var self=this;
self.$api.ajax({
url:'',//这里是你接口地址后缀
method:'GET',
success(data){
if(data.code==0){
}else{
}
}
})
},
更多推荐
所有评论(0)