antdPro创建的项目网络请求统一处理

项目中经常会对请求进行统一的封装处理，方便我们搭载token、对请求进行拦截等需求。

在React中经常会使用到umi提供的request请求。那么在antdPro创建的项目中，怎么对request请求进行统一的封装呢？实现的话大致有两种方式：

方式一：

是对umi的request进行简单封装，再暴露出去；在项目后续的网络请求统一都使用这个封装后并暴露出去的request方法，具体的处理方式可以参见这篇说明：umi-request请求封装

方式二：

方式二是最近看umi文档时候发现的，可以直接在antdPro项目的app.tsx文件中对request进行运行时配置，并且该配置会直接透传到umi-request的全局配置。后续直接从umi中引入request或者useRequest直接使用，可以说是非常方便。文档可查看：umi.js

具体配置代码：

import type { RequestConfig } from 'umi';/** 请求拦截 */
const requestInterceptor = (url: any, options: any): any => {const headers = {...options.headers,token: localStorage.getItem('token') || '1213'}return {url: url,options: { ...options, headers: headers },}
};
/** 响应拦截 */
const responseInterceptors = (response: any, options: any): any => {debuggerif (response.status !== 200) {switch (response.status) {case 401:notification.warn({message: '登录超时，请重新登陆!',});history.push('/login');break;}}return response;
}
/** 异常处理程序 */
const codeMessage = {200: '服务器成功返回请求的数据。',201: '新建或修改数据成功。',202: '一个请求已经进入后台排队（异步任务）。',204: '删除数据成功。',400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',401: '用户没有权限（令牌、用户名、密码错误）。',403: '用户得到授权，但是访问是被禁止的。',404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',406: '请求的格式不可得。',410: '请求的资源被永久删除，且不会再得到的。',422: '当创建一个对象时，发生一个验证错误。',500: '服务器发生错误，请检查服务器。',502: '网关错误。',503: '服务不可用，服务器暂时过载或维护。',504: '网关超时。',
};
const errorHandler = (error: any) => {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运行时配置
export const request: RequestConfig = {timeout: 3000, //请求超时时间// prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', // 统一的请求前缀// 自定义端口规范(可以对后端返回的数据格式按照我们的需求进行处理)errorConfig: {adaptor: resData => {debuggerreturn {...resData};},},middlewares: [],errorHandler: (error) => { errorHandler(error) },    //请求错误处理requestInterceptors: [requestInterceptor],           //请求拦截responseInterceptors: [responseInterceptors],        //响应拦截
};

//后续使用直接从umi中引入request 或者 useRequest，配置即生效import { request } from 'umi';export function login(body: API.LoginParams, options?: Record<string, any>) {return request<API.LoginResult>('/devServer/users/login', {method: 'POST',headers: {'Content-Type': 'application/json',},data: body,...(options || {}),});
}

antdPro创建的项目网络请求统一处理相关推荐

封装uniapp网络请求, 统一管理接口和怎么使用(完整版)
在项目开发的过程中,请求网络接口获取数据是我们前端开发人员经常需要做的工作,我们知道接口会有很多很多,我们不可能在每一个页面中发起每一个请求的时候都重复的去写那些一样的网络请求代码,那样不仅看起来很冗 ...
Flutter 项目实战 Dio网络请求四
/ HTTP | HTTPS / HTTP是一个客户端(用户)和服务端(网站)之间请求和应答的标准,通常使用TCP协议.客户端发起一个HTTP请求到服务器上指定端口(默认端口为80).客户 ...
刚出锅的 Axios 网络请求源码阅读笔记
项目中一直都有用到 Axios 作为网络请求工具,用它更要懂它,因此为了更好地发挥 Axios 在项目的价值,以及日后能够得心应手地使用它,笔者决定从源码层面好好欣赏一下它的美貌! Axios是一款基 ...
Angular网络请求的封装
很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的. 这里我来说说我自己的网络请求封装,某种意义上来 ...
使用volley进行网络请求
//Volley 缓存StringRequest,JsonObjectRequest两级缓存(网络--->磁盘) //ImageLoader(三级缓存网络--->内存缓存----> ...
【苹果相册推送】软件安装表现到ListView中，把网络请求来的数据存储下来
推荐内容IMESSGAE相关作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容 2.相册 ...
超简单-用协程简化你的网络请求吧,兼容你的老项目和旧的网络请求方式
前言在Kotlin协程(后简称协程)出来之后,颠覆了我们很多工具类的封装方式,大大简化了我们很多api的调用,并且使异步操作逻辑更清晰了其中一个很标志性的地方就属网络请求了,以前的网络请求方式声明 ...
安卓项目实战之强大的网络请求框架okGo使用详解（一）：实现get，post基本网络请求，下载上传进度监听以及对Callback自定义的深入理解
1.添加依赖 //必须使用 compile 'com.lzy.net:okgo:3.0.4'//以下三个选择添加,okrx和okrx2不能同时使用,一般选择添加最新的rx2支持即可 compile ' ...
android封装网络请求界面,轻松搞定 android MVP 架构、okHttp 网络模块封装的项目...
CommonMvp commonMvp 能做什么? 1.mvp 实现 model view presenter 业务和界面解耦 2.整合网络请求 3.简化网络调用流程 4.整合状态栏和标题栏实现 ...

antdPro创建的项目网络请求统一处理

antdPro创建的项目网络请求统一处理相关推荐

最新文章

热门文章