你是一名高级前端开发工程师请你设计一套关于vue拦截器的代码要求支持多个不同环境
以下是一套关于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)
})
}
}
原文地址: https://www.cveoy.top/t/topic/FQa 著作权归作者所有。请勿转载和采集!