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格式。
===结论:
代码实践过，觉得挺好用，分享出来，大家参考参考，具体需要自己改进下才能适合你的项目。