如何设置vue拦截器

在Vue项目中设置拦截器主要涉及到使用Axios拦截请求和响应。1、通过设置请求拦截器，可以在请求发送前对请求进行统一处理；2、通过设置响应拦截器，可以在响应到达前对响应进行处理。这些拦截器可以帮助我们处理请求和响应中的一些常见问题，如统一添加请求头、处理错误响应等。以下详细介绍如何在Vue中设置请求和响应拦截器。

一、安装和配置Axios

首先，确保你已经安装了Axios。如果没有，可以通过以下命令进行安装：

npm install axios

接下来，在Vue项目的主文件（通常是main.js或main.ts）中引入Axios，并进行基本配置：

import Vue from 'vue';
import axios from 'axios';
import App from './App.vue';
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
new Vue({
  render: h => h(App),
}).$mount('#app');

二、设置请求拦截器

请求拦截器可以在请求发送之前对请求进行处理，例如添加统一的请求头、参数等。以下是设置请求拦截器的步骤：

1、创建一个Axios实例：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

2、添加请求拦截器：

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

在这个例子中，我们在请求头中添加了一个Authorization字段，其值是从localStorage中获取的token。

三、设置响应拦截器

响应拦截器可以在响应到达之前对响应进行处理，例如处理错误响应、统一格式化响应数据等。以下是设置响应拦截器的步骤：

1、添加响应拦截器：

instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 例如：重定向到登录页面
      window.location = '/login';
    }
    return Promise.reject(error);
  });

在这个例子中，如果响应状态码是401，表示未授权，我们可以重定向用户到登录页面。

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

在Vue组件中使用我们配置好的Axios实例，可以通过以下步骤实现：

1、在组件中引入Axios实例：

import axios from 'axios';
export default {
  name: 'MyComponent',
  methods: {
    fetchData() {
      axios.get('/endpoint')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

2、在组件的生命周期钩子中调用请求方法：

export default {
  name: 'MyComponent',
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/endpoint')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

五、处理全局错误和请求状态

为了更好地处理全局错误和请求状态，可以在拦截器中添加更多的逻辑。例如，可以通过Vuex来管理请求状态和错误信息：

1、在Vuex中创建一个模块来管理请求状态和错误信息：

// store/modules/request.js
const state = {
  loading: false,
  error: null,
};
const mutations = {
  SET_LOADING(state, loading) {
    state.loading = loading;
  },
  SET_ERROR(state, error) {
    state.error = error;
  },
};
const actions = {
  setLoading({ commit }, loading) {
    commit('SET_LOADING', loading);
  },
  setError({ commit }, error) {
    commit('SET_ERROR', error);
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

2、在拦截器中使用Vuex来管理请求状态和错误信息：

import store from './store';
instance.interceptors.request.use(function (config) {
    store.dispatch('request/setLoading', true);
    return config;
  }, function (error) {
    store.dispatch('request/setLoading', false);
    store.dispatch('request/setError', error);
    return Promise.reject(error);
  });
instance.interceptors.response.use(function (response) {
    store.dispatch('request/setLoading', false);
    return response;
  }, function (error) {
    store.dispatch('request/setLoading', false);
    store.dispatch('request/setError', error);
    return Promise.reject(error);
  });

通过这种方式，我们可以在全局范围内管理请求状态和错误信息，并在组件中使用这些状态来显示加载动画或错误提示。

六、实例说明

以下是一个完整的实例，展示了如何在Vue项目中设置请求和响应拦截器，并在Vue组件中使用它们：

// main.js
import Vue from 'vue';
import axios from 'axios';
import store from './store';
import App from './App.vue';
Vue.config.productionTip = false;
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});
instance.interceptors.request.use(function (config) {
    store.dispatch('request/setLoading', true);
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  }, function (error) {
    store.dispatch('request/setLoading', false);
    store.dispatch('request/setError', error);
    return Promise.reject(error);
  });
instance.interceptors.response.use(function (response) {
    store.dispatch('request/setLoading', false);
    return response;
  }, function (error) {
    store.dispatch('request/setLoading', false);
    if (error.response.status === 401) {
      window.location = '/login';
    }
    store.dispatch('request/setError', error);
    return Promise.reject(error);
  });
Vue.prototype.$axios = instance;
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import request from './modules/request';
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    request,
  },
});

// store/modules/request.js
const state = {
  loading: false,
  error: null,
};
const mutations = {
  SET_LOADING(state, loading) {
    state.loading = loading;
  },
  SET_ERROR(state, error) {
    state.error = error;
  },
};
const actions = {
  setLoading({ commit }, loading) {
    commit('SET_LOADING', loading);
  },
  setError({ commit }, error) {
    commit('SET_ERROR', error);
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// components/MyComponent.vue
<template>
  <div>
    <div v-if="$store.state.request.loading">Loading...</div>
    <div v-if="$store.state.request.error">{{ $store.state.request.error.message }}</div>
    <div v-else>{{ data }}</div>
  </div>
</template>
<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      data: null,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$axios.get('/endpoint')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

总结

通过以上步骤，我们可以在Vue项目中设置请求和响应拦截器，统一管理请求头、处理错误响应，并在组件中使用这些拦截器来处理请求和响应。为了更好地管理请求状态和错误信息，我们还可以结合Vuex进行全局状态管理。希望这些步骤和实例对你在Vue项目中使用拦截器有所帮助。