Uview封装请求方法

最近开发了一个UniApp程序，但是在遇到请求方法调用的时候，还是犹豫了，因为之前没有搞过这种，然后自己查了很多资料，发现市面的都不是很一样，经过自己的研究，自己根据官方文档总结了一些通过方法，供大家参考。

1.请求、响应拦截器

新建一个request.js文件用来书写请求、响应拦截器，这样的话就可以根据不同的需求做相应的处理，这么统一处理会方便很多。

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = 'http://127.0.0.1:1111';
        // config.sslVerify = false;
        return config
    })

    // 请求拦截
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
        // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
        config.data = config.data || {}
        // 根据custom参数中配置的是否需要token，添加对应的请求头
        if (config?.custom?.auth) {
            // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
            config.header.token = uni.getStorageSync('token')
        }
        return config
    }, config => { // 可使用async await 做异步操作
        return Promise.reject(config)
    })

    // 响应拦截
    uni.$u.http.interceptors.response.use((response) => {
        console.log(response.data)
        /* 对响应成功做点什么 可使用async await 做异步操作*/
        const res = response.data
        // 自定义参数
        const custom = response.config?.custom
        if (res.code === 999 || res.code === 9999) {
            // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
            if (custom.toast !== false) {
                uni.$u.toast(res.msg)
            }

            // 如果需要catch返回，则进行reject
            if (custom?.catch) {
                return Promise.reject(res)
            } else {
                // 否则返回一个pending中的promise，请求不会进入catch中
                return new Promise(() => {})
            }
        }
        if (res.code === 400) {
            uni.$u.toast(res.msg)
            return Promise.reject(res)
        }
        if (res.code === 401) {
            uni.$u.route('/pages/login/login');
            return Promise.reject(res)
        }
        if (res.code === 403) {
            uni.$u.route({
                url: '/pages/result/nopermission/nopermission',
                params: {
                    text: res.data
                }
            });
            return Promise.reject(res)
        }
        return res.data === undefined ? {} : res.data
    }, (response) => {
        // 对响应错误做点什么 （statusCode !== 200）
        uni.$u.toast('网络波动，请稍后再试')
        return Promise.reject(response)
    })
}

2.封装请求方法

新建一个api.js，我们可以在这里把所有的请求方法都放在这里，这样方法地址或者参数变化的时候，直接在这里修改就可以了，利于维护。

const http = uni.$u.http

// 显示首页顶部banner图
export const getTopBanner = (data) => http.get('/banner/list/topBanner', data)
// 新增商品
export const postGoodAdd = (params, config = {}) => http.post('/good/add', params, config)
// 删除用户
export const deleteUser = (params, config = {}) => http.delete('/user/delete', params, config)

3.请求调用

封装好了请求拦截器和请求方法就可以使用了，先需要在js中引入相应的方法在根据具体的方法做对应的扩展和处理。

import {
        postGoodAdd
} from '../../../config/api.js'

postGoodAdd({
                        goodsName: _this.model.goodsName,
                        category: _this.model.category,
                        unit: _this.model.unit,
                        cost: _this.model.cost,
                        price: _this.model.price,
                        image: _this.model.image,
                        remark: _this.model.remark
}, {
                        custom: {
                            auth: true,
                            catch: false
                        }
}).then(() => {
                        uni.$u.toast('商品上架完成');
                        setTimeout(function() {
                               uni.$u.route('/pages/good/goodlist/goodlist');
                        }, 1000);
})

至此，这个简单的请求方法就算完成了，有需要的可以自取，赶紧去试试吧。