UniApp+Vue3.2+ts实现请求API配置

// 在 UniApp 项目中使用 Vue3.2 和 TypeScript 配置 API 请求
 
// 假设有一个 API 接口地址配置文件 api.config.ts
const API_BASE_URL = 'https://api.example.com/';
 
// 在 utils 文件夹中创建一个 http.ts 文件用于封装 HTTP 请求
import { AxiosInstance } from 'axios';
 
// 使用 Vue 的插件系统定义一个全局属性 $http
export default {
  install(Vue: any, options: any) {
    Vue.prototype.$http = axios.create({
      baseURL: API_BASE_URL,
      // 其他配置...
    });
  }
};
 
// 在 main.ts 中引入 axios 和 http.ts，并注册为 Vue 插件
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import http from './utils/http';
 
Vue.use(http);
 
const app = new Vue({
  ...App
});
app.$mount();
 
// 现在你可以在任何组件中使用 this.$http 来发送 API 请求了

在这个例子中，我们定义了一个 API 配置文件 api.config.ts，然后在 http.ts 文件中创建了一个 AxiosInstance 实例，并通过 Vue 插件的形式注册到了 Vue 应用中。在 main.ts 中引入并初始化了插件。这样，在应用的任何部分都可以通过 this.$http 来发送 HTTP 请求。这种方式提供了一个集中配置 API 请求的地方，并且使得在应用中发送请求变得更加方便和统一。