经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
uni-app中封装统一请求函数(转载)
来源:cnblogs  作者:子钦加油  时间:2021/3/1 9:12:44  对本文有异议

封装统一请求函数有利于项目的维护

整体功能简单实用,但小编遇到一个巨坑,项目中在vue文件使用跳转方法,url参数输入 "/" 后工具提示的路径为 "/pages/login/login",

但是在外部js文件中使用uni跳转的api,快捷提示的路径为 "/pages/login/login.vue" , 这就导致实际使用找不到了,类似的情况要注意一下。

 

参考如下:在common文件夹下面建立一个util.js,内容如下

  1. import {getHttpUrl} from "common/server.js"
  2.  
  3. const domain = getHttpUrl() + "/api/instructor.php/"
  4.  
  5. const req = function(a){
  6. //console.log(a.url);
  7. a = a || {};
  8. var b = {
  9. url: domain + (a.url || ""),
  10. method: a.method || "POST",
  11. dataType: a.dataType || "json",
  12. header: a.header || {},
  13. data: a.data || {},
  14. timeout: a.timeout || 30000,
  15. success: a.success || undefined,
  16. fail: a.fail || undefined,
  17. complete: a.complete || undefined,
  18. toLogin:a.toLogin || "no"
  19. };
  20. if(a.loading){
  21. uni.showLoading({
  22. title:a.loadingTitle || "加载中",
  23. mask: a.loadingMask || true
  24. })
  25. }
  26. uni.request({
  27. url:b.url,
  28. method:b.method,
  29. data:b.data,
  30. header:b.header,
  31. dataType:b.dataType,
  32. timeout:b.timeout,
  33. success:function(res){
  34. if(res.statusCode != 200){
  35. uni.showModal({
  36. title:"提示",
  37. content:"服务器繁忙,请稍后再试",
  38. confirmColor:"#009714",
  39. showCancel:false
  40. })
  41. return;
  42. }
  43. //console.log(res);
  44. if(res.data.code == 0){
  45. //console.log(res.data);
  46. if(b.success){
  47. b.success(res)
  48. }
  49. }else{
  50. if(res.data.code == "-1" && res.data.msg == "未登录"){
  51. if(b.toLogin == "yes"){
  52. setTimeout(function(){
  53. uni.redirectTo({
  54. url:"/pages/login/login"
  55. })
  56. },1000)
  57. }else{
  58. try{
  59. uni.removeStorageSync("userInfo");
  60. }catch(e){
  61. //TODO handle the exception
  62. }
  63. uni.showModal({
  64. title:"提示",
  65. content:"您未登录,请登录后再试",
  66. showCancel:false,
  67. confirmText:"去登陆",
  68. confirmColor:"#FF0000",
  69. success(e) {
  70. if(e.confirm){
  71. uni.redirectTo({
  72. url:"/pages/login/login"
  73. })
  74. }
  75. }
  76. })
  77. }
  78. return;
  79. }
  80. var tipMsg = res.data.msg ? res.data.msg : "暂无数据";
  81. setTimeout(function(){
  82. uni.showToast({
  83. title:tipMsg,
  84. icon:"none",
  85. mask:true,
  86. duration:1500
  87. })
  88. },200)
  89. }
  90. },fail:function(err){
  91. if(b.fail){
  92. b.fail(err);
  93. }else{
  94. uni.showModal({
  95. title:"提示",
  96. content:"服务器繁忙,请稍后再试",
  97. confirmColor:"#009714",
  98. showCancel:false
  99. })
  100. }
  101. },complete:function(com){
  102. //关闭加载提示
  103. if(a.loading){
  104. uni.hideLoading();
  105. }
  106. if(b.complete){
  107. b.complete(com);
  108. }
  109. }
  110. })
  111. }
  112.  
  113. module.exports = {
  114. req:req
  115. }

  

使用方法:

1、在要使用的vue页面中引入

2、注册到全局vue方法

 

  1. import util from 'common/util.js'
  2.  
  3. //统一接口请求函数
  4. Vue.prototype.req = util.req;

  

原文链接:http://www.cnblogs.com/zmdComeOn/p/14454483.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号