umi:根据umi-request开发文档封装请求参数携带请求头
2020-01-15 10:17
4399 查看
由于项目功能需求采用Antd Pro官方脚手架,为了保持框架完整性不再添加其他数据请求类npm包,所以对项目中@utils/request.js提供的官方文档进行封装。
官方API:https://github.com/umijs/umi-request 或者 https://www.npmjs.com/package/umi-request
二者文档说明差别不大。
补充:主要针对umi-request进行“请求(request)加拦截”和“回调(response)拦截”,
再根据回调拦截器返回的内容进行下一步操作。
话不多说 直接上代码
// An highlighted block /** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */ import { extend } from 'umi-request'; import { notification } from 'antd'; 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, }); } return response; }; const request = extend({ errorHandler, // 默认错误处理 credentials: 'include', // 默认请求是否带上cookie }); // request拦截器, 改变url 或 options. request.interceptors.request.use(async (url, options) => { let c_token = localStorage.getItem("x-auth-token"); if (c_token) { const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'x-auth-token': c_token }; return ( { url: url, options: { ...options, headers: headers }, } ); } else { const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'x-auth-token': c_token }; return ( { url: url, options: { ...options }, } ); } }) // response拦截器, 处理response request.interceptors.response.use((response, options) => { let token = response.headers.get("x-auth-token"); if (token) { localStorage.setItem("x-auth-token", token); } return response; }); export default request;
官方提供两种方式:
1.request => response 链条 (请求拦截=>回调拦截)
2.use next
但是在个人调试代码中使用第二种方法会报错
use is not function
随即便采用第一种方法,具体使用情况为:
1.请求前获取本地令牌(c_token),有则加入头部,无则想服务端请求;
2.服务器根据请求是否有令牌进行比对和颁发;
3.本地获取回调直接存入LocalStorage。
每次都访问一遍浏览器缓存
只有登录成功服务端传回数据并携带头部,我们将x-auth-token存入浏览器LocalStorage。
同样是为了保证项目的完整性,不引入新的npm包 eg: cookie,所以我们采用浏览器缓存机制存储临时数据,采用LocalStorage缓存路由,可以为用户提供加载重定向的功能。
记录登录状态后,业务页面需要数据交互在对应service.js层的请求都会默认带上头部头部信息。 service.js例子
import request from '@/utils/request'; // 测试登录 export async function Login(params) { // params 来自于effects中参数 // 对应rest接口,/server/api/用的是config.js中proxy代理。详细配置在config.js中配置。 return request('/server/api/web/rest/UserRest/login', { // 请求方式 method: 'POST', // 用data包裹参数是官方指定写法,如果data有参数umi-request会默认读取data里面参数。 data: { cmd: 'login', type: 'request', request: { username: 'admin', password: 'admin' } } }) }
- 点赞 2
- 收藏
- 分享
- 文章举报
相关文章推荐
- 【转】asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端
- EBS 开发中如何动态启用和禁止请求(Current Request)的参数
- EBS 开发中如何动态启用和禁止请求(Current Request)的参数
- 编写GO的WEB开发框架 (五): 请求参数封装
- 二次封装axios,根据参数来实现多个请求多次拦截
- Springmvc注解开发:日期类型参数封装报错:The request sent by the client was syntactically incorrect.
- 0056 Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装
- asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端
- Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装(类比Struts2模型驱动)
- 封装form表单提交后的request的请求,要求form表单参数名称要和实体类相同!
- 编写RequestUtils,利用BeanUtils封装请求参数的处理(赋值与自动类型转换)过程...
- HttpServletRequestWrapper采用装饰模式重新封装request,并打印request请求相关参数。
- 将request请求参数封装为map
- Struts2学习之2(请求参数的封装,类型转换,输入验证,自定义拦截器)
- Windows Phone 7(WP7)开发 网络操作(1) HttpWebRequest基本的GET请求
- 标签参数JEECG智能开发平台 UI标签库帮助文档
- 把request对象中的请求参数封装到bean中/生成UUID
- Spring Cloud (12) | Spring Cloud Zuul网关调用微服务,request请求参数是application/json
- Android/Java 中利用HttpClient 发送Patch请求,携带Json参数
- 用flask开发博客(2)---- Flask中的请求对象request