vue项目中请求拦截如何配置

在Vue项目中配置请求拦截，可以通过以下步骤实现：1、安装axios 2、创建axios实例 3、设置请求拦截器 4、设置响应拦截器。其中，安装axios是最基础的一步，它是Vue项目中进行HTTP请求的常用库。通过安装并配置axios，您可以轻松地管理HTTP请求和响应，增强项目的安全性和功能性。

一、安装axios

首先，您需要在Vue项目中安装axios库。可以通过npm或yarn来安装：

npm install axios

或者

yarn add axios

安装完成后，您可以在Vue组件或其他JavaScript文件中导入axios。

二、创建axios实例

为了更好地管理和配置axios请求，建议创建一个axios实例。这样可以在实例中集中配置一些全局设置，比如baseURL、超时时间等。

// src/utils/request.js
import axios from 'axios';
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // request timeout
});
export default service;

三、设置请求拦截器

请求拦截器用于在请求发出之前做一些处理，比如在请求头中添加token。

// src/utils/request.js
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    if (store.getters.token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = getToken();
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

四、设置响应拦截器

响应拦截器用于在响应数据返回后进行一些处理，比如错误处理和数据格式化。

// src/utils/request.js
service.interceptors.response.use(
  response => {
    /
     * 通过response.data获取服务器返回的数据
     */
    const res = response.data;
    // 如果自定义代码不是20000，则判断为错误。
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      });
      // 50008: 非法的token; 50012: 其他客户端登录了; 50014: Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 重新登录
        MessageBox.confirm(
          '您已注销，可以取消以留在此页面，或重新登录',
          '确认注销',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload();
          });
        });
      }
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    console.log('err' + error); // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

五、在Vue组件中使用axios实例

完成上述配置后，您可以在Vue组件中使用axios实例进行HTTP请求。

import request from '@/utils/request';
export function fetchList(query) {
  return request({
    url: '/vue-admin-template/table/list',
    method: 'get',
    params: query
  });
}

六、总结和建议

通过上述步骤，您可以在Vue项目中成功配置请求拦截。这不仅可以增强项目的安全性，还能统一管理请求和响应的处理流程。总结主要观点如下：

安装axios：确保项目中有axios库。
创建axios实例：集中配置axios实例的全局设置。
设置请求拦截器：在发送请求前进行处理，如添加token。
设置响应拦截器：在响应返回后进行处理，如错误处理。

进一步的建议包括：

优化错误处理：根据项目需求，细化错误处理逻辑。
定期更新：保持axios库和相关依赖的更新，确保项目的安全性和性能。
测试拦截器：在开发和测试环境中验证拦截器的功能，确保其正常工作。

相关问答FAQs：

问题1：Vue项目中的请求拦截是什么？如何进行配置？

请求拦截是指在Vue项目中，在发送请求之前对请求进行拦截并进行一些处理的过程。通过请求拦截，我们可以在发送请求之前添加一些公共参数、设置请求头、进行权限校验等操作。

要进行请求拦截的配置，我们需要使用axios这个网络请求库，它可以在Vue项目中轻松地进行请求拦截的配置。

问题2：如何使用axios进行请求拦截的配置？

在Vue项目中使用axios进行请求拦截的配置非常简单。我们可以在项目的入口文件（通常是main.js）中进行全局配置，或者在需要拦截的具体请求中进行局部配置。

首先，我们需要安装axios。可以使用npm或者yarn进行安装，命令如下：

npm install axios

或者

yarn add axios

安装完成后，在入口文件（如main.js）中引入axios，并进行全局配置：

import axios from 'axios';

// 设置基础请求路径
axios.defaults.baseURL = 'http://api.example.com';

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 添加公共参数、设置请求头等操作
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 在Vue实例中使用axios
Vue.prototype.$http = axios;

在全局配置中，我们可以设置基础请求路径（baseURL），这样在具体的请求中就不需要再写完整的请求路径了。

上述配置中，我们使用axios.interceptors.request.use方法添加了请求拦截器。在请求拦截器中，我们可以对请求进行一些处理，比如添加公共参数、设置请求头等操作。最后，要将axios添加到Vue实例中，这样在整个项目中就可以使用this.$http来发送请求了。

如果需要对特定的请求进行拦截，可以在具体的请求中进行局部配置：

// 发送请求
this.$http.get('/api/data', {
  // 添加请求拦截配置
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
  .then(response => {
    // 请求成功回调
  })
  .catch(error => {
    // 请求失败回调
  });

在上述代码中，我们通过在请求中传入headers参数，设置了请求头信息，从而实现了局部的请求拦截配置。

问题3：请求拦截的配置有哪些常见的应用场景？

请求拦截的配置可以应用在很多场景中，下面列举了一些常见的应用场景：

添加公共参数：我们可以在请求拦截器中统一为每个请求添加一些公共参数，比如用户身份信息、时间戳等。
设置请求头：有些接口需要在请求头中添加特定的信息，比如认证信息、授权信息等。通过请求拦截，我们可以在发送请求之前设置请求头，从而实现对接口的权限校验。
接口错误处理：有些接口可能会返回特定的错误信息，比如未登录、权限不足等。通过请求拦截，我们可以在请求发生错误时进行统一的处理，比如跳转到登录页或者显示错误提示。
接口缓存：有些接口的数据是不经常变动的，可以通过请求拦截将这些接口的数据缓存起来，在下次请求时直接使用缓存数据，减少服务器的负载和提高页面加载速度。

通过合理配置请求拦截，我们可以提高项目的开发效率、增加项目的可维护性，同时也可以提高用户体验和接口的安全性。

文章标题：vue项目中请求拦截如何配置，发布者：worktile，转载请注明出处：https://worktile.com/kb/p/3679405