uniapp vue3 请求接口封装

在UniApp中使用Vue3进行接口请求的封装可以按照以下步骤进行。

1. 创建一个文件，例如`api.js`，用于定义接口请求相关的函数。

import { createApp } from 'vue'
import { reactive } from 'vue'

const app = createApp({})

const state = reactive({
  // 定义一些全局的请求相关配置，如baseURL等
  baseURL: 'https://api.example.com',
  timeout: 10000,
})

// 定义接口请求函数
export const request = async (config) => {
  config.url = state.baseURL + config.url
  config.timeout = state.timeout
  
  try {
    const response = await app.config.globalProperties.$http(config)
    return response.data
  } catch (error) {
    throw new Error(error)
  }
}

2. 在`main.js`中进行拦截器和全局挂载的配置。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 在app.config.globalProperties上挂载$http方法，用于发送请求
app.config.globalProperties.$http = (config) => {
  // 在这里可以使用uni.request或者其他库进行实际的请求发送
  // 返回一个Promise对象
}

app.mount('#app')

3. 在需要使用接口的地方，引入`api.js`文件并调用接口请求函数。

import { request } from './api.js'

// 调用接口请求函数
request({
  url: '/example',
  method: 'get',
}).then((response) => {
  console.log(response)
}).catch((error) => {
  console.error(error)
})

通过以上步骤，你可以在UniApp中使用Vue3进行接口请求的封装。当然，你可以根据具体的需求进行更多的定制和封装。