umi4 request封装

### 封装 Request 请求 在 Umi 4 中封装 `umi-request` 可以为应用程序提供更简洁和一致的 API 调用方式。这不仅提高了代码可读性和维护性，还允许开发者集中处理错误、拦截器和其他通用逻辑。 #### 创建自定义请求函数 为了创建一个易于使用的请求方法，可以先安装 `umi-request`： ```bash npm install umi-request --save ``` 接着，在项目的合适位置（比如 `/utils/request.js`），编写如下代码来初始化并扩展默认设置： ```javascript import request from 'umi-request'; import { message } from 'antd'; // 定义全局配置项 const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', // 更多状态码... }; // 设置公共参数 request.interceptors.request.use((url, options) => { const headers = {}; if (localStorage.getItem('token')) { headers.Authorization = localStorage.getItem('token'); } return ({ url, options: { ...options, interceptors: true, credentials: 'include', headers }, }); }); // 错误响应处理器 request.interceptors.response.use(async response => { try { let result; if (!response.ok) throw new Error(); result = await response.clone().json(); if(result.code !== 200){ message.error(codeMessage[result.status] || "未知错误"); Promise.reject(result); } return result.data; } catch (_) { message.error(`网络异常`); return Promise.reject(response.statusText); } }); ``` 此部分实现了基本的身份验证头添加以及统一的状态码处理机制[^1]。 #### 使用 AbortController 实现请求取消 对于长时间运行的操作或是当页面导航变化时可能不再需要的结果，应该考虑支持请求中断的功能。借助于 JavaScript 的内置对象 `AbortController` 和其信号属性 `signal` 来完成这一目标[^2]。 下面展示了一个简单的例子说明如何利用它来进行条件性的请求终止操作: ```javascript function fetchWithTimeout(url, timeout=5000) { const controller = new AbortController(); const id = setTimeout(() => controller.abort(), timeout); return request.get(url, { signal: controller.signal }) .finally(() => clearTimeout(id)); } ``` 这段代码展示了带有超时控制的 GET 请求实现，超过指定时间未收到回复则自动放弃等待。 #### 配置不同环境下的基础 URL 考虑到开发阶段与线上部署之间的差异，通常还需要根据不同模式设定不同的服务端地址。可以在项目根目录下建立 `.env.development.local`,`.env.production.local` 文件分别保存各自对应的 API 地址前缀[^3]。 例如，在 `.env.development.local` 中加入： ``` REACT_APP_API_URL=http://localhost:8000/api/ ``` 而在生产环境下，则可能是这样的形式存在于 `.env.production.local` : ``` REACT_APP_API_URL=https://api.example.com/v1/ ``` 最后调整前面提到过的 `request.js` 文件中的 baseURL 参数指向上述变量即可。