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

 主要封装函数代码：

1. interface HttpOptions {
2.     url: string;
3.     method?: string;
4.     headers?: { [key: string]: string };
5.     data?: any;
6. }
8. class Http {
10.     private timeout: number;
11.     private baseUrl: string;
13.     public constructor() {
14.         this.timeout = 60 * 1000;
15.         this.baseUrl = 'http://localhost:8088/';
16.     }
18.     //全局设置地址
19.     public setBaseUrl(url: string) {
20.         this.baseUrl = url;
21.     }
23.     //全局设置超时时间
24.     public setTimeout(timeout: number) {
25.         this.timeout = timeout;
26.     }
28.     //小程序发送请求
29.     public async request(options: HttpOptions) {
30.         options.url = this.baseUrl + options.url;
31.         return this.completeRequest(options);
32.     }
34.     //小程序上传文件
35.     public async uploadFile(options: HttpOptions) {
36.         const { url, headers = { 'Content-Type': 'multipart/form-data' }, data } = options;
37.         return new Promise((resolve, reject) => {
38.             uni.uploadFile({
39.                 url: this.baseUrl + url,
40.                 header: headers,
41.                 files: data,
42.                 success: (res) => {
43.                     resolve(res.data)
44.                 },
45.                 fail: (err) => {
46.                     reject(err)
47.                 }
48.             })
49.         })
50.     }
52.     //完整路经的请求
53.     public async completeRequest(options: HttpOptions) {
54.         const { url, method = 'GET', headers = { 'Content-Type': 'application/json' }, data } = options;
55.         return new Promise((resolve, reject) => {
56.             uni.request({
57.                 url: url,
58.                 timeout: this.timeout,
59.                 method: method as 'GET' | 'POST',
60.                 header: headers,
61.                 data: data,
62.                 success: (res) => {
63.                     resolve(res.data)
64.                 },
65.                 fail: (err) => {
66.                     reject(err)
67.                 }
68.             })
69.         })
70.     }
71. }
73. //导出实例和类
74. export default new Http();
76. export { Http };

复制代码

利用方法

步调一：在main文件中全局依靠注入

1. import { createSSRApp } from "vue";
2. import App from "./App.vue";
3. //导入加载页面组件
4. import loading from "./component/loading.vue";
5. import drawer from "./component/drawer.vue";
6. import wxShare from "./util/wxShare";
7. //导入HTTP请求
8. import http from "./util/http";
9. export function createApp() {
10.   const app = createSSRApp(App);
11.   app.component("qgy-loading", loading);
12.   app.component("qgy-drawer", drawer);
13.   app.mixin(wxShare);
14.   //全局挂载http
15.   app.provide("$http", http);
16.   return {
17.     app,
18.   };
19. }

复制代码

步调二：在组件中导入

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

复制代码

步调三：设置全局设置

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

复制代码

步调四：调用方法

• request()：正常发送哀求
  
• uploadFile()：上传文件
  
• completeRequest()：可以设置完备url的路径发送哀求
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。