vue 封装axiso及配置拦截request和response

在 Vue 中封装 Axios 并配置拦截器可以方便地对请求和响应进行统一处理。以下是一个示例：

import axios from 'axios'
import router from '@/router'
import { Message } from 'element-ui'

// 创建一个 Axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 接口的基础路径
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求头中添加 token
    if (localStorage.token) {
      config.headers.Authorization = localStorage.token
    }
    return config
  },
  error => {
    // 错误处理
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果接口返回的状态码不为 200，则表示接口调用失败
    if (res.code !== 200) {
      Message({
        message: res.message || '请求失败',
        type: 'error',
        duration: 5 * 1000
      })
      // 如果返回的状态码为 401，则表示用户没有权限，跳转到登录页
      if (res.code === 401) {
        router.push('/login')
      }
      return Promise.reject(res.message || '请求失败')
    } else {
      return res
    }
  },
  error => {
    // 错误处理
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

在这个示例中，我们首先创建了一个 Axios 实例，并在其中配置了请求的基础路径和超时时间。然后，我们通过请求拦截器和响应拦截器对请求和响应进行了统一的处理。

在请求拦截器中，我们通过在请求头中添加 token 来实现用户认证。

在响应拦截器中，我们首先判断接口返回的状态码是否为 200。如果不是 200，则表示接口调用失败，此时我们使用 ElementUI 的 Message 组件提示用户失败原因，并根据返回的状态码进行相应的处理。如果返回的状态码为 401，则表示用户没有权限，跳转到登录页。如果返回的状态码为 200，则表示接口调用成功，将返回的数据进行返回。

最后，我们将封装好的 Axios 实例通过 export default 暴露出去，供其他组件使用。

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！