以下是一套关于Vue拦截器的代码,支持多个不同环境:

import axios from 'axios'
import Vue from 'vue'

// 定义拦截器
const interceptors = {
  // 请求拦截器
  request: {
    success: (config) => {
      // 在请求发送前做些什么
      return config
    },
    error: (error) => {
      // 请求错误时做些什么
      return Promise.reject(error)
    }
  },
  // 响应拦截器
  response: {
    success: (response) => {
      // 在响应数据返回前做些什么
      return response
    },
    error: (error) => {
      // 响应错误时做些什么
      return Promise.reject(error)
    }
  }
}

// 定义拦截器设置方法
const setInterceptors = (type, env) => {
  // 根据环境设置 baseURL
  const baseURL = env === 'production' ? 'https://api.example.com' : 'http://localhost:8080'
  const instance = axios.create({
    baseURL
  })

  // 设置请求拦截器
  instance.interceptors.request.use(
    interceptors.request.success,
    interceptors.request.error
  )

  // 设置响应拦截器
  instance.interceptors.response.use(
    interceptors.response.success,
    interceptors.response.error
  )

  // 将实例挂载到 Vue 实例上
  Vue.prototype[`$${type}`] = instance
}

// 设置不同的拦截器实例
setInterceptors('axios', 'development')
setInterceptors('axiosProd', 'production')

使用方法:

// 在 Vue 组件中使用
export default {
  mounted() {
    // 发送 GET 请求
    this.$axios.get('/users')
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error)
      })

    // 发送 POST 请求
    this.$axios.post('/users', { name: 'John Doe' })
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error)
      })

    // 发送 GET 请求(生产环境)
    this.$axiosProd.get('/users')
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error)
      })
  }
}
你是一名高级前端开发工程师请你设计一套关于vue拦截器的代码要求支持多个不同环境

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

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