vue axios拦截器

Vue中使用Axios拦截器可以在发送请求或响应返回前对其进行一些处理。拦截器可以用来添加公共headers、设置loading状态、处理错误等。

首先，你需要安装并导入Axios库。然后在Vue组件中定义拦截器。以下是一个简单的示例：

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

axios.interceptors.request.use(
  config => {
    // 在请求发送前做一些处理，比如添加headers
    config.headers['Authorization'] = 'Bearer token';
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    // 在响应返回前做一些处理，比如解析数据
    return response;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

// Vue组件中使用Axios
export default {
  data() {
    return {
      responseData: null,
      loading: false
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data')
        .then(response => {
          this.responseData = response.data;
          this.loading = false;
        })
        .catch(error => {
          console.error(error);
          this.loading = false;
        });
    }
  }
};

在上面的示例中，我们定义了两个拦截器：一个用于请求发送前处理，一个用于响应返回前处理。在请求拦截器中，我们可以添加headers等信息；在响应拦截器中，我们可以对响应数据进行处理。

同时，在Vue组件中使用Axios发送请求时，我们可以通过`then`和`catch`方法来处理响应和错误。在这个示例中，我们设置了一个`loading`状态来展示加载状态，当请求成功后，将返回的数据保存在`responseData`中。

这只是一个简单的示例，你可以根据自己的需求来进行更复杂的处理。希望对你有所帮助！