前端快闪四: 拦截axios请求和响应
马甲哥继续在同程艺龙写一点大前端:
今天我们来了解一下 如何拦截axios请求/响应?
axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C#的Task async/await机制,以同步的代码风格编写异步代码。
axios一般发起的是ajax请求,我们一般会封装处理一些通用的 请求/响应动作。
比如马甲哥就遇到:
- 在每次ajax跨域请求时,允许携带第三方凭据(cookie、authorization)
- 封装4xx响应码的处理逻辑
其中关键的就是用到axios的拦截器:
export interface AxiosInterceptorManager<V> {
use<T = V>(onFulfilled?: (value: V) => T | Promise<T>, onRejected?: (error: any) => any): number;
eject(id: number): void;
}
仔细围观use
sdk,支持传入两个函数,
表示请求(响应)一旦准备好了/失败了,你可以注入的动作。
精简代码如下:
import axios from 'axios';
import {
message
} from 'antd'
const service = axios.create({
baseURL: process.env.REACT_APP_APIBASEURL,
timeout: 5000
})
// 添加请求拦截器: 这是向后台服务器发起的ajax请求
service.interceptors.request.use((reqconfig) => {
reqconfig.withCredentials = true;
return reqconfig;
}, (error) => {
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use((response) => {
return response;
}, (error) => {
if (error.response && error.response.status === 401) {
message.error("无权限操作,请联系tvs运维.")
}
return Promise.reject(error);
});
以上对于前端老鸟不值一提,但是上述拦截动作对于把握全栈web开发必不可少。
前端快闪四: 拦截axios请求和响应的更多相关文章
- 大前端快闪二:react开发模式 一键启动多个服务
最近全权负责了一个前后端分离的web项目,前端使用create-react-app, 后端使用golang做的api服务. npx create-react-app my-app cd my-app ...
- 大前端快闪:package.json文件知多少?
最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...
- 前端快闪三:多环境灵活配置react
你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...
- javaweb(四)——Http协议(请求头,响应头详解)
一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...
- 前端必备HTTP技能之HTTP请求头响应头中常用字段详解(转)
作为一名前端开发人员,肯定少不了要和网络打交道,因为要从服务器端拉取数据,从服务端获取数据最常用的方式还是通过HTTP请求.给服务器发请求的时候有请求头,接受服务器响应的时候有响应头,客户端和服务器端 ...
- nodejs-5.2 axios请求
1.npm官方文档:https://www.npmjs.com/package/axios 2.axios:用于 浏览器 和 node.js的基于Promise的HTTP客户端 请求 特征 从浏览器制 ...
- HTTP协议--请求与响应
1.简介 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990 年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW 中使用的是HT ...
- token回话保持,axios请求拦截和导航守卫以及token过期处理
1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...
- vue 路由拦截、axios请求拦截
路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...
随机推荐
- 映射Map、队列Queue、优先级队列PriorityQueue
映射Map 将对象映射到其他对象的能力是解决编程问题的有效方法.例如,考虑一个程序,它被用来检查 Java 的 Random 类的随机性.理想情况下, Random 会产生完美的数字分布,但为了测试这 ...
- 关于Junit中Assert已经过时
在junit4.12之后,Assert就过时了,提供了TestCase来取代: 同样在TestCase中原本比较常见的一些方法也已经取消了,例如:assertNotEquals.assertThat. ...
- 证明n个正数的算术平均数不小于它们的几何平均数
- SpringBoot笔记(1)
一.Spring能做什么 微服务 响应式开发 分布式云开发 web开发 无服务开发(云) 批处理业务等 二.SpringBoot作用 能快速创建出生产级别的Spring应用 SpringBoot是整合 ...
- springMVC学习总结(三) --springMVC重定向
根据springMVC学习总结(一) --springMVC搭建搭建项目 在com.myl.controller包下创建一个java类WebController. 在jsp子文件夹下创建一个视图文件i ...
- Django项目中的模板继承
1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...
- NOIP模拟26「神炎皇·降雷皇·幻魔皇」
T1:神炎皇 又是数学题,气死,根本不会. 首先考虑式子\(a+b=ab\),我们取\(a\)与\(b\)的\(gcd\):\(d\),那么式子就可以改写成: \[(a'+b')*d=a'b' ...
- MongoDB(14)- 查询 null 字段或缺少某个字段的文档
插入测试数据 db.inventory.insertMany([ { _id: 1, item: null }, { _id: 2 } ]) 后面的栗子都会用到这里的测试数据 查询匹配包含值为 nul ...
- dubbo 2.7应用级服务发现踩坑小记
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 背景 本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应 ...
- shell编程之免交互
目录: 一.Here Document 免交互 二.Expect 一.Here Document 免交互 使用I/O重定向的方式将命令列表提供给交互式程序或命令, 比如 ftp.cat 或 read ...