对 uniapp 网络请求 uni.request 进行封装

前言

uniapp是一款基于Vue.js框架的跨平台开发工具，可以将代码编译成H5、小程序、App等不同平台的应用。在进行uniapp开发时，网络请求是必不可少的环节。为了方便开发，我们可以封装一些网络请求方法，以便在多个页面中复用，并且可以统一处理错误信息等问题，提高开发效率和代码质量。本文将介绍如何封装网络请求方法。

正文开始

1、封装 uni.request 请求：

在根目录创建 until 目录，在目录下创建 request.js 文件，编写以下代码

// 全局请求封装
const base_url = 'http://localhost:996'
// 需要修改token，和根据实际修改请求头
export default (params) => {
    let url = params.url;
    let method = params.method || "get";
    let data = params.data || {};
​
    let header = {}
    if (method == "post") {
        header = {
            'Content-Type': 'application/json'
        };
    }
    // 获取本地token
    if (uni.getStorageSync("token")) {
        header['Authorization'] = 'Bearer ' + uni.getStorageSync("token");
    }
​
    return new Promise((resolve, reject) => {
        uni.request({
            url: base_url + url,
            method: method,
            header: header,
            data: data,
            success(response) {
                const res = response
                // 根据返回的状态码做出对应的操作
                //获取成功
                console.log(res.statusCode);
                if (res.statusCode == 200) {
                    resolve(res.data);
                } else {
                    uni.clearStorageSync()
                    switch (res.statusCode) {
                        case 401:
                            uni.showModal({
                                title: "提示",
                                content: "请登录",
                                showCancel: false,
                                success(res) {
                                    setTimeout(() => {
                                        uni.navigateTo({
                                            url: "/pages/login/index",
                                        })
                                    }, 1000);
                                },
                            });
                            break;
                        case 404:
                            uni.showToast({
                                title: '请求地址不存在...',
                                duration: 2000,
                            })
                            break;
                        default:
                            uni.showToast({
                                title: '请重试...',
                                duration: 2000,
                            })
                            break;
                    }
                }
            },
            fail(err) {
                console.log(err)
                if (err.errMsg.indexOf('request:fail') !== -1) {
                    wx.showToast({
                        title: '网络异常',
                        icon: "error",
                        duration: 2000
                    })
                } else {
                    wx.showToast({
                        title: '未知异常',
                        duration: 2000
                    })
                }
                reject(err);
​
            },
            complete() {
                // 不管成功还是失败都会执行
                uni.hideLoading();
                uni.hideToast();
            }
        });
    }).catch((e) => {});
};

2、封装对应的 api 文件

在实际项目中，我们也会根据上述请求，封装对应的 api ,所以，我们在根目录下创建 api ,里面放与项目相关的 api

// 引入 request 文件
import request from '@/utils/request'
​
// 以下 api 为博主项目示例，实际与项目相匹配
​
// 分页查询学习列表
export const pageStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo/page',
        method: 'get',
        data: params
    })
}
​
// 查询学习列表
export const listStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo/list',
        method: 'get',
        data: params
    })
}
​
​
// 获取学习列表详细信息
export const studyInfoById= (id) => {
    return request({
        url: '/study/studyInfo/'+id,
        method: 'get',
    })
}
​
// 增加学习列表
export const saveStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo',
        method: 'post',
        data: params
    })
}
​
// 修改学习列表
export const updateStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo',
        method: 'put',
        data: params
    })
}
​
// 删除学习列表
export const deleteStudyInfo = (id) => {
    return request({
        url: '/study/studyInfo/delete?id='+id,
        method: 'delete',
    })
}
​

3、在相关页面使用 封装的 api (以 Vue3 为例)

<script setup>
    // 在页面中导入相关 api 
    import {pageStudyInfo,listStudyInfo} from "@/api/study/info";
​
    // 定义存储请求的结果
    const studyList = ref([]);
​
    // 也买你加载完毕执行
    onMounted(() => {
        // 调用函数
        getStudyList();
    })
    // 封装函数，调用 api
    const getStudyList = async () => {
        let res = await pageStudyInfo(queryParams);
        console.log(res.data.records);
        studyList.value = res.data.records;
    }
</script>

总结

封装请求是指在传输层或应用层对请求数据进行包装，以便在网络中传输和处理。封装请求的好处在于提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。 在封装请求时，需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。 总之，封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求，可以保证数据的安全和可靠性，从而提高应用的性能和用户体验。