Axios拦截器的封装，助你打造更优雅的代码！

2024-01-10 08:37:43

随着前端开发的日益复杂，Vue.js已成为构建单页面应用程序的首选框架之一，而Axios库则成为Vue.js中处理HTTP请求的首选工具。Axios库的强大之处在于其简洁、易用，同时提供了一系列强大的功能，其中之一就是拦截器。

拦截器允许我们为请求和响应设置拦截函数，从而实现对请求和响应的统一处理和管理。下面，我们将详细介绍如何封装Axios拦截器，以帮助您打造更优雅的代码。

一、请求拦截器

请求拦截器允许我们在每个请求发出之前执行某些操作，如添加token、设置请求头等。以下是请求拦截器的封装示例：

import axios from 'axios'

// 创建axios实例
const instance = axios.create()

// 请求拦截器
instance.interceptors.request.use((config) => {
  // 在每个请求头中添加token
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
  return config
}, (error) => {
  // 处理请求错误
  return Promise.reject(error)
})

在上面的示例中，我们首先创建了一个axios实例，然后设置了一个请求拦截器。在拦截器函数中，我们从本地存储中获取token，并将其添加到每个请求头的Authorization字段中。这样，在每次发送请求时，token都会自动包含在请求头中，无需我们在每个请求中手动添加。

二、响应拦截器

响应拦截器允许我们在收到响应后执行某些操作，如判断状态码、提取数据等。以下是响应拦截器的封装示例：

// 响应拦截器
instance.interceptors.response.use((response) => {
  // 根据状态码判断登录状态
  if (response.status === 401) {
    // 重定向到登录页面
    window.location.href = '/login'
  }
  // 提取数据
  return response.data
}, (error) => {
  // 处理响应错误
  return Promise.reject(error)
})