get请求500_【微信小程序】- 封装wx.request请求

起因：

接手修改并维护一个“微信小程序”项目，看了下整个项目的代码，发现写的比较随意，可维护性差，所有的接口请求全都是用wx.request()写的，没有进一步封装，没统一捕获异常和错误提醒了。本着基于原有的代码封装request并最小程度的改之前所有的wx.request()代码。

原有代码：（看着就头疼，强迫症的估计都看不下去，所有的接口都是这样写，都不闲累的...）

其一：（success回调http状态200之类的执行）

wx

其二：（success回调需要通过statusCode来进行不同逻辑处理的代码）

wx

从上面的代码我们可以发现几点不合理的地方：

1. 每次都带同一个header: { 'Api-Ext': app.globalData.apiExt }。
2. url每次都拼接同一个域名：url: app.globalData.http + '/某接口地址'。
3. 多写dataType: 'json'，json格式是wx.request()默认的。
4. 多写method: 'GET'，也是默认的。
5. success回调里面每次都判断接口是否200，if (data.statusCode >= 200 && data.statusCode < 300){}。
6. 非200的接口没提醒，用户一接口异常，就一脸懵逼啥提醒都没。
7. 没做fail回调的错误提醒。
8. 每次都写关闭loading的代码： complete() {wx.hideLoading()}。

---

基于以上几点问题就自己尝试着封装一个request.js

改动后的代码:

request.js:

// app.js中获取不到getApp()

request.js的注意点：

1. 接口domain，由于app.js中调用不到getApp()实例，就没有这样写：

const 

改成这样写：app.js中调用request，额外传入其他参数：globalData，其他js中直接调用getApp()取到：

// app.js中获取不到getApp(), globalData需要传进来

2. 等异步wx.request()返回结果，直接关闭wx.hideLoading()；因为小程序中wx.showToast, wx.showLoading, 同时只能出现一个；wx.hideLoading()都会关闭2者的土司弹窗。也就不用每次request的时候都写complete来关闭弹窗：如：

complete

3. 设计其他参数：otherOptions.useSuccessCode的用意是：有的请求需要通过statusCode来处理不同的逻辑，就返回（response），正常成功请求的返回（data, response）（返回data是为了success中少写点代码：如：data = response.data; 返回response以防万一需要用到response）。

4. 函数开始得先合并请求参数newFetchOptions，把header中相同的“Api-Ext”写入，并把请求的url合并起来：newFetchOptions.url = `${globalData.http}${newFetchOptions.url}`。

5. wx.request请求是异步的，我们通过async/await来同步书写代码。把wx.request封装起来，返回Promise对象。并在函数内部把wx.request可能出现的错误捕获掉（其实这个try/catch可以不用捕获的，wx.request发生错误都捕获到fail()里了）。

function 

6. 非成功状态码的文本提醒，如果接口有返回提醒，则用接口的提醒，否则用messageCode中的提醒：

console

---

调用request.js的写法：

import 

相比之前的wx.request代码，简洁多了，而且请求一目了然，错误code都有统一提醒; 我们只需要刪除原有多余的代码就好，而不用去改原有代码的写法。做到更低代码量的重构改动。

---

总结：

重构思想：

1. 能复用的要尽量复用，少写多余重复的代码。
2. 要多多考虑到边界情况：如：otherOptions.isShowError是否要显示错误的toast弹窗；接口没有返回错误的message，let msg = codeMessage[statusCode] || '未知错误'，补足msg；预留额外参数：otherOptions。等等...
3. 要考虑到多种调用场景或情况。如：app.js中调用；success中通过statusCode执行不同逻辑。
4. 代码顺序最好用es6后的新语法来同步书写异步代码，命名尽量语义化，多写备注，才能一目了然，毕竟你的代码后面也会有人接手的。如： if(errMsg.includes('ok'))一看就知道是请求成功的情况。
5. 尽量封装好一些默认的行为，如：

function 

要想改动原有项目大量的代码，最好重构到不破坏原有代码的结构去精简代码（而且不是你自己的写项目，代码改多了，可能会出现很多意想不到的结果，反而得花更多的时间去排查错误），就这个request.js里面的坑还蛮多的；比如：

wx.request()返回的不是Promise对象；

app.js中获取不到getApp()实例，globalData就得额外传入；

真机wx.toast和showLoading只能同时允许一个出现，故请求完成全部关闭，以便后续能toast提醒；

小程序真机调试中：400，500等的httpCode都不会报异常，而且所有的异常都会阻塞代码进程，错误异常记得捕获。真机调试非常的头疼，可多写log输出。（调试时间花费了非常多...）

改这个也是头疼......