axios與vue的配合使用案例，實現緩衝和重複載入的控制

標籤：als   false   div   console   資料   gif   efault   好用   add   

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格式。

===結論:

代碼實踐過，覺得挺好用，分享出來，大家參考參考，具體需要自己改進下才能適合你的項目。

axios與vue的配合使用案例，實現緩衝和重複載入的控制