内容简介:在项目中,为了方便使用,对假设后端api的前缀地址是:那么通用配置信息如下:
在项目中,为了方便使用,对 axios
进行了二次封装,原因如下:
- 由于内网服务器的安全策略,put、delete等方法的请求无法发送到后台
- 为了方便快速对接后端服务器,api接口的前缀、安全策略过期时间等通用配置应该抽离
公共配置抽离
假设后端api的前缀地址是: //1.1.1.1/api/
,安全过期时间是5000ms。
那么通用配置信息如下:
const CONFIG = { baseURL: '//1.1.1.1/api/', timeout: 5000, }; // ... const instance = axios.create({ CONFIG }); // ... export default instance;
编写拦截器
“拦截器”的做法来源于 设计模式 中的“装饰器模式”,它能在不改变原有函数逻辑的情况下,添加其他业务逻辑。
低耦合的设计非常适用于参数过滤、中间层拦截等场景。
请求拦截器
考虑到业务场景,请求到后端的数据需要在Headers中带有认证数据。
同时,由于不支持put、patch、delete方法,只能在headers中通过添加字段来标识。
const handleRequest = (config) => { config.headers.common['Authorization'] = token.get() || ''; const method = config.method.toUpperCase(); switch(method) { case 'PUT': case 'PATCH': case 'DELETE': //方法转换 config.headers.common['X-Http-Method-Override'] = method; config.method = 'POST'; break; default: break; } return config; }; instance.interceptors.request.use(handleRequest, error => Promise.reject(error));
返回拦截器
当数据从后端返回,出现错误的时候,也做一层数据过滤拦截。
const hanldeResponseError = (error) => { const { response = {} } = error; switch(response.status) { case 401: // 401:用户未登录需要先登录 console.log('Unauthorized'); break; case 403: console.log('Forbidden'); break; case 400: //操作失败 case 422: //表单验证失败 console.log(`Error: ${response.data.message}`); break; case 404: default: break; } return Promise.reject(error); }; instance.interceptors.response.use(response => response, hanldeResponseError);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。