uni-app x封装request，统一API接口请求

一、概述

uni-app x 提供了 uni.request() 方法。

1. uni.request({
2.   url: 'https://api.example.com',
3.   method: 'GET'
4. })

复制代码

在实际项目开发中，直接使用 uni.request 会带来诸多问题，例如：

• 重复代码多（如每次都要写 baseURL）
  
• 错误处理分散，难以统一管理
  
• 缺乏请求/响应拦截能力
  
• Token 注入繁琐
  
• Loading 状态管理混乱
  

为了解决这些问题，封装一个统一的 HTTP 请求库是企业级开发的最佳实践。
二、封装request

uview-plus 自带一个 http 模块，但是在实际项目中，还是要自己封装一个，统一管理。
 
在项目根目录创建utils目录，在里面创建request.ts。 注意：文件后缀必须是ts，而不是js
[code]// utils/request.tsimport { http } from 'uview-plus'/* 1. 全局配置 */http.setConfig((config) => {    config.baseURL = 'https://api.example.com'  // api地址    config.timeout = 8000  // 单位毫秒，对应8秒    config.loadingText = '加载中...'    config.loading = true          // 开启 loading 动画    return config})/* 2. 请求拦截 */http.interceptors.request.use((config) => {    const token = uni.getStorageSync('token')    if (token) config.header.Authorization = `Bearer ${token}`    return config})/* 3. 响应拦截 */http.interceptors.response.use(    (response) => response.data,    (err) => {        //
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！