--- theme: v-green --- >微信公众号： **[大前端驿站]**
>关注大前端驿站。问题或建议，欢迎公众号留言。 **这是我参与8月更文挑战的第30天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")** 随着前端技术这几年的井喷式发展，业内的请求库也各式各样，并没有说有一个统一的请求库能够说在用户体量上占据绝对的地位，所以基本换一家公司也就换了一个请求库的使用，这些东西虽然对于我们开发来讲没有什么太多的不便之处，会用就完了，但是如何更方便的应用这些请求库，我给出的方案还是对请求库作二次封装，这样我们在使用时也会相当便利，今天就拿`umi-request`的二次封装来给大家作一个参考关于`umi-request`的基础知识这里不作赘述[umi-request 封装之路](https://juejin.cn/post/6844904185767395335) ##### 在utils目录新建request.js 这里先将`umi-request`异常处理程序、默认参数配置、拦截器等方法都在request.js中定义好参考[umi-request 封装之路](https://juejin.cn/post/6844904185767395335) ``` /** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */ import { extend } from 'umi-request' import router from '@/router' import notification from 'ant-design-vue/es/notification' import config from '@/config/default.config.js' const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', 204: '删除数据成功。', 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', 401: '用户没有权限（令牌、用户名、密码错误）。', 403: '用户得到授权，但是访问是被禁止的。', 404: '发出的请求针对的是不存在的记录，服务器没有进行操作。', 406: '请求的格式不可得。', 410: '请求的资源被永久删除，且不会再得到的。', 422: '当创建一个对象时，发生一个验证错误。', 500: '服务器发生错误，请检查服务器。', 502: '网关错误。', 503: '服务不可用，服务器暂时过载或维护。', 504: '网关超时。' } /** * 异常处理程序 */ const errorHandler = (error) => { const { response } = error if (response && response.status) { const errorText = codeMessage[response.status] || response.statusText const { status, url } = response notification.error({ message: `请求错误 ${status}: ${url}`, description: errorText }) } else if (!response) { notification.error({ description: '您的网络发生异常，无法连接服务器', message: '网络异常' }) } return response } /** * 配置request请求时的默认参数 */ const client = extend({ errorHandler, // 默认错误处理 prefix: config.api, timeout: 600000 }) // request拦截器, 改变url 或 options client.interceptors.request.use((url, options) => { const headers = localStorage.getItem('bi-X-Auth-Token') ? { Authorization: `Bearer ${localStorage.getItem('bi-X-Auth-Token')}` } : {} return { url, options: { ...options, headers } } }, { global: false }) const key = 'updatable' // 克隆响应对象做解析处理 client.interceptors.response.use(async (response) => { try { const data = await response.clone().json() if (data && (data.error === 4003 || data.error === 4002)) { notification.error({ description: '登录已过期，请重新登录', message: '提示', key }) localStorage.removeItem('bi-user_name') localStorage.removeItem('bi-user_password') localStorage.removeItem('bi-X-Auth-Token') localStorage.removeItem('bi-oac_email') localStorage.removeItem('bi-oac_url') window.__POWERED_BY_QIANKUN__ ? (window.location.href = '/#/') : router.replace('/user/login') return } } catch (error) { } return response }) export default client ``` ##### api目录下新建index.js 这里就是二次封装的过程，将url和请求类型等等封装一层，然后业务调用就想当简单了。引入request.js的client，然后定义个对象用以保存后端定义的请求url，然后将url封装和请求方式进行封装。 ``` import client from '@/utils/request.js' const api = { datasetField: '/v1/data-screen-custom/dataset-field', } export const datasetField = async data => client.post(api.datasetField, { data }) export default api ``` ##### 业务调用我们在组件组将api引入，分别引入要使用的接口 ``` import { datasetField } from '@/api' ... methods: { fetchField () { const params = {...} datasetField({ params }).then((res) => { ... }) } } ... ``` 请求库的二次封装我觉得是非常重要的，方便调用的同时也节省了很多冗余代码，相对来说代码也更加简洁，你学会了吗？开始你的请求库的封装过程吧。

~~ 感谢观看

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae0fd1b178b646ae83a7a9231542fb66~tplv-k3u1fbpfcp-zoom-1.image)

关注下方【大前端驿站】

让我们一起学，一起进步

**【分享、点赞、在看】三连吧，让更多的人加入我们**