vue用什么拦截请求比较好

在Vue中拦截请求可以使用axios拦截器来实现，axios是一个常用的基于Promise的HTTP客户端库。

使用axios拦截器可以在请求发送之前和响应返回之后对请求进行拦截和处理。拦截器可以对请求进行一些通用的处理，比如添加请求头、添加Token验证等；对响应进行统一处理，比如统一的错误处理、统一的数据格式处理等。

拦截器有两种类型：请求拦截器和响应拦截器。

请求拦截器会在请求发送之前执行，可以在此时对请求进行一些处理。比如添加请求头、设置loading状态等。

响应拦截器会在响应返回之后执行，可以在此时对响应进行一些处理。比如统一的错误处理、统一的数据格式处理等。

下面是一个简单的示例代码：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的baseURL
  timeout: 5000 // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前可以在这里进行一些通用处理，比如添加请求头
    config.headers['Authorization'] = 'Bearer token';
    return config;
  },
  error => {
    // 请求错误时的处理逻辑
    console.error(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 请求成功时的处理逻辑
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      // 请求失败时的处理逻辑
      console.error(response.data.message);
      return Promise.reject(response.data.message);
    }
  },
  error => {
    // 响应错误时的处理逻辑
    console.error(error);
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，首先通过axios.create方法创建了一个axios实例，可以设置请求的baseURL、超时时间等。然后通过interceptors.request.use方法添加了一个请求拦截器，通过interceptors.response.use方法添加了一个响应拦截器。在拦截器中可以对请求和响应进行一些通用处理，比如添加请求头、统一的错误处理等。

在Vue中使用axios实例可以全局注册，在需要的地方直接使用。示例如下：

import axios from '../utils/axios';

axios.get('/user/1')
  .then(response => {
    // 处理请求成功的逻辑
  })
  .catch(error => {
    // 处理请求失败的逻辑
  });

通过上述拦截器的配置，对请求进行了统一的处理，可以方便地进行一些通用操作。同时，拦截器的添加是灵活的，根据需求可以自由定制。

在Vue中，可以使用Axios来拦截请求。Axios是一个基于Promise的http请求库，可以在浏览器和Node.js中使用。

以下是使用Axios拦截请求的步骤：

1. 安装Axios：在终端中运行命令npm install axios来安装Axios。

2. 导入Axios：在需要拦截请求的文件中，导入Axios。

import axios from 'axios';

3. 创建Axios实例：创建一个Axios实例，通过配置项来设置默认的请求参数、请求头等。

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 请求超时时间
  headers: {'Content-Type': 'application/json'} // 请求头设置
});

4. 添加请求拦截器：使用interceptors属性添加请求拦截器，在请求被发送之前进行一些操作，比如添加公共的请求参数、设置请求头。

instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.params = { // 添加公共请求参数
    token: 'abc123',
    timestamp: Date.now()
  };
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

5. 发送请求：使用Axios实例发送请求。

instance.get('/api/foo')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

使用Axios拦截请求可以实现在请求被发送之前对请求进行统一的处理，比如添加请求参数、请求头，设置超时时间等。这样可以减少代码的重复性，并提高开发效率。

在Vue中拦截请求有多种方式可供选择。以下介绍几种常用的拦截请求的方法：

1. 使用Axios拦截请求

Axios是一个常用的HTTP客户端工具，可以用于发送AJAX请求。Axios提供了一个拦截器(interceptors)机制，可以在请求发送前或响应返回后对其进行拦截和处理。

首先，通过npm或yarn安装Axios：

$ npm install axios

然后，在Vue项目中创建一个axios.js文件，设置请求拦截器和响应拦截器：

// axios.js
import axios from 'axios';

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 比如设置请求头
    config.headers.common['Authorization'] = 'Bearer token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default axios;

然后，在需要发送请求的组件中引入axios.js文件，并使用拦截过的axios发送请求：

import axios from '@/axios';

axios.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理请求错误
  });

2. 使用Vue的全局beforeEach和afterEach函数拦截请求

Vue Router提供了全局的beforeEach和afterEach函数，可以在路由跳转前和跳转后拦截请求。

首先，在Vue项目的main.js文件中添加以下代码：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在路由跳转前做些什么
  // 比如判断用户是否登录
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  // 在路由跳转后做些什么
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

然后，在需要拦截请求的组件中，可以通过判断路由跳转前后的信息来处理请求：

// YourComponent.vue
export default {
  created() {
    this.$router.beforeEach((to, from, next) => {
      // 在路由跳转前做些什么
      next();
    });

    this.$router.afterEach((to, from) => {
      // 在路由跳转后做些什么
    });
  }
}

3. 使用Vue的axios插件interceptors拦截请求

如果你在项目中使用了Vue的axios插件，可以直接使用其提供的interceptors属性来拦截请求。

首先，通过npm或yarn安装axios和vue-axios库：

$ npm install axios vue-axios

然后，在main.js文件中注册Vue的axios插件：

// main.js
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

new Vue({
  render: h => h(App)
}).$mount('#app');

接下来，在需要拦截请求的组件中使用interceptors属性来设置请求拦截方法：

export default {
  created() {
    this.axios.interceptors.request.use(
      config => {
        // 在发送请求之前做些什么
        config.headers.common['Authorization'] = 'Bearer token';
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
  }
}

以上是几种常用的Vue拦截请求的方法，根据实际需求可以选择最适合的方法来拦截和处理请求。