您的位置:首页 > 产品设计 > UI/UE

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
  • 收藏
  • 分享
  • 文章举报
superProps 发布了19 篇原创文章 · 获赞 12 · 访问量 9759 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐