当前位置:   article > 正文

uni-app中封装统一请求函数(转载)

统一接口请求函数怎么写

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

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

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

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

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

使用方法:

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

2、注册到全局vue方法

  1. import util from 'common/util.js'
  2. //统一接口请求函数
  3. Vue.prototype.req = util.req;
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/231266
推荐阅读