前端快闪四: 拦截axios请求和响应

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

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

Axios 是一个流行的 JavaScript 库,用于从浏览器或 Node.js 发出 HTTP 请求。它基于 XMLHttpRequest API 构建,提供简单易用的接口来发送和接收数据。axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C#的Task async/await机制,以同步的代码风格编写异步代码。

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

比如马甲哥就遇到:

  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开发必不可少。

posted @ 2021-10-09 17:20  博客猿马甲哥  阅读(705)  评论(0编辑  收藏  举报