基于element-ui,使用到vuex存储loading,除了普通和后台交互,还有上传图片到七牛。
import axios from 'axios'
import { Message,Loading } from 'element-ui';
import store from '../store'
import commonFun from './commonFun'
const ajaxParams = {};//存放noLoading,避免被覆盖
let isQiNiu = false;//isQiNiu可以用全局参数是因为,不会同时存在多个接口进行 又是七牛,又不是七牛的
axios.defaults = Object.assign(axios.defaults, {
baseURL: process.env.VUE_APP_HOST,
// timeout: 20000,
// withCredentials: true,//不能用这个,如果后台的跨域设置是*
/*headers:{//不能写这里,要用拦截器,不然token不会更新
token : localStorage.loginToken
}*/
})
axios.interceptors.request.use(config => {
config.headers.token = localStorage.loginToken;
// 请求默认20s->60s
if(!config.timeout){
config.timeout = 60000;
}
let urlKey = '';
if(config.url == '//up-z2.qiniup.com/'|| config.url == 'http://up-z2.qiniup.com/' || config.url == 'https://up-z2.qiniup.com/'){
isQiNiu = true;
urlKey = config.url;
}else{
isQiNiu = false;
urlKey = commonFun.urlHasHttp(config.url)?config.url:config.baseURL+config.url;
// console.log(urlKey) //没有http(s):只有//,也会带上http(s):
}
ajaxParams[urlKey] = {};
if(!config.noLoading){
ajaxParams[urlKey].noLoading = false;
store.commit('addLoading');
}else{
ajaxParams[urlKey].noLoading = true;
}
store.commit('addAjax');// 只要是请求 就加1
return config;
}, err=> {
console.log(err)
return Promise.reject(null);
})
axios.interceptors.response.use(response => {
if(ajaxParams[response.config.url] && !ajaxParams[response.config.url].noLoading){
store.commit('subLoading');
}
store.commit('subAjax');
let data = response.data
if (data.code === 0 || data.code === '0') {
cb();
return data.data;
}else if(data.code == 10001){
store.commit('setAjaxMsg', '登录过期');
cb();
}else{
if(response.data.key && isQiNiu){
cb();
return data;
}else{
if(store.state.ajaxMsg != '登录过期'){
store.commit('setAjaxMsg', data.message);
}
cb();
return Promise.reject(null);
}
}
}, function (error) {
store.commit('subLoading');// 都有接口报错了 不管之前有没有加1,直接减1;
store.commit('subAjax');
console.log(error, JSON.stringify(error));
if(store.state.ajaxMsg != '登录过期'){
store.commit('setAjaxMsg', '网络异常,请稍后再试');
}
cb();
return Promise.reject(null);
})
function cb(){
if(store.state.ajaxNum <= 0 && store.state.ajaxMsg){
let msg = store.state.ajaxMsg;
store.commit('setAjaxMsg', '');
if(msg != '登录过期'){
Message(msg);
}else{
Message({
message: msg,
duration: 1000,
onClose: function(){
localStorage.loginToken = '';
window.location.href = process.env.VUE_APP_LOGINHOST;
}
})
}
}
}
const ajax = {}
ajax.get = (url, params,myconfig) => {
return axios.get(url, {
params:params,
...myconfig
})
}
ajax.delete = (url, params,myconfig) => {
return axios.delete(url, {
data:params,
...myconfig
})
}
ajax.post = (url, params,myconfig) => {
return axios(url, {
method: 'post',
data: params,
...myconfig
})
}
ajax.put = (url, params,myconfig) => {
return axios(url, {
method: 'put',
data: params,
...myconfig
})
}
ajax.all = axios.all;
ajax.spread = axios.spread;
export default ajax
vuex里面存放的状态:
之所以分成loadingNum和ajaxNum,是因为有的请求可能不加loading
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
loadingNum: 0,
ajaxMsg: '',//多个请求的时候 只弹一个
ajaxNum: 0,
},
mutations: {
addLoading: (state) => state.loadingNum += 1,
subLoading: (state) => state.loadingNum = state.loadingNum > 0?state.loadingNum-1:0,
setAjaxMsg: (state, msg) => state.ajaxMsg = msg,
addAjax: (state) => state.ajaxNum += 1,
subAjax: (state) => state.ajaxNum = state.ajaxNum > 0?state.ajaxNum-1:0,
},
actions: {},
});
下面是使用例子:
this.$ajax.all([
this.$ajax.get('/integral/category'),
this.$ajax.get('/integral/prodhot')
])
.then(this.$ajax.spread(function (res1, res2) {
console.log(res1)
console.log(res2)
}));
假设请求接口,有顺序依赖:
let me = this;
me.$ajax.get('/common/uptoken')
.then(res=>{
console.log(1);
console.log(res);
return me.$ajax.get('/product/jd_product/jd_category')
})
.then(res=>{
console.log(2);
console.log(res);
return me.$ajax.get('/product/jd_product/count',{},{'noLoading':true})
})
.then(res=>{
console.log(3);
console.log(res);
return me.getCategory1();
})
.then(res=>{
console.log(4);
console.log(res);
})
-----
getCategory1(){
return this.$ajax.get('/integral/category')
},
或者使用async/await
async init(){
let res1 = await this.loadVip(),
res2 = await this.getVersion();
if(res1 && res1.list){
this.vipArr = res1.list.map(v=>{
return {
id : v.id+'',
title : '('+v.id+')'+v.title
}
})
}
this.setVersion(res2)
this.loadPage();
},
loadVip(){
return this.$ajax.get('/vip/vip_config',{status: 2,type: 1})
},
getVersion(){
return this.$ajax.get('/common/version',{os:this.formData.os})
},
setVersion(res){
let version_arr = [],version_obj = {};
if(res && res.list){
res.list.forEach((v,i)=>{
version_arr.push({
id: v.code+'',
name: v.name
})
version_obj[v.code+''] = v.name;
})
}
this.version_arr = [...version_arr];
this.version_obj = {...version_obj};
},
上传图片使用,可查看这篇文章https://www.jianshu.com/p/86fc1ab2112d
网友评论