uniapp vue3接口封装

Uniapp 是一个基于 Vue.js 的跨平台应用开发框架，提供了一套完整的开发工具和开发文档。在 Uniapp 中使用 Vue3 的方式与 Vue2 类似。

接口封装是在前端项目中常用的一种技术，目的是为了方便调用接口、重用代码，并且可以进行错误处理、数据转换等操作。下面是一个简单的接口封装示例：

import { request } from '@/utils/request.js'

const baseUrl = 'http://example.com/api/'

export const getUserInfo = (params) => {
  return request({
    url: `${baseUrl}/getUserInfo`,
    method: 'get',
    params
  })
}

export const login = (data) => {
  return request({
    url: `${baseUrl}/login`,
    method: 'post',
    data
  })
}

在上面的示例中，我们使用 `request` 方法来发送请求。这里的 `request` 方法是我们封装的一个通用请求方法，可以进行一些全局配置，例如设置请求头、错误处理等。我们可以在 `utils/request.js` 中定义这个方法：

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    return config
  },
  error => {
    // 处理请求错误
    console.error(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应之前做一些处理
    return response.data
  },
  error => {
    // 处理响应错误
    console.error(error)
    return Promise.reject(error)
  }
)

export default service

export const request = (config) => {
  return service(config)
}

在上面的示例中，我们使用了 Axios 库来发送请求，并且定义了一个 `service` 实例作为全局的请求实例。在 `request` 方法中，我们通过调用 `service(config)` 来发送请求，并返回一个 Promise 对象。在请求拦截器和响应拦截器中，我们可以进行一些公共处理，例如设置请求头、错误处理、数据转换等。

最后，在我们的业务代码中，我们可以直接调用 `getUserInfo` 和 `login` 方法来发送请求，例如：

import { getUserInfo, login } from '@/api/user.js'

// 获取用户信息
getUserInfo({ id: 1 }).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})

// 用户登录
login({ username: 'admin', password: '123456' }).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})

在上面的示例中，我们通过引入 `api/user.js` 文件来调用封装好的接口方法，并且可以处理请求成功和请求错误的情况。