马甲哥继续在同程艺龙写一点大前端:

今天我们来了解一下 如何拦截axios请求/响应?

axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C#的Task async/await机制,以同步的代码风格编写异步代码。

axios一般发起的是ajax请求,我们一般会封装处理一些通用的 请求/响应动作。

比如马甲哥就遇到:

  1. 在每次ajax跨域请求时,允许携带第三方凭据(cookie、authorization)
  2. 封装4xx响应码的处理逻辑

其中关键的就是用到axios的拦截器:

export interface AxiosInterceptorManager<V> {
use<T = V>(onFulfilled?: (value: V) => T | Promise<T>, onRejected?: (error: any) => any): number;
eject(id: number): void;
}

仔细围观usesdk,支持传入两个函数,

表示请求(响应)一旦准备好了/失败了,你可以注入的动作。

精简代码如下:

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请求和响应的更多相关文章

  1. 大前端快闪二:react开发模式 一键启动多个服务

    最近全权负责了一个前后端分离的web项目,前端使用create-react-app, 后端使用golang做的api服务. npx create-react-app my-app cd my-app ...

  2. 大前端快闪:package.json文件知多少?

    最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...

  3. 前端快闪三:多环境灵活配置react

    你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...

  4. javaweb(四)——Http协议(请求头,响应头详解)

    一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...

  5. 前端必备HTTP技能之HTTP请求头响应头中常用字段详解(转)

    作为一名前端开发人员,肯定少不了要和网络打交道,因为要从服务器端拉取数据,从服务端获取数据最常用的方式还是通过HTTP请求.给服务器发请求的时候有请求头,接受服务器响应的时候有响应头,客户端和服务器端 ...

  6. nodejs-5.2 axios请求

    1.npm官方文档:https://www.npmjs.com/package/axios 2.axios:用于 浏览器 和 node.js的基于Promise的HTTP客户端 请求 特征 从浏览器制 ...

  7. HTTP协议--请求与响应

    1.简介 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990 年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW 中使用的是HT ...

  8. token回话保持,axios请求拦截和导航守卫以及token过期处理

    1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...

  9. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

随机推荐

  1. 映射Map、队列Queue、优先级队列PriorityQueue

    映射Map 将对象映射到其他对象的能力是解决编程问题的有效方法.例如,考虑一个程序,它被用来检查 Java 的 Random 类的随机性.理想情况下, Random 会产生完美的数字分布,但为了测试这 ...

  2. 关于Junit中Assert已经过时

    在junit4.12之后,Assert就过时了,提供了TestCase来取代: 同样在TestCase中原本比较常见的一些方法也已经取消了,例如:assertNotEquals.assertThat. ...

  3. 证明n个正数的算术平均数不小于它们的几何平均数

  4. SpringBoot笔记(1)

    一.Spring能做什么 微服务 响应式开发 分布式云开发 web开发 无服务开发(云) 批处理业务等 二.SpringBoot作用 能快速创建出生产级别的Spring应用 SpringBoot是整合 ...

  5. springMVC学习总结(三) --springMVC重定向

    根据springMVC学习总结(一) --springMVC搭建搭建项目 在com.myl.controller包下创建一个java类WebController. 在jsp子文件夹下创建一个视图文件i ...

  6. Django项目中的模板继承

    1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...

  7. NOIP模拟26「神炎皇·降雷皇·幻魔皇」

    T1:神炎皇   又是数学题,气死,根本不会.   首先考虑式子\(a+b=ab\),我们取\(a\)与\(b\)的\(gcd\):\(d\),那么式子就可以改写成: \[(a'+b')*d=a'b' ...

  8. MongoDB(14)- 查询 null 字段或缺少某个字段的文档

    插入测试数据 db.inventory.insertMany([ { _id: 1, item: null }, { _id: 2 } ]) 后面的栗子都会用到这里的测试数据 查询匹配包含值为 nul ...

  9. dubbo 2.7应用级服务发现踩坑小记

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 背景 本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应 ...

  10. shell编程之免交互

    目录: 一.Here Document 免交互 二.Expect 一.Here Document 免交互 使用I/O重定向的方式将命令列表提供给交互式程序或命令, 比如 ftp.cat 或 read ...