微信小程序的请求函数封装（ts版本，uniapp开发）

 主要封装函数代码：

interface HttpOptions {url: string;method?: string;headers?: { [key: string]: string };data?: any;
}class Http {private timeout: number;private baseUrl: string;public constructor() { this.timeout = 60 * 1000;this.baseUrl = 'http://localhost:8088/';}//全局设置地址public setBaseUrl(url: string) {this.baseUrl = url;}//全局设置超时时间public setTimeout(timeout: number) {this.timeout = timeout;}//小程序发送请求public async request(options: HttpOptions) {options.url = this.baseUrl + options.url;return this.completeRequest(options);}//小程序上传文件public async uploadFile(options: HttpOptions) {const { url, headers = { 'Content-Type': 'multipart/form-data' }, data } = options;return new Promise((resolve, reject) => {uni.uploadFile({url: this.baseUrl + url,header: headers,files: data,success: (res) => {resolve(res.data)},fail: (err) => {reject(err)}})})}//完整路经的请求public async completeRequest(options: HttpOptions) {const { url, method = 'GET', headers = { 'Content-Type': 'application/json' }, data } = options;return new Promise((resolve, reject) => {uni.request({url: url,timeout: this.timeout,method: method as 'GET' | 'POST',header: headers,data: data,success: (res) => {resolve(res.data)},fail: (err) => {reject(err)}})})}
}//导出实例和类
export default new Http();export { Http };

使用方法

步骤一：在main文件中全局依赖注入

import { createSSRApp } from "vue";
import App from "./App.vue";
//导入加载页面组件
import loading from "./component/loading.vue";
import drawer from "./component/drawer.vue";
import wxShare from "./util/wxShare";
//导入HTTP请求
import http from "./util/http";
export function createApp() {const app = createSSRApp(App);app.component("qgy-loading", loading);app.component("qgy-drawer", drawer);app.mixin(wxShare);//全局挂载httpapp.provide("$http", http);return {app,};
}

步骤二：在组件中导入

import { inject, onMounted } from 'vue'
import { Http } from '@/util/http';const http:Http|undefined = inject('$http');

步骤三：设置全局配置

//设置全局配置
http.setBaseUrl("http://localhost:8088/")
http.setTimeout(60 * 1000)

步骤四：调用方法

1. request()：正常发送请求

2. uploadFile()：上传文件

3. completeRequest()：可以配置完整url的路径发送请求