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

前置知识：

- Vue3.0
- Axios
- 微服务

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。在Vue中，我们通常使用Axios来发送HTTP请求。

微服务是一种面向服务架构的软件设计风格。它把一个应用划分为一些小的、独立的、可替换的服务，每个服务运行在自己的进程中，服务之间通过轻量级通信机制互相协作。微服务架构可以提高应用的可伸缩性和可维护性。

下面是一个基于Vue3和Axios的微服务请求封装示例：

1. 安装Axios

npm install axios

2. 创建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

3. 封装请求方法

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的微服务请求封装。