axios的拦截器
2021/5/16 18:30:00
本文主要是介绍axios的拦截器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
项目中的用法:
// 创建 axios 实例 let myRequest = axios.create({ responseType: 'json', // validateStatus 是axois的内置方法,在axios包的index.d.ts声明文件中做了声明 validateStatus(status) { // 200 外的状态码都认定为失败 return status === 200; } }); // 请求拦截, 一般用于在请求头中添加token信息 myRequest.interceptors.request.use(config => { const token = sessionStorage.getItem('token') if (token ) { //如果 token 存在,则每个http header都加上token config.headers.authorization = token //请求头加上token } return config },error=>{ return Promise.reject(error) }) // 响应拦截 myRequest.interceptors.response.use(response=>{ return response; },error=>{ // 可对一般的http状态码进行拦截处理,返回友好的用户提示 switch (error.response.status) { case 404: ElementUI.Notification({ title: '系统提示', message: '很抱歉,资源未找到', type: 'info' }); break; case 403: break; case 401: ElementUI.MessageBox.confirm('登录信息已失效,请重新登陆!', '提示', { confirmButtonText: '确定', showCancelButton: false, closeOnClickModal: false, type: 'warning', showClose: false }).then(() => { // 清空session中保存的所有值 sessionStorage.clear(); router.push("/"); location.reload(); }); break; default: ElementUI.Notification({ title: '系统提示', message: errorMessage, type: 'info' }); break; } return Promise.reject(error); }) // 对 axios 的各种请求方式,进行二次封装 const request = { // 与后台商定后,统一项目中的入参格式 post(url, params) { // 格式化 请求入参 params = formatParams(params); return myRequest.post(url, params, { headers: { 'Content-Type': 'application/json' } }); }, // 因为 axios 中post和get的调用方式不一样,此处对get的封装,主要为了在项目中使用时,get和post写法一样,更加方便 get(url, params) { let _params; if (Object.is(params, undefined)) { _params = ''; } else { _params = '?'; for (let key in params) { if (params.hasOwnProperty(key) && params[key] !== null) { _params += `${key}=${encodeURIComponent(params[key])}&`; } } } return myRequest.get(`${url}${_params}`); } } function formatParams(params) { return { 'ROOT': { 'HEAD': {}, 'BODY': params } }; } export default request;
拦截器作用:
- 在请求发出前对http请求的head做一些处理,比如添加一些token信息,进行用户验证(请求拦截器)
- 在得到服务器接口响应后,对响应数据做一些统一操作,或者判断常用的http状态码,进行不同的处理,比如404资源未找到、401未授权、403无权访问等
这篇关于axios的拦截器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-08-29Axios库资料:新手入门指南与基本使用教程
- 2024-03-14system bios shadowed
- 2024-03-14gabios
- 2024-02-07iOS应用提交上架的最新流程
- 2024-02-06打包 iOS 的 IPA 文件
- 2023-12-07uniapp打包iOS应用并通过审核:代码混淆的终极解决方案 ?
- 2023-11-25uniapp IOS从打包到上架流程(详细简单) 原创
- 2023-11-10【iOS开发】iOS App的加固保护原理:使用ipaguard混淆加固
- 2023-09-30最强大的iOS应用源码保护工具:Ipa Guard,保护你的商业机密代码
- 2023-09-07iOS安全加固探讨:代码混淆、类名方法名混淆等方法