UniApp 统一的接口 myRequest 用于进行 HTTP 请求

本人小白做过:H5 小程序 ,都是用的着一套myRequest  的封装方式,我个人感觉很好用.

但是,如果后端的请求携带方式如果是 FormData() 的可能改起来比较麻烦,但是对于日常来说我感觉已经足够了,咱们话不多说,直接上代码!

详细代码如下:

// 后台服务器地址 判断是开发环境还是正式环境
export const DOMAIN_URL = process.env.NODE_ENV === 'development' ? 'http://172.16.101.182:8003' :
    'http://h5.myjd.lanjing/prod-api'; // 换为你这边的正式的开发地址

// 基础地址，使用后台服务器地址
export const BASE_URL = DOMAIN_URL;

// 自定义请求函数 myRequest
export const myRequest = (option) => {
    // console.log(option);
    return new Promise((resolve, reject) => {
        // 在页面上显示加载中
        uni.showLoading({
            title: '加载中',
            mask: true,
        });

        // 构建完整的请求地址
        let url = BASE_URL + option.url;

        // 检查是否有参数，如果有，添加查询字符串
        if (Object.keys(option.params || {}).length > 0) {
            const queryString = Object.entries(option.params).map(([key, value]) =>
                `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&");
            url += (url.includes('?') ? '&' : '?') + queryString;
        }

        // 发起uni.request请求
        uni.request({
            timeout: 3000,
            url: url,
            method: option.method || "GET",
            header: {
                // 设置请求头信息
                "token": uni.getStorageSync("token"),
                'Authorization': "Bearer " + uni.getStorageSync("token"),
            },
            data: option.data,
            success: (res) => {
                // console.log(res.data);
                // 隐藏加载中
                uni.hideLoading();
                // 停止下拉刷新
                uni.stopPullDownRefresh();

                // 处理请求成功的情况
                if (res.data.code == 401) {
                    // 处理特定的返回码
                }
                if (res.data.code == 200) {
                    resolve(res.data);
                }
                if (res.data.code == 500) {
                    const token = uni.getStorageSync("token");
                    console.log(Boolean(token));
                    if (Boolean(token)) {
                        // 处理特定的返回码
                    } else {
                        // 在500错误的情况下跳转到登录页
                        setTimeout(() => {
                            uni.switchTab({
                                url: "/pages/login/login"
                            });
                        }, 500);
                    }
                }
                if (res.data.code == 1020) {
                    // 在1020错误的情况下提示重新登录
                    uni.$u.toast('请重新登录');

                    // 刷新当前页面或跳转到登录页
                    uni.removeStorageSync('token');
                    uni.removeStorageSync('userInfo');
                    let pages = getCurrentPages();
                    let page = undefined;
                    if (pages[pages.length - 1].route == "pages/login/login") {
                        if (pages) {
                            page = pages[pages.length - 1];
                            page.onLoad(true);
                            page.onShow(true);
                        }
                    } else {
                        setTimeout(() => {
                            uni.switchTab({
                                url: "pages/login/login"
                            });
                        }, 1500);
                    }
                    return;
                }
                resolve(res.data);
            },
            fail: (err) => {
                // 隐藏加载中
                uni.hideLoading();
                // 在请求失败的情况下弹出提示
                uni.$u.toast('服务器请求失败'); // uview简洁写法，需要提前引入uview组件
                reject(err);
            }
        });
    });
};

下面是接口统一封装的方式:

// 引入封装的请求
import { myRequest } from "@/utils/request.js";
// data 是后端携带参数格式 application/json Json 格式
// params 是后端携带参数格式 x-www-form-urlencoded(默认请求方式) 字符串拼接
// 获取顶部导航列表
export function conferenceServiceListAPI(data) {
  return myRequest({
    url: "/xlkj-psb-web/conferenceService/pageList",
    method: "post",
    data,
  });
}

// 修改手机号
export const update_phoneAPI = (params) => {
  return myRequest({
    url: "/xlkj-psb-web/member/update_phone",
    method: "post",
    params,
  });
};

// 删除按钮
export const jobDeleteAPI = (id) => {
  return myRequest({
    url: `/xlkj-psb-web/job/delete/${id}`,
    method: "post",
  });
};

如有不对的地方,本人虚心请教,我是时长一年半的前端练习生,哈哈哈.