axios拦截器： axios.interceptors.request.use，axios.interceptors.response.use-Toy模板网

这篇具有很好参考价值的文章主要介绍了axios拦截器： axios.interceptors.request.use，axios.interceptors.response.use。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

请求拦截器：

1.是什么？

2.作用：

响应拦截器：

1.是什么？

2.作用：

示例代码：

请求拦截器：

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 也不需要写。文章来源地址https://www.toymoban.com/news/detail-601985.html

示例代码：

<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>

到了这里，关于axios拦截器： axios.interceptors.request.use，axios.interceptors.response.use的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！