uniapp封裝requst，以及請求，響應攔截

 

 

很優雅的封裝調用

https://blog.csdn.net/qq_42618566/article/details/109308690

 

一般的封裝調用

https://blog.csdn.net/weixin_45532734/article/details/105137010

 

可以理解一下

https://www.jianshu.com/p/e2f22dc96039

 

 

優雅的封裝調用

目錄

 

request.js

封裝了2個request

// 全局請求封裝
const token = uni.getStorageSync('token');
const baseUrl = 'http://api.hanyuananiu.com/api/' 
const shopUrl = 'http://mall.hanyuananiu.com/api/' 
// const token = 'alan11111233333333444444';
// import service from "./service.js";  // 請求字典
// 基本請求
export const baseRequest = (url, method, params) => {
    /*以下是請求攔截區*/
    uni.showLoading({
        title: "加載中"
    });
    // const api = service.filter(item => {
    //     return item.url === url; // 匹配serviceId對應的接口
    // });
    /*以上是請求攔截區*/
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseUrl + url,
            method: method,
            header: {
                // token: token
            },
            data: {
                // serviceId: api[0].serviceId,
                ...params
            },
            /*以下是響應成功攔截區*/
            success(res) {
                resolve(res.data);
            },
            /*以上是響應成功攔截區*/
            /*以下是響應失敗攔截區*/
            fail(err) {
                reject(err);
            },
            /*以上是響應失敗攔截區*/
            /*以下是響應結果攔截區,不管成功失敗*/
            complete() {
                uni.hideLoading();
            }
            /*以上是響應結果攔截區,不管成功失敗*/
        });
    });
};
// 商場請求
export const shopRequest = (url, method, params) => {
    uni.showLoading({
        title: "加載中"
    });
    return new Promise((resolve, reject) => {
        wx.request({
            url: shopUrl + url,
            method: method,
            header: {
                // token: token
            },
            data: {
                // serviceId: api[0].serviceId,
                ...params
            },
            success(res) {
                resolve(res.data);
            },
            fail(err) {
                reject(err);
            },
            complete() {
                uni.hideLoading();
            }
        });
    });
};

// export default {baseRequest,shopRequest}

 

api.js

import {baseRequest,shopRequest} from "./request.js"

// const token = uni.getStorageSync('token');

export default {
    // 獲取驗證碼
    getYZM(params){
        return baseRequest("Login/GetPhoneOrEmailCheckCode", "GET", params)
    },
    // 密碼登錄
    postUser(params) {
        return baseRequest("Login/GetUser", "POST", params)
    },
    // 獲取商城驗證碼
    getShopYZM(params){
        return shopRequest("Login/GetPhoneOrEmailCheckCode", "GET", params)
    }
}

 

 

頁面調用

import api from '../../util/api.js'
    export default{
        data(){
            return {
                text: 'uni-app',
                list:[1,2,3,4,5],
                tel:[phone],
                telYZM:'',
                telContent:'',
                shopYZM:'',
                shopContent:''
            }
        },
        mounted(){
            // this.$api.msg('去注冊')
            // this.$myRequest('12345')
        },
        methods:{
            // 獲取驗證碼
            getYZM(){
               api.getYZM({"contact": this.tel})
                    .then(res => {
                        if(res.Ret==200){
                            // 打印調用成功回調
                            this.telYZM = res.InfoMsg
                            console.log(res)
                        }
                        else{
                            this.$msg(res.Msg)
                        }    
                       })
            },
            // 密碼登錄
            postLogin(){
                api.postUser({"UserName": this.tel,
                                     "Code": this.telYZM})
                    .then(res => {
                        if(res.Ret==200){
                            // 打印調用成功回調
                            this.telContent = res.Data
                            console.log(res)
                        }
                        else{
                            this.$msg(res.Msg)
                        }    
                    })
            },
            // 商城驗證碼
            getShopYZM(){
                api.getShopYZM({"contact": this.tel})
                    .then(res => {
                        if(res.Ret==200){
                            // 打印調用成功回調
                            this.shopYZM = res.InfoMsg
                            console.log(res)
                        }
                        else{
                            this.$msg(res.Msg)
                        }    
                    })
            },
        }
    }