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

今天我们来了解一下 如何拦截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. css - 全屏

    css - 全屏 heml和body元素的宽高 html与body都是块元素,但它俩比较特殊,宽高由如下定义: 1.默认的宽度=浏览器可视区域的宽度(不包含滚动条),可设置大于可视区域的宽度,但不会计 ...

  2. git cherry-pick 教程

    转自:http://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html 对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求. 这时分两 ...

  3. session.flush与transaction.commit

    以session的save方法为例来看一个简单.完整的事务流程,如下是代码片段: ---------------------------- Session session = sessionFacto ...

  4. 用C++实现的增强Eratosthenes筛法程序

    运行示例 PS H:\Read\num\x64\Release> .\eSievePro Eratosthenes sieve: a method to find out all primes ...

  5. JavaScript高级程序设计(读书笔记)之BOM

    BOM(Browser Object Model)提供了很多对象用于访问浏览器的功能,这些功能与任何网页内容无关. 8.1 window对象 BOM的核心对象是window,它表示一个浏览器实例.在浏 ...

  6. pip install 报错 TypeError: 'module' object is not callable

    $ pip install filetype Traceback (most recent call last): File "/usr/local/bin/pip2", line ...

  7. 史上最全git命令集

    配置化命令 git config --global user.name "Your Name" git config --global user.email "email ...

  8. noip模拟47

    原版在 \(linux\) 本地写完没保存关机给没了-- 再简单写一下 \(t2\) 用 \(dp\) 转移 \(f[i]=\sum _ {j=last[a[i]]}^{i-1} f[j]\) 用前缀 ...

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

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

  10. coreos 常见问题

    1.如果docker run的时候报如下错误: error creating overlay mount to /var/lib/docker/overlay2/... ... 则需要修改/run/s ...