4，发起请求演变过程，uni.showToast

admin

https://uniapp.dcloud.net.cn/api/request/request.html
第一步：

// 生命周期 钩子函数，打开页面启动
        onLoad(() => {
                uni.request({
                    url: 'http://localhost:9999/base/sex',
                    data: {
                        text: 'uni.request'
                    },
                    header: {
                        'custom-header': 'hello' //自定义请求头信息
                    },
                    success: (res) => {
                        console.log(res.data);
                        this.text = 'request success';
                    }
                });
        })
复制代码

演变成：

// 生命周期 钩子函数，打开页面启动
        onLoad(() => {
                uni.request({
                    url: 'http://localhost:9999/base/sex',
                    success: (res) => {
                        console.log(res.data);
                    }
                });
        })
复制代码

再演变：

// 加载性别数据
        const sexs = ref([])
        onLoad(() => {
                uni.request({
                        url: 'http://localhost:9999/base/sex',
                        success: (res) => {
                                console.log(res.data);
                                sexs.value = res.data.data.map(item => {
                                        return {
                                                text: item.paramName,
                                                value: item.paramValue
                                        }
                                });
                        }
                });
        })
复制代码

新建request.js文件：

const request = () => {
        uni.request({
                url: 'http://localhost:9999/base/sex',
                success: (res) => {
                        console.log(res.data);
                        sexs.value = res.data.data.map(item => {
                                return {
                                        text: item.paramName,
                                        value: item.paramValue
                                }
                        });
                }
        });
}

export default request;
复制代码

去除业务层代码改造如下：

const request = (option) => {
        uni.request({
                url: 'http://localhost:9999/base/sex',
                success: (res) => {
                        console.log(res.data);
                }
        });
}

export default request;
复制代码

地址变量改造：

const apiBaseUrl ="http://localhost:9999"
const request = (option) => {
        uni.request({
                url: apiBaseUrl + option.url,
                success: (res) => {
                        console.log(res.data);
                }
        });
}

export default request;
复制代码

传值处理：

const apiBaseUrl = "http://localhost:9999"
const request = (option) => {
        uni.request({
                url: apiBaseUrl + option.url,
                data: option.data || {},
                header: option.header || {},
                method: option.method || 'GET',
                success: (res) => {
                        console.log(res.data);
                }
        });
}

export default request;
复制代码

uni.showToast
https://uniapp.dcloud.net.cn/api/ui/prompt.html
整理成功失败返回：

import {
        resolve
} from "dns";

const apiBaseUrl = "http://localhost:9999"
const request = (option) => {
        // return 返回值,成功resolve reject
        return new Promise((resolve, reject) => {
                uni.request({
                        url: apiBaseUrl + option.url,
                        data: option.data || {},
                        header: option.header || {},
                        method: option.method || 'GET',
                        success: (res) => {
                                // 根据后端code判断是否成功
                                if (res.data.code == 20000) {
                                        // 通过resolve数据带出去
                                        resolve(res.data)
                                } else {
                                        console.log("-----> 操作失败：", res.data);
                                        // 定义错误信息，后端传值 res.data.message，如果没值显示 "未知错误"
                                        let errInfo = res.data?.message || '未知错误'
                                        uni.showToast({
                                                icon: 'none',
                                                title: errInfo,
                                                duration: 3000 // 显示时常
                                        })
                                        // 休眠三秒后执行
                                        setTimeout(function() {
                                                if (res.data.code == 20003) {
                                                        uni.reLaunch({
                                                                url: '/pages/login'
                                                        })
                                                }
                                                // 错误的抛出去
                                                reject(new Error(res.statusCode))
                                        }, 3000);
                                }
                        },
                        fail: (err) => {
                                let errorInfo = '';
                                if (err.errMsg.includes('timeout')) {
                                        errorInfo = '请求超时，请稍后重试'
                                } else if (err.errMsg.includes('abort')) {
                                        errorInfo = '请求数据错误，请稍后重试'
                                } else {
                                        errorInfo = '网络请求错误'
                                }
                                uni.showToast({
                                        title: errorInfo,
                                        duration: 5000,
                                        icon: "none"
                                });
                                reject(new Error(errorInfo))
                        }
                });
        });
}

export default request;
复制代码

注册页面调用：

        // 调用request 后面.then表示成功回调
        import request from '@/utils/request.js'
        onLoad(() => {
                request({
                        url: '/base/sex',
                }).then(res => {
                        sexs.value = res.data.data.map(item => {
                                return {
                                        text: item.paramName,
                                        value: item.paramValue
                                }
                        });

                })
        })
复制代码

新增config/config.js

const config = {
        apiBaseUrl: "http://localhost:9999"
}
export default config;
复制代码

改造后：

import config from '@/config/config.js'
// 老的代码
// const apiBaseUrl = "http://localhost:9999"
const request = (option) => {
        // return 返回值,成功resolve reject
        return new Promise((resolve, reject) => {
                uni.request({
                        url: config.apiBaseUrl + option.url,
                        data: option.data || {},
                        header: option.header || {},
                        method: option.method || 'GET',
                        success: (res) => {
                                // 根据后端code判断是否成功
                                if (res.data.code == 20000) {
                                        // 通过resolve数据带出去
                                        resolve(res.data)
                                } else {
                                        console.log("-----> 操作失败：", res.data);
                                        // 定义错误信息，后端传值 res.data.message，如果没值显示 "未知错误"
                                        let errInfo = res.data?.message || '未知错误'
                                        uni.showToast({
                                                icon: 'none',
                                                title: errInfo,
                                                duration: 3000 // 显示时常
                                        })
                                        // 休眠三秒后执行
                                        setTimeout(function() {
                                                if (res.data.code == 20003) {
                                                        uni.reLaunch({
                                                                url: '/pages/login'
                                                        })
                                                }
                                                // 错误的抛出去
                                                reject(new Error(res.statusCode))
                                        }, 3000);
                                }
                        },
                        fail: (err) => {
                                let errorInfo = '';
                                if (err.errMsg.includes('timeout')) {
                                        errorInfo = '请求超时，请稍后重试'
                                } else if (err.errMsg.includes('abort')) {
                                        errorInfo = '请求数据错误，请稍后重试'
                                } else {
                                        errorInfo = '网络请求错误'
                                }
                                uni.showToast({
                                        title: errorInfo,
                                        duration: 5000,
                                        icon: "none"
                                });
                                reject(new Error(errorInfo))
                        }
                });
        });
}

export default request;
复制代码

增加api/base.js

import request from '@/utils/request.js'

export default{
        getParamListByBaseName(baseName){
                return request({
                        url: `/base/${baseName}`
                })
        }
}
复制代码

改造后：

// 调用api接口
        import baseApi from '@/api/base.js'
        onLoad(() => {
                baseApi.getParamListByBaseName('sex').then(res => {
                        console.log('baseApi 请求。。。。。。。', res);
                        sexs.value = res.data.map(item => {
                                return {
                                        text: item.paramName,
                                        value: item.paramValue
                                }
                        });
                })
        })
复制代码