Encapsulating unified request function in uni app (Reprint)

Time:2021-3-3

Encapsulating the unified request function is beneficial to project maintenance

The overall function is simple and practical, but Xiaobian encountered a huge pit. In the project, the jump method is used in the Vue file. After entering the URL parameter ‘/’, the path of the tool prompt is’ / pages / login / Login ‘,

However, the API of uni jump is used in the external JS file, and the shortcut path is “/ pages / login”/ login.vue “, which leads to the actual use can not be found, similar situation should be noted.

 

The reference is as follows: create a util.js The content is as follows

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  ||"Loading",
            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: "prompt",
                    Content: "the server is busy, please try again later.",
                    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  =="Not logged in"){
                    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: "prompt",
                            Content: "you are not logged in, please log in and try again.",
                            showCancel:false,
                            Confirmtext: "go to login",
                            confirmColor:"#FF0000",
                            success(e) {
                                if(e.confirm){
                                    uni.redirectTo({
                                        url:"/pages/login/login"
                                    })
                                }
                            }
                        })
                    }
                    return;
                }
                var tipMsg =  res.data.msg  ?  res.data.msg  : no data at present;
                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: "prompt",
                    Content: "the server is busy, please try again later.",
                    confirmColor:"#009714",
                    showCancel:false
                })
            }
        },complete:function(com){
            //Turn off load prompt
            if(a.loading){
                uni.hideLoading();
            }
            
            if(b.complete){
                b.complete(com);
            }
        }
        
    })
}

module.exports = {
    req:req
}

  

usage method:

1. In the Vue page to be used

2. Register to global Vue method

 

import util from 'common/util.js'

//Unified interface request function
Vue.prototype.req = util.req;

  

Recommended Today

Use of Android WebView (super detailed usage)

1.1 overview of WebView Android WebView is a special view on the Android platform. It can be used to display web pages. This WebView class can be used to display only one online web page in the app. Of course, it can also be used to develop browsers. The internal implementation of WebView uses WebKit […]