封装前的准备先在项目目录上右键 - 新建目录request用于存放封装的API请求文件并至少创建两个js文件index.js用于封装get、post请求接收参数并返回数据api.js用于封装后台接口便于页面调用和后期维护可以是多个看自己的模块化分接下来直接上干货不啰嗦1. index.js封装get、post请求接收参数并返回数据// 全局请求封装 const base_url http://localhost:996 // 请求超出时间 const timeout 5000 // 需要修改token和根据实际修改请求头 const request (params) { let url params.url; let method params.method || get; let data params.data || {}; let header { Blade-Auth: uni.getStorageSync(token) || , Content-Type: application/json;charsetUTF-8, Authorization: Basic c2FiZXI6c2FiZXJfc2VjcmV0, Tenant-Id: uni.getStorageSync(tenantId) || xxx, // avue配置相关 ...params.header } if (method post) { header { Content-Type: multipart/form-data // 自定义跟后台约定好传什么格式的 }; } return new Promise((resolve, reject) { uni.request({ url: base_url url, method: method, header: header, data: data, timeout, 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() { 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) { uni.showToast({ title: 网络异常, icon: error, duration: 2000 }) } else { uni.showToast({ title: 未知异常, duration: 2000 }) } reject(err); }, complete() { // 不管成功还是失败都会执行 uni.hideLoading(); uni.hideToast(); } }); }).catch(() {}); }; export default request;2. api.js 封装后台接口便于页面调用和后期维护// 引入 request 文件 import request from ./index.js // 分页查询学习列表 export const pageStudyInfo (params) { return request({ url: /study/studyInfo/page, method: get, data: params, header: {} // 自定义 }) } // 获取学习列表详细信息 export const studyInfoById (id) { return request({ url: /study/studyInfo/${id}, method: get, }) }3.页面调用import { pageStudyInfo } from /request/api.js // 获取学习列表详情信息 pageStudyInfo (data).then((res) { console.log(成功, res); }).catch((err) { console.error(失败, err); });