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:18200166593,
                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)
                        }    
                    })
            },
        }
    }