本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(7)

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

发布于2021-03-10 18:28     阅读(1720)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)