axios 拦截器 - Javascript

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 等平台。它可以与第三方库配合使用，如 Vue.js、React 等。

Axios 拦截器可以拦截请求和响应，可以在请求发送前和响应被 then 或 catch 处理前对它们进行拦截和修改。这为请求和响应处理提供了很多便利和灵活性。

Axios 拦截器包含以下两种类型：

• 请求拦截器：在请求发送前拦截请求，可以对请求进行预处理，例如添加公共参数、添加 token 等。
• 响应拦截器：在响应被 then 或 catch 处理前拦截响应，可以对响应进行预处理，例如处理错误、统一格式化数据等。

请求拦截器

我们可以通过 axios.interceptors.request.use() 方法来添加请求拦截器：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

在 axios.interceptors.request.use() 方法中，第一个参数是一个函数，这个函数会在请求发送之前被调用。这个函数接收一个参数 config，它是请求配置对象。我们可以在这个函数中对请求配置对象进行修改，然后将修改后的配置对象返回。

在上述代码中，我们添加了一个请求头 Authorization，它的值是从 localStorage 中获取的 token 值。

第二个参数是一个处理请求错误的函数，如果请求发送失败，它会被调用。

响应拦截器

我们可以通过 axios.interceptors.response.use() 方法来添加响应拦截器：

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.data.code === '401') {
    // 未登录，跳转到登录页
    router.push('/login')
  } else {
    return response
  }
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

在 axios.interceptors.response.use() 方法中，第一个参数是一个函数，这个函数会在响应被 then 处理前被调用。这个函数接收一个参数 response，它是响应对象。我们可以在这个函数中对响应进行处理，然后将处理后的响应返回。如果不需要对响应进行处理，直接返回 response 即可。

在上述代码中，我们对响应进行了处理，如果响应中的 code 是 401（未登录），我们就跳转到登录页。否则，就返回响应对象。

第二个参数是一个处理响应错误的函数，如果响应处理失败，它会被调用。

总之，Axios 拦截器非常实用，可以帮助我们简化请求和响应的处理逻辑。当然，如果你不需要拦截器，也可以不使用它们。