uni-app中封装统一请求函数(转载)
封装统一请求函数有利于项目的维护
整体功能简单实用,但小编遇到一个巨坑,项目中在vue文件使用跳转方法,url参数输入 "/" 后工具提示的路径为 "/pages/login/login",
但是在外部js文件中使用uni跳转的api,快捷提示的路径为 "/pages/login/login.vue" , 这就导致实际使用找不到了,类似的情况要注意一下。
参考如下:在common文件夹下面建立一个util.js,内容如下
import {getHttpUrl} from "common/server.js" const domain = getHttpUrl() + "/api/instructor.php/" const req = function(a){ //console.log(a.url); a = a || {}; var b = { url: domain + (a.url || ""), method: a.method || "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, toLogin:a.toLogin || "no" }; if(a.loading){ uni.showLoading({ title:a.loadingTitle || "加载中", mask: a.loadingMask || true }) } uni.request({ url:b.url, method:b.method, data:b.data, header:b.header, dataType:b.dataType, timeout:b.timeout, success:function(res){ if(res.statusCode != 200){ uni.showModal({ title:"提示", content:"服务器繁忙,请稍后再试", confirmColor:"#009714", showCancel:false }) return; } //console.log(res); if(res.data.code == 0){ //console.log(res.data); if(b.success){ b.success(res) } }else{ if(res.data.code == "-1" && res.data.msg == "未登录"){ if(b.toLogin == "yes"){ setTimeout(function(){ uni.redirectTo({ url:"/pages/login/login" }) },1000) }else{ try{ uni.removeStorageSync("userInfo"); }catch(e){ //TODO handle the exception } uni.showModal({ title:"提示", content:"您未登录,请登录后再试", showCancel:false, confirmText:"去登陆", confirmColor:"#FF0000", success(e) { if(e.confirm){ uni.redirectTo({ url:"/pages/login/login" }) } } }) } return; } var tipMsg = res.data.msg ? res.data.msg : "暂无数据"; setTimeout(function(){ uni.showToast({ title:tipMsg, icon:"none", mask:true, duration:1500 }) },200) } },fail:function(err){ if(b.fail){ b.fail(err); }else{ uni.showModal({ title:"提示", content:"服务器繁忙,请稍后再试", confirmColor:"#009714", showCancel:false }) } },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;
赞 (0)