axios拦截器： axios.interceptors.request.use，axios.interceptors.response.use

原创已于 2022-12-01 16:24:56 修改 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-12-01 16:24:09 首次发布

js 同时被 3 个专栏收录

59 篇文章

订阅专栏

项目工具使用

10 篇文章

订阅专栏

axios

5 篇文章

订阅专栏

本文介绍 Axios 的请求和响应拦截器的功能与使用方法，通过实例展示了如何利用拦截器进行请求头添加、响应数据处理及错误管理等操作。

请求拦截器：

1.是什么？

在真正发送请求前执行的一个回调函数

2.作用：

对所有的请求做统一处理：追加请求头、追加参数、界面loading提示等等

//请求拦截器 需求：在请求发出时判断时间戳是否是2的倍数，如果是，则加个请求头  
axios.interceptors.request.use(config => {
  if(Date.now()%2 === 0){
    config.headers.school = 'jit';
  }
  return config;
});

注意：一定要写 return 否则请求将会在拦截器处被停止！

响应拦截器：

1.是什么？

得到响应之后执行的一组回调函数

2.作用：

若请求成功，对成功的数据进行处理

若请求失败，对失败进行进一步操作

//响应拦截器
axios.interceptors.response.use(response => {
  console.log("响应拦截器成功的回调执行了", response);
  if (Date.now() % 2 === 0) { return response.data; }
  return '时间戳不是偶数，不能给你';
}, error => {
  console.log('响应拦截器失败的回调执行了', error);
  alert(error);
  return new Promise(()=>{});//此时的promise链停下来了
});
btn1.onclick = async () => {
  /* axios.get('http://localhost:5000/persons').then(
                response => { console.log('成功了', response); },
                error => { console.log('失败了', error); } 
            )*/
  const result = await axios.get('http://localhost:5000/persons');
  console.log(result);//此处为返回的请求成功的data
}

解释：写了响应拦截器后，不需要写请求返回后失败的回调，因为错误在拦截器中就已经显示了错误信息了，错误后将返回 promise 的 pending 状态，用此来中断 promise链的传递，即不用到 axios( ).then 中的失败回调，响应拦截器已经处理了，所以 axios( ).then 只会收成功的回调，catch 也不需要写。

示例代码：

<body>
  <button id="btn1">点我获取所有人</button>
  <script>
    const btn1 = document.getElementById('btn1');

    //请求拦截器
    axios.interceptors.request.use(config => {
      if (Date.now() % 2 === 0) {
        config.headers.school = 'jit';
      }
      console.log('请求拦截器执行了');
      return config;
    });

    //响应拦截器
    axios.interceptors.response.use(response => {
      console.log("响应拦截器成功的回调执行了", response);
      if (Date.now() % 2 === 0) {
        return response.data;
      }
      return '时间戳不是偶数，不能给你';
    }, error => {
      console.log('响应拦截器失败的回调执行了', error);
      alert(error);
      return new Promise(()=>{});//此时的promise链停下来了
    });

    btn1.onclick = async () => {
      /* axios.get('http://localhost:5000/persons').then(
                response => { console.log('成功了', response); },
                error => { console.log('失败了', error); } 
            )*/

      const result = await axios.get('http://localhost:5000/persons');
      console.log(result);
    }
  </script>
</body>