axios与vue的配合使用事例，实现缓存和重复加载的控制

Posted 2020-11-03 jake-前端工程师

import Vue from "vue";
import qs from "qs";
import Store from "../vuex/store.js"
import Router from "../router/index.js"
import isEmpty from "lodash/isEmpty"
import { isUrl } from "./match.js"
import cache from "./cache.js"
import { objToFormData } from "./help.js"

let sucCode = 100000;
let cacheKey = "";
let isLoadingKey = "";

export default function apiLink(config) {
    /*基本配置数据*/
    let routelink = config.routelink; //api地址 need
    let params = config.params; //api参数 need
    let reqName = config.reqName != null ? config.reqName : config.routelink; //请求地址命名
    let callback = config.callback; //成功回调 need
    let error = config.error; //失败回调
    let method = config.method; //请求方法 
    let saved = config.saved; //开启缓存
    let postType = config.postType; //post的数据类型设置
    cacheKey = sucCode + routelink + ‘/‘ + qs.stringify(params);
    isLoadingKey = "loadkey" + reqName;
    return new Promise((resolve, reject) => {
        if (method == ‘post‘) { //post方法
            apiPOST(routelink, postParamsType(params, postType), reqName, callback, error, resolve)
        } else { //get方法
            let savedData = cache.get(cacheKey); //获取缓存数据
            if (saved && !isEmpty(savedData)) { //是否读取缓存数据
                callback(savedData)
            } else {
                apiGET(routelink, params, reqName, callback, error, resolve)
            }
        }
    })
}
/*get方法*/
function apiGET(routelink, params, reqName, callback, error, resolve) {
    if (cache.get(isLoadingKey)) return;
    cache.set(isLoadingKey, true)
    Vue.axios.get(routelink, { params: params, timeout: 6000 }).then((res) => {
        success(routelink, res, reqName, callback, error);
        saveApiData(res); //保存数据
        resolve(res.data)
    }).catch(err => {
        fail(err, reqName, error);
    })
}
/*post方法*/
function apiPOST(routelink, params, reqName, callback, error, resolve) {
    if (cache.get(isLoadingKey)) return;
    cache.set(isLoadingKey, true)
    Vue.axios.post(routelink, params).then((res) => {
        success(routelink, res, reqName, callback, error);
        resolve(res.data)
    }).catch(err => {
        fail(err, reqName, error)
    })
}

/*成功回调*/
function success(routelink, res, reqName, callback, error) {
    cache.set(isLoadingKey, false)
    const api = res.data;
    console.log(api, "API-" + reqName + "" + routelink)
    if (api.code != sucCode) {
        if (api.code == 100002) {
            Store.dispatch("setWordsTipMsg", {
                msg: "请先绑定手机",
                todo: () => {
                    Router.push({ path: ‘/party/g/sendbindsms‘ });
                }
            });
            return;
        }
        if (isUrl(api.data) && api.code != 100015) {
            window.location = api.data;
            return;
        }
        if (error) {
            error(api);
        } else {
　　　　　　　　alert(api.msg)
            //Store.dispatch("setWordsTipMsg", { msg: api.msg });
        }
        return;
    } else {
        callback(api.data);
    }
}
/*失败回调*/
function fail(err, reqName, error) {
    cache.set(isLoadingKey, false)
    if (error) {
        error(err);
    } else {
　　　　　alert(err.msg)
        //Store.dispatch("setWordsTipMsg", { msg: err.msg });
    }
}


function saveApiData(res) { //缓存功能
    if (res.data.code == sucCode) {
        cache.set(cacheKey, res.data.data)
    }
}

function postParamsType(params, postType) { //post 数据类型设置
    if (postType == ‘none‘) {
        return params;
    } else if (postType == ‘formdata‘) {
        return objToFormData({ data: params, arrayKey: false });
    } else {
        return qs.stringify(params, { arrayFormat: ‘brackets‘ });
    }
}

 

 

以上是本人在项目中使用的ajax部分的代码，在vue项目中能有比较好的性能和使用，可以实现缓存和对重复加载的阻止。

 

具体使用方法，大概是就是调用apiLink这个主要方法实现ajax请求，配置参数可以实现想实现和不想实现的功能，比如开启缓存就多加saved参数。

===POST使用事例:

apiLink({
        routelink: utypes.GET_PARTY_SPEAK_ADD, 
        params: { mid: params, content: pubSpeakContent },
        method: ‘post‘,
        callback: (res) => {
            console.log(res)
        }
    })

以上代码就是一个post的使用事例，大家可以参考。

===GET使用事例:

apiLink({
        routelink: utypes.GET_PARTY_MEET_SEARCH,
        params: { mid: params, name: searchConfig.name, content: searchConfig.content },
        callback: (res) => {
            commit(mtypes.SET_PARTY_MEET_SEARCH, res)
        }
    })

以上代码就是一个get的使用事例，大家可以参考。

 

===使用参数说明:

apiLink({
        routelink: /url, //api地址
        params: {}, //参数传递
        saved:true,true代表开启缓存，读取缓存功能，非必传，不传默认不读取缓存
        method:‘post‘,//post或get方法设置，非必传，不传默认get
        postType:‘formdata‘, //非必传，不传默认qs格式化
        callback: (res) => { //回调
            
        },
        error:err=>{} //错误回调，非必传
    })    

 

===对象转formdata格式代码:

 

export function objToFormData(config) { //对象转formdata格式
    let formData = new FormData();
    let obj = config.data;
    let arrayKey = config.arrayKey;
    for (var i in obj) {
        if (isArray(obj[i])) {
            obj[i].map(item => {
                if (!arrayKey) {
                    formData.append(i, item)
                } else {
                    formData.append(i + ‘[]‘, item)
                }
            })
        } else {
            formData.append(i, obj[i])
        }
    }
    return formData;
}

上面这个方法可以方便的实现obj对象转formdata格式。

===结论:

代码实践过，觉得挺好用，分享出来，大家参考参考，具体需要自己改进下才能适合你的项目。