umi-request 获取 headers
Antd-Design-Pro 中封装 request
GitHub封装源码
/*** 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: { response: Response }): Response => {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 request = extend({errorHandler, // 默认错误处理credentials: 'include', // 默认请求是否带上cookie
});export default request;
为了获得后台写在Response Headers中的token,添加请求前后拦截
/*** request 请求前处理*/
request.interceptors.request.use(async (url, options) => {if (localStorage.getItem("ty") && localStorage.getItem("tk")) {const headers = {ty: localStorage.getItem("ty"), tk: localStorage.getItem("tk")};return ({url: url,options: {...options, headers: headers},});} else {return ({url: url,options: options,});}
})/*** response 请求后处理*/
request.interceptors.response.use((response, options) => {if (response.headers.get("ty") && response.headers.get("tk")) {localStorage.setItem("ty", response.headers.get("ty"));localStorage.setItem("tk", response.headers.get("tk"));}return response;
});
本人将token临时写入LocalStorage,方便每次调用。
FAQ
有很多小伙伴可能会疑惑，明明打印不出headers 怎么会获取属性？
request.interceptors.response.use((response, options) => {
console.log(response, options);//这里打印内容中 headers是空的
//然而你依然可以通过下面的方式获取到tockenif (response.headers.get("ty") && response.headers.get("tk")) {localStorage.setItem("ty", response.headers.get("ty"));localStorage.setItem("tk", response.headers.get("tk"));}return response;
});
headers可以通过get方法获取。参数和fetch中的类似。
0、文档
1、umi-request 填坑——headers 内容（token）之类的写不进去
2、umi：根据umi-request开发文档封装请求参数携带请求头