vue如何加拦截器

在Vue项目中添加拦截器的方式主要是通过在项目中使用Axios库。1、引入Axios库、2、创建Axios实例、3、添加请求拦截器、4、添加响应拦截器。拦截器可以帮助我们在请求发送之前和响应到达之后进行额外的处理，例如添加认证令牌、处理错误响应等。下面将详细描述如何在Vue项目中添加和使用拦截器。

一、引入Axios库

首先，我们需要在Vue项目中安装Axios库。可以使用npm或yarn来安装：

npm install axios

或

yarn add axios

安装完成后，在项目中引入Axios：

import axios from 'axios';

二、创建Axios实例

创建一个Axios实例以便于配置全局的拦截器和其他设置：

const instance = axios.create({

  baseURL: 'https://api.example.com', // 基础URL
  timeout: 1000, // 请求超时时间
  headers: {'X-Custom-Header': 'foobar'}
});

三、添加请求拦截器

请求拦截器可以在请求发送之前对其进行处理。常见的用途包括添加认证令牌、修改请求参数等：

instance.interceptors.request.use(

  function(config) {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

四、添加响应拦截器

响应拦截器可以在响应到达之后对其进行处理。常见的用途包括处理错误响应、统一处理响应数据等：

instance.interceptors.response.use(

  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 未授权的处理
      console.error('未授权，请重新登录');
    } else if (error.response.status === 500) {
      // 服务器错误处理
      console.error('服务器错误，请稍后重试');
    }
    return Promise.reject(error);
  }
);

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

你可以在Vue组件中使用这个Axios实例进行网络请求：

export default {

  name: 'App',
  methods: {
    fetchData() {
      instance.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

六、完整示例

为了更好地理解，以下是一个完整的示例，包括创建Axios实例、添加拦截器以及在Vue组件中使用：

// axiosInstance.js

import axios from 'axios';
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
instance.interceptors.request.use(
  function(config) {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  function(response) {
    return response;
  },
  function(error) {
    if (error.response.status === 401) {
      console.error('未授权，请重新登录');
    } else if (error.response.status === 500) {
      console.error('服务器错误，请稍后重试');
    }
    return Promise.reject(error);
  }
);
export default instance;
// App.vue
<template>
  <div id="app">
    <button @click="fetchData">获取数据</button>
  </div>
</template>
<script>
import axiosInstance from './axiosInstance';
export default {
  name: 'App',
  methods: {
    fetchData() {
      axiosInstance.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

七、总结和建议

通过以上步骤，我们可以在Vue项目中成功添加和使用Axios拦截器。拦截器的主要作用是对请求和响应进行预处理，可以帮助我们解决许多实际问题，如统一处理错误响应、添加身份验证等。在实际项目中，建议将Axios实例和拦截器配置抽象到单独的文件中，以便于维护和管理。同时，注意在拦截器中处理各种可能的错误情况，确保应用的稳定性和用户体验。

相关问答FAQs：

1. 什么是Vue拦截器？

Vue拦截器是一种机制，用于在Vue应用程序中拦截并处理请求和响应。拦截器可以用来修改请求或响应的内容，添加或删除请求头，处理错误等。它们提供了一个灵活的方式来处理全局的请求和响应。

2. 如何在Vue中添加请求拦截器？

要在Vue中添加请求拦截器，可以使用axios库。Axios是一个流行的HTTP客户端，可以与Vue无缝集成。以下是添加请求拦截器的步骤：

Step 1: 安装axios库

npm install axios

Step 2: 在Vue组件中引入axios

import axios from 'axios';

Step 3: 创建axios实例并添加请求拦截器

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置超时时间
});

axiosInstance.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); // 添加请求头
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

export default axiosInstance;

以上代码创建了一个axios实例，并在请求之前添加了一个拦截器。在拦截器中，我们可以修改请求的配置，添加请求头等。

3. 如何在Vue中添加响应拦截器？

要在Vue中添加响应拦截器，可以使用axios库。以下是添加响应拦截器的步骤：

Step 1: 安装axios库（如果还没有安装）

npm install axios

Step 2: 在Vue组件中引入axios

import axios from 'axios';

Step 3: 创建axios实例并添加响应拦截器

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置超时时间
});

axiosInstance.interceptors.response.use((response) => {
  // 对响应数据做点什么
  if (response.status === 200) {
    return response.data;
  } else {
    return Promise.reject(response);
  }
}, (error) => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default axiosInstance;

以上代码创建了一个axios实例，并在响应返回之前添加了一个拦截器。在拦截器中，我们可以修改响应的数据，处理错误等。

总结：
在Vue中使用拦截器可以方便地处理请求和响应，添加请求头、处理错误等操作。通过axios库，我们可以轻松地在Vue应用程序中添加请求和响应拦截器。