封装统一请求函数有利于项目的维护
整体功能简单实用,但小编遇到一个巨坑,项目中在vue文件使用跳转方法,url参数输入 "/" 后工具提示的路径为 "/pages/login/login",
但是在外部js文件中使用uni跳转的api,快捷提示的路径为 "/pages/login/login.vue" , 这就导致实际使用找不到了,类似的情况要注意一下。
参考如下:在common文件夹下面建立一个util.js,内容如下
const domain = "接口请求域名"
const req = function(a){
console.log(a.url);
a = a || {};
var b = {
url: domain + (a.url || ""),
type: a.type || "POST",
dataType: a.dataType || "json",
header: a.header || {},
data: a.data || {},
timeout: a.timeout || 30000,
success: a.success || undefined,
fail: a.fail || undefined,
complete: a.complete || undefined
};
if(a.loading){
uni.showLoading({
title:a.loadingTitle || "加载中",
mask: a.loadingMask || true
})
}
uni.request({
url:b.url,
type:b.type,
data:b.data,
header:b.header,
dataType:b.dataType,
timeout:b.timeout,
success:function(res){
if(res.data.code == 0){
if(b.success){
b.success(res)
}
}else{
if(res.data.code == "-1" && res.data.msg == "未登录"){
console.log("未登录");
setTimeout(function(){
uni.redirectTo({
url:"/pages/login/login"
})
},1000)
}
uni.showToast({
title:res.data.msg,
icon:"none",
mask:true,
duration:1500
})
}
},fail:function(err){
if(b.fail){
b.fail(err);
}else{
uni.showToast({
title:"服务器繁忙",
icon:"none",
mask:true,
duration:1500
})
}
},complete:function(com){
//关闭加载提示
if(a.loading){
uni.hideLoading();
}
if(b.complete){
b.complete(com);
}
}
})
}
module.exports = {
req:req
}
使用方法:
1、在要使用的vue页面中引入
2、注册到全局vue方法
import util from 'common/util.js'
//统一接口请求函数
Vue.prototype.req = util.req;