美文网首页
vue之axios封装使用

vue之axios封装使用

作者: 索哥来了 | 来源:发表于2019-11-12 15:23 被阅读0次

基于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

相关文章

网友评论

      本文标题:vue之axios封装使用

      本文链接:https://www.haomeiwen.com/subject/hbqqictx.html