封装微信小程序的全局ajax

微信小程序中app.js的变量方法是可以通过getApp()暴露在其他页面的

通过getApp()我们可以封装ajax，这样就不用一个页面一个页面的去写request了

也不用一遍又一遍的去写重复的请求url头部

  1 // app.ts
  2 let _app: any
  3 App<IAppOption>({
  4   globalData: {
  5     url: "https://s.whaleng.com/t-go-server",
  6     shop: "xk",
  7     shopName: "xx商城",
  8     shopData: null,
  9   },
 10   onLaunch() {
 11     //设置指向app.ts的this,让app.ts中的函数能获取app中的数据方法1
 12     _app = this
 13   },
 14   /*弹窗提示 主要参数 title*/
 15   showToast(obj: any = {}): void {
 16     if (!obj.title) {
 17       wx.showToast({
 18         title: 'showToast函数请传入title!',
 19         icon: "none"
 20       })
 21       return
 22     }
 23     wx.showToast({
 24       title: obj.title || '',
 25       icon: obj.icon || 'none',
 26       image: obj.image || '',
 27       duration: obj.duration || 1500,
 28       mask: obj.mask || false,
 29       success: obj.success,
 30       fail: obj.fail,
 31       complete: obj.complete,
 32     })
 33   },
 34   /*提示后xx秒后跳转 主要参数 提示消息title 跳转类型type 跳转路径url*/
 35   tipsJump(obj: any = {}): void {
 36     let app = getApp() || _app;
 37     if (!app) {
 38       wx.showToast({
 39         title: 'tipsJump函数未获取有效this!',
 40         icon: "none"
 41       })
 42       return
 43     }
 44     if (!obj.title) {
 45       app.showToast({
 46         title: 'tipsJump函数请传入title!',
 47         icon: "none"
 48       })
 49       return
 50     }
 51     if (!obj.type) {
 52       app.showToast({
 53         title: 'tipsJump函数请传入跳转类型type!',
 54         icon: "none"
 55       })
 56       return
 57     }
 58     if (obj.type !== 'navigateBack' && !obj.url) {
 59       app.showToast({
 60         title: 'tipsJump函数请传入跳转url!',
 61         icon: "none"
 62       })
 63       return
 64     }
 65     app.showToast(obj)
 66     setTimeout(() => {
 67       switch (obj.type) {
 68         case 'switchTab':
 69           wx.switchTab({
 70             url: obj.url
 71           })
 72           break;
 73         case 'reLaunch':
 74           wx.reLaunch({
 75             url: obj.url
 76           })
 77           break;
 78         case 'redirectTo':
 79           wx.redirectTo({
 80             url: obj.url
 81           })
 82           break;
 83         case 'navigateTo':
 84           wx.navigateTo({
 85             url: obj.url
 86           })
 87           break;
 88         case 'navigateBack':
 89           if (obj.delta) {
 90             wx.navigateBack({
 91               delta: obj.delta
 92             })
 93           } else {
 94             wx.navigateBack()
 95           }
 96           break;
 97         case 'custom':
 98           if (obj.custom) {
 99             obj.custom()
100           }
101           break;
102       }
103     }, obj.time || 1500)
104   },
105   /*显示模态对话框 主要参数 title content 成功调用方法 主要用于确认是否删除 是否跳转页面*/
106   showModal(obj: any = {}): void {
107     wx.showModal({
108       title: obj.title,
109       content: obj.content,
110       showCancel: obj.showCancel || true,
111       cancelText: obj.cancelText || '取消',
112       cancelColor: obj.cancelColor || '#000000',
113       confirmText: obj.confirmText || '确定',
114       confirmColor: obj.confirmColor || '#576B95',
115       editable: obj.editable || false,
116       placeholderText: obj.placeholderText || '请输入文本',
117       success(res) {
118         if (obj.success) {
119           obj.success(res)
120         }
121         if (res.confirm) {
122           /*用户点击确定时*/
123           if (obj.confirm) {
124             obj.confirm()
125           }
126         } else if (res.cancel) {
127           /*用户点击取消时*/
128           if (obj.cancel) {
129             obj.cancel()
130           }
131         } else if (res.content) {
132           /*当editable为true，用户输入文本时*/
133           if (obj.editableContent) {
134             obj.editableContent()
135           }
136         }
137       },
138       fail(err) {
139         if (obj.fail) {
140           obj.fail(err)
141         }
142       },
143       complete(res) {
144         if (obj.complete) {
145           obj.complete(res)
146         }
147       }
148     })
149   },
150   ajax: {
151     get(obj: request): void {
152       obj.method = 'GET'
153       _app.ajax.request(obj)
154     },
155     post(obj: request): void {
156       obj.method = 'POST'
157       _app.ajax.request(obj)
158     },
159     //接口请求
160     request(obj: request): any {
161       let app = getApp() || _app;
162       if (!app) {
163         wx.showToast({
164           title: 'request函数未获取app!',
165           icon: "none"
166         })
167         return
168       }
169       //是否有加载效果
170       if (obj.loading) {
171         wx.showLoading({
172           title: obj.loadingText || '加载中',
173         })
174       }
175       //处理请求头
176       if (!obj.header) {
177         obj.header = {}
178       }
179       let accessToken = wx.getStorageSync('accessToken')
180       Object.assign(obj.header, {
181         "access-token": accessToken || '',
182         "shop": app.globalData.shop || ''
183       })
184       //返回promiase
185       return new Promise((req, rej) => {
186         wx.request({
187           url: app.globalData.url + obj.url,
188           data: obj.data,
189           header: obj.header,
190           timeout: obj.timeout,
191           method: obj.method,
192           dataType: obj.dataType,
193           responseType: obj.responseType,
194           enableHttp2: obj.enableHttp2,
195           enableQuic: obj.enableQuic,
196           enableCache: obj.enableCache,
197           enableHttpDNS: obj.enableHttpDNS,
198           httpDNSServiceId: obj.httpDNSServiceId,
199           enableChunked: obj.enableChunked,
200           forceCellularNetwork: obj.forceCellularNetwork,
201           success: (res: any) => {
202             if (res.statusCode == 200) {
203               switch (res.data.code) {
204                 case 200:
205                   req(res)
206                   break;
207                 case 400:
208                   app.showToast({ title: res.data.msg || '服务器无法识别请求!' })
209                   rej(res)
210                   break;
211                 case 401:
212                   app.tipsJump({ title: res.data.msg || '未认证，请登录！', type: "reLaunch", url: "/pages/login/index" })
213                   rej(res)
214                   break;
215                 case 403:
216                   app.showToast({ title: res.data.msg || '暂无权限！' })
217                   rej(res)
218                   break;
219                 default:
220                   app.showToast({ title: res.data.msg || '服务器繁忙，请稍后重试！' })
221                   rej(res)
222                   break;
223               }
224             } else {
225               app.showToast({ title: res.data.msg || '服务器繁忙，请稍后重试！' })
226               rej(res)
227             }
228           },
229           fail: (err) => {
230             app.showToast({ title: err.errMsg || '请求失败，请稍后重试！' })
231             rej(err)
232           },
233           complete: (data) => {
234             if (obj.complete) {
235               obj.complete(data)
236             }
237             if (obj.loading) {
238               wx.hideLoading()
239             }
240           }
241         })
242       })
243     },
244     //文件上传，调用选择文件图片之类的WXapi后调用
245     uploadFile(obj: uploadFile): any {
246       let app = getApp() || _app;
247       if (!app) {
248         wx.showToast({
249           title: 'request函数未获取app!',
250           icon: "none"
251         })
252         return
253       }
254       //是否有加载效果
255       if (obj.loading) {
256         wx.showLoading({
257           title: obj.loadingText || '正在上传文件',
258         })
259       }
260       //处理请求头
261       if (!obj.header) {
262         obj.header = {}
263       }
264       let accessToken = wx.getStorageSync('accessToken')
265       Object.assign(obj.header, {
266         'Content-Type': 'multipart/form-data',
267         'access-token': accessToken || '',
268         'shop': app.globalData.shop || ''
269       })
270       //返回promiase
271       return new Promise((req, rej) => {
272         wx.uploadFile({
273           url: app.globalData.url + obj.url,
274           filePath: obj.filePath,
275           name: obj.name,
276           header: obj.header,
277           formData: obj.formData,
278           timeout: obj.timeout,
279           success: (res: any) => {
280             if (res.statusCode == 200) {
281               req(JSON.parse(res.data))
282             } else {
283               app.showToast({ title: res.data.msg || '服务器繁忙，请稍后重试！' })
284               rej(res)
285             }
286           },
287           fail: (err: any) => {
288             app.showToast({ title: err.errMsg || '请求失败，请稍后重试！' })
289             rej(err)
290           },
291           complete: (data) => {
292             if (obj.complete) {
293               obj.complete(data)
294             }
295             if (obj.loading) {
296               wx.hideLoading()
297             }
298           },
299         })
300       })
301     },
302     //文件下载，下载文件资源到本地,get请求
303     downloadFile(obj: downloadFile): any {
304       let app = getApp() || _app;
305       if (!app) {
306         wx.showToast({
307           title: 'request函数未获取app!',
308           icon: "none"
309         })
310         return
311       }
312       //是否有加载效果
313       if (obj.loading) {
314         wx.showLoading({
315           title: obj.loadingText || '正在下载文件',
316         })
317       }
318       //处理请求头
319       if (!obj.header) {
320         obj.header = {}
321       }
322       let accessToken = wx.getStorageSync('accessToken')
323       Object.assign(obj.header, {
324         'access-token': accessToken || '',
325         'shop': app.globalData.shop || ''
326       })
327       return new Promise((req, rej) => {
328         wx.downloadFile({
329           url: app.globalData.url + obj.url,
330           filePath: obj.filePath,
331           header: obj.header,
332           timeout: obj.timeout,
333           success: (res: any) => {
334             if (res.statusCode == 200) {
335               req(JSON.parse(res.data))
336             } else {
337               app.showToast({ title: res.data.msg || '服务器繁忙，请稍后重试！' })
338               rej(res)
339             }
340           },
341           fail: (err: any) => {
342             app.showToast({ title: err.errMsg || '请求失败，请稍后重试！' })
343             rej(err)
344           },
345           complete: (data) => {
346             if (obj.complete) {
347               obj.complete(data)
348             }
349             if (obj.loading) {
350               wx.hideLoading()
351             }
352           },
353         })
354       })
355     }
356   }
357 })

View Code

在其他页面调用也很简单

    app.ajax.post({url:"/common/getAllAppEnumType"}).then((res:any)=>{
      console.log(res)
    })
    app.ajax.get({url:"/common/getAllAppEnumType"}).then((res:any)=>{
      console.log(res)
    })