vue3.0 axios封装请求微服务后台

前置知识：

Vue3.0
Axios
微服务

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。在Vue中，我们通常使用Axios来发送HTTP请求。
微服务是一种面向服务架构的软件设计风格。它把一个应用划分为一些小的、独立的、可替换的服务，每个服务运行在自己的进程中，服务之间通过轻量级通信机制互相协作。微服务架构可以提高应用的可伸缩性和可维护性。
下面是一个基于Vue3和Axios的微服务请求封装示例：

安装Axios

npm install axios
登录后复制

创建axios实例

import axios from 'axios'

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 微服务请求的基础路径
timeout: 5000 // 超时时间
})

// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做些什么
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
return Promise.reject(error)
}
)

// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做些什么
const res = response.data
if (res.code !== 20000) {
// 如果响应状态码不是20000，则视为错误
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 对响应错误做些什么
console.log('err' + error) // for debug
return Promise.reject(error)
}
)

export default service
登录后复制

封装请求方法

import request from '@/utils/request'

export function getUserInfo() {
return request({
url: '/user/info',
method: 'get'
})
}

export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}

export function logout() {
return request({
url: '/user/logout',
method: 'post'
})
}
登录后复制
在组件中使用：
import { getUserInfo } from '@/api/user'

export default {
name: 'HelloWorld',
created() {
getUserInfo().then(response => {
console.log(response)
})
}
}
登录后复制
这样就完成了基于Vue3和Axios的微服务请求封装。