uni-封装统一请求函数

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

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

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

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

const domain = "接口请求域名"

const req = function(a){
    console.log(a.url);
    a = a || {};
    var b = {
        url:  domain + (a.url || ""),
        type: a.type || "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
    };
    
    if(a.loading){
        uni.showLoading({
            title:a.loadingTitle || "加载中",
            mask: a.loadingMask || true
        })
    }
    
    uni.request({
        url:b.url,
        type:b.type,
        data:b.data,
        header:b.header,
        dataType:b.dataType,
        timeout:b.timeout,
        success:function(res){
            if(res.data.code == 0){
                if(b.success){
                    b.success(res)
                }
            }else{
                if(res.data.code == "-1" && res.data.msg == "未登录"){
                    console.log("未登录");
                    setTimeout(function(){
                        uni.redirectTo({
                            url:"/pages/login/login"
                        })
                    },1000)
                }
                uni.showToast({
                    title:res.data.msg,
                    icon:"none",
                    mask:true,
                    duration:1500
                })
            }
        },fail:function(err){
            if(b.fail){
                b.fail(err);
            }else{
                uni.showToast({
                    title:"服务器繁忙",
                    icon:"none",
                    mask:true,
                    duration:1500
                })
            }
        },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;

猜你喜欢

转载自www.cnblogs.com/nanyang520/p/12294967.html