Vue2 Axios 请求拦截 与 相应拦截

在Vue2项目中，通常会使用Axios来进行网络请求。Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境。通过Axios，我们可以轻松地发起网络请求并处理响应数据。在实际项目中，我们可能需要对请求进行拦截或对响应进行处理，以满足特定的需求。

请求拦截器

请求拦截器允许我们在发送请求之前对请求进行修改或添加自定义的逻辑。我们可以通过Axios的interceptors属性来添加请求拦截器。下面是一个简单的例子：

// main.js
import axios from 'axios'

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  console.log('请求拦截器被触发')
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

在上面的代码中，我们通过axios.interceptors.request.use方法添加了一个请求拦截器。在这个拦截器中，我们可以对请求的config进行修改或添加自定义逻辑。比如，在请求头中添加token等操作。

响应拦截器

响应拦截器允许我们在接收到响应之后对响应进行处理。我们同样可以通过Axios的interceptors属性来添加响应拦截器。下面是一个响应拦截器的例子：

// main.js
import axios from 'axios'

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

在上面的代码中，我们通过axios.interceptors.response.use方法添加了一个响应拦截器。在这个拦截器中，我们可以对响应的数据进行处理，比如统一处理错误信息、做一些日志记录等操作。

流程图

flowchart TD;
    A[发起网络请求] --> B{请求拦截器};
    B -->|拦截请求| C[发送请求];
    C --> D{响应拦截器};
    D -->|拦截响应| E[处理响应数据];

代码示例

下面是一个完整的示例，展示了如何在Vue2项目中使用Axios进行请求拦截和响应拦截：

// main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

axios.interceptors.request.use(config => {
  // 请求拦截器逻辑
  console.log('请求拦截器被触发')
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 响应拦截器逻辑
  console.log('响应拦截器被触发')
  return response;
}, error => {
  return Promise.reject(error);
});

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

在上面的代码中，我们在main.js中添加了请求拦截器和响应拦截器，以实现对请求和响应的处理。

结论

通过请求拦截器和响应拦截器，我们可以在发送请求和接收响应时进行一些定制化的处理，比如添加请求头、统一处理错误、记录日志等操作。这有助于提高项目的可维护性和可扩展性，让我们更好地管理网络请求。

希望通过本文的介绍，读者能够了解如何在Vue2项目中使用Axios进行请求拦截和相应拦截。如果有任何问题或疑问，欢迎在评论区留言讨论。感谢阅读！

pie
title 响应拦截器示例
"A" : 30
"B" : 20
"C" : 10
"D" : 40

**参考