Vue全局拦截

最新推荐文章于 2025-05-26 19:37:55 发布

素味平生

最新推荐文章于 2025-05-26 19:37:55 发布

阅读量1.4k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： axios http vue

本文链接：https://blog.youkuaiyun.com/qq_40701522/article/details/84136465

vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍在Vue项目中如何使用拦截器统一处理HTTP请求和响应，包括vue-resource和axios的使用方法，实现对特定状态码的全局拦截。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人开发项目遇到了需要做全局状态拦截，分享一下解决方案

拦截器

首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。

本人使用的是vue-resource 调用的接口

拦截代码：（使用时可打断点调试）

Vue.http.interceptors.push((request, next) => {
  next((response) => {
    if (response.body.status === 403) {
     alert(response.body.msg)
      console.log(response.body.msg)
    }
    return response;
  });
});

使用axios掉用接口的拦截代码如下：

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    console.log(error)
    if (error.response) {
      console.log(error.response.status);
      switch (error.response.status) {
        case 403:
          alert(111)
      }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  });

本文为博主原创，未经允许禁止转载，转载请注明出处，原文链接https://mp.youkuaiyun.com/postedit/84136465