在Vue中,我们可以使用axios拦截器来拦截请求和响应,并在拦截器中添加一些统一处理的逻辑。以下是一个简单的拦截器示例:

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送之前做一些处理
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, error => {
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 在响应之前做一些处理
  return response
}, error => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        // 如果返回401未授权,则清除token并跳转到登录页面
        localStorage.removeItem('token')
        router.replace({
          path: '/login',
          query: { redirect: router.currentRoute.fullPath }
        })
        break
      case 404:
        // 如果返回404未找到,则提示用户相关信息
        alert('请求的资源未找到')
        break
      default:
        // 其他错误则直接提示用户
        alert(error.response.data.message)
    }
  }
  return Promise.reject(error)
})

export default instance

上面的代码中,我们首先创建了一个axios实例,并在该实例中添加了请求拦截器和响应拦截器。在请求拦截器中,我们可以通过修改请求配置来添加一些请求头或请求参数等信息。在响应拦截器中,我们根据返回的响应状态码来进行统一处理,比如清除token并跳转到登录页面、提示用户相关信息等。最后,我们导出该axios实例,方便其他地方进行使用。

vue写一个拦截器

原文地址: https://www.cveoy.top/t/topic/FP2 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录