您现在的位置是：首页 > 用Promise封装UniApp的request请求

刚刚发现官方现在已经自己支持了，可以直接用不用像下面这样封装了，不过封装也不影响。

在/libs/util.js里封装request方法如下：

注意下面示例代码使用jwt生成的token作为登录凭证

let util = {};

//  获取用户登录凭证token
util.getToken = function () {
    return uni.getStorageSync('token')
};

// request
util.request = function ({
    method = "GET",
    url,
    data,
    success,
    fail,
    complete
}) {
    // 请求
    if (0 != url.indexOf("http")) {
        url = util.baseUrl() + url
    }
    var header = {
        'content-type': 'application/json',
        'Authorization': util.getToken()
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            method: method,
            data: data,
            header: header,
            dataType: 'json',
            success: success,
            fail: (res) => {
                let ret = new Object()
                ret.code = 0
                // ret.msg = res.errMsg
                ret.msg = '接口或网络异常'
                reject(ret)
            },
            complete: (res) => {
                if (res.statusCode === 200) { //成功
                    if (res.data.data) {
                        if (res.data.code== -1) {
                            alert('请先登录系统')
                        }
                    }
                    resolve(res.data)
                } else {
                    let ret = new Object()
                    ret.code = 0
                    ret.msg = res.errMsg
                    reject(ret)
                }
            }
        })
    });
};

export default util;

在main.js中引入util这样就不需要在每个页面都引入util了：

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store

// 这里全局引入util工具
import util from './libs/util';
Vue.prototype.util = util

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()
export default app

来看一个封装前调用request有4层嵌套的示例:

async onShow() {
    this.util.request({
        url: '/api1',
        data: {
            id: id
        },
        success: res => {
            if (res.data.status === 1) {
                until.ly_request({
                    url: '/api2',
                    data: {
                        id: id
                    },
                    success: res => {
                        if (res.data.status === 1) {
                            until.ly_request({
                                url: '/api3',
                                data: {
                                    id: id
                                },
                                success: res => {
                                    if (res.data.status === 1) {
                                        until.ly_request({
                                            url: '/api4',
                                            data: {
                                                id: id
                                            },
                                            success: res => {
                                                if (res.data.status === 1) {
                                                    /api1
                                                } else if (res.data.status === 0) {
                                                    console.log(res.data.info)
                                                    uni.showToast({
                                                        title: '请选择学校',
                                                        icon: 'none',
                                                        duration: 1500
                                                    });
                                                }
                                            }
                                        })
                                    } else if (res.data.status === 0) {
                                        console.log(res.data.info)
                                        uni.showToast({
                                            title: '请选择学校',
                                            icon: 'none',
                                            duration: 1500
                                        });
                                    }
                                }
                            })
                        } else if (res.data.status === 0) {
                            console.log(res.data.info)
                            uni.showToast({
                                title: '提示',
                                icon: 'none',
                                duration: 1500
                            });
                        }
                    }
                })
            } else if (res.data.status === 0) {
                uni.showToast({
                    title: '提示',
                    icon: 'none',
                    duration: 1500
                });
            }
        }
    })
}

封装request后完成同样的功能代码示例：

async onShow() {
    let res = await this.util.request({
        url: '/api1',
        method: 'get',
        data: {
            id: id
        }
    });
    if (res.data.status != 1) {
        uni.showToast({
            title: '提示',
            icon: 'none',
            duration: 1500
        });
    }

    let res2 = await this.util.request({
        url: '/api2',
        method: 'get',
        data: {
            id: id
        }
    });
    if (res2.data.status != 1) {
        uni.showToast({
            title: '提示',
            icon: 'none',
            duration: 1500
        });
    }

    let res3 = await this.util.request({
        url: '/api3',
        method: 'get',
        data: {
            id: id
        }
    });
    if (res2.data.status != 1) {
        uni.showToast({
            title: '提示',
            icon: 'none',
            duration: 1500
        });
    }

    let res4 = await this.util.request({
        url: '/api4',
        method: 'get',
        data: {
            id: id
        }
    });
    if (res2.data.status != 1) {
        uni.showToast({
            title: '提示',
            icon: 'none',
            duration: 1500
        });
    }
}