Vuex：我在项目中是这样统一接管请求的

2023-11-19 23:58:25

前言

在前端项目中，我们经常需要发起各种各样的请求来获取数据。为了方便管理这些请求，我们可以使用 Vuex 来统一接管请求。Vuex 是一个状态管理库，它可以帮助我们集中管理应用程序的状态，包括请求状态。

使用 Vuex 来管理请求状态

我们可以使用 Vuex 来管理请求状态。具体来说，我们可以定义一个名为 loading 的状态变量，该变量的值为一个布尔值，表示当前是否正在发起请求。当我们发起请求时，我们可以将 loading 的值设置为 true，当请求完成时，我们可以将 loading 的值设置为 false。

export const state = {
  loading: false
}

使用 Vuex 来统一处理请求

我们可以使用 Vuex 来统一处理请求。具体来说，我们可以创建一个名为 fetch 的方法，该方法接受一个请求参数，并返回一个 Promise 对象。在 fetch 方法中，我们可以先将 loading 的值设置为 true，然后发起请求。当请求完成时，我们可以将 loading 的值设置为 false，并返回请求结果。

export const actions = {
  fetch({ commit }, request) {
    commit('setLoading', true)
    return axios(request).then(response => {
      commit('setLoading', false)
      return response.data
    })
  }
}

使用 Vuex 来实现请求的全局拦截

我们可以使用 Vuex 来实现请求的全局拦截。具体来说，我们可以创建一个名为 interceptors 的数组，该数组中包含所有请求拦截器和响应拦截器。当我们发起请求时，我们可以遍历 interceptors 数组，并调用每个拦截器中的 onFulfilled 和 onRejected 方法。

export default {
  state,
  actions,
  getters,
  mutations,
  modules: {
    interceptors: {
      state: {
        interceptors: []
      },
      mutations: {
        addInterceptor(state, interceptor) {
          state.interceptors.push(interceptor)
        },
        removeInterceptor(state, interceptor) {
          const index = state.interceptors.indexOf(interceptor)
          if (index !== -1) {
            state.interceptors.splice(index, 1)
          }
        }
      }
    }
  }
}