uni-app中封装统一请求函数（转载）
发布于2021-03-10 18:28 阅读(1585) 评论(0) 点赞(10) 收藏(5)
封装统一请求函数有利于项目的维护
整体功能简单实用，但小编遇到一个巨坑，项目中在vue文件使用跳转方法，url参数输入 "/" 后工具提示的路径为 "/pages/login/login",
但是在外部js文件中使用uni跳转的api，快捷提示的路径为 "/pages/login/login.vue" ， 这就导致实际使用找不到了，类似的情况要注意一下。
参考如下：在common文件夹下面建立一个util.js，内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 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方法
1 2 3 4 | import util from 'common/util.js'//统一接口请求函数Vue.prototype.req = util.req; |
所属网站分类: 技术文章 > 博客
作者：大哥你来啦
链接：http://www.qianduanheidong.com/blog/article/34274/ee1d88cbc12adc6ac3c8/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力