微信小程序开发——使用promise封装异步请求

Posted 2021-01-09 逍遥云天

前言：

有在学vue的网友问如何封装网络请求，这里以正在写的小程序为例，做一个小程序的请求封装。

关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档：wx.request(Object object)。

如果直接使用官方提供的个Api，那么每次在进行网络请求调用时，我们都要按官方文档上说的那样传递需要设置的请求参数，然后对不同的请求相应结果做不同的处理。但是前端同服务器端的接口请求中有大部分的请求参数以及响应结果处理都是很类似的，也就没有必要对所有请求代码都重新敲敲一遍，那么对原生的网络请求进行封装就有必要了。

网络请求封装：

如果接口比较多，可以创建两个文件，完成网络请求的封装：

1. http.js

 1 /**
 2  * 封装http 请求方法
 3  */
 4 const apiUrl = "https://www.xxx.cn"; //服务器api地址
 5 const http = (params) => {
 6   //返回promise 对象
 7   return new Promise((resolve, reject) => {
 8     wx.request({
 9       url: apiUrl + params.url,//服务器url+参数中携带的接口具体地址
10       data: params.data,//请求参数
11       header: params.header || {
12         "Content-Type": "application/x-www-form-urlencoded"//设置后端需要的常用的格式就好，特殊情况调用的时候单独设置
13       },
14       method: params.method || \'POST\',//默认为GET,可以不写，如常用请求格式为POST，可以设置POST为默认请求方式
15       dataType: params.dataType,//返回的数据格式,默认为JSON，特殊格式可以在调用的时候传入参数
16       responseType: params.responseType,//响应的数据类型
17       success: function(res) {
18         //接口访问正常返回数据
19         if (res.statusCode == 200) {
20           //1. 操作成功返回数据,原则上只针对服务器端返回成功的状态（如本例中为000000）
21           if (res.data.retCode == "000000") {
22             resolve(res.data)
23           } else if(params.url == "/order/result" && res.data.retCode == "800020") {//支付结果未知      
24             //需要特殊处理的接口，可以单独列出来返回数据
25             resolve(res.data)
26           } else {
27             wx.showToast({
28               icon: "none",
29               title: res.data.retMsg
30             })
31             console.log(res.data)
32           }
33         } else {
34           //2. 操作不成功返回数据，以toast方式弹出响应信息，如后端未格式化非操作成功异常信息，则可以统一定义异常提示
35           var errMsg = res.data.message
36           errorToast();
37           console.log(res.data)
38         }
39       },
40       fail: function(e) {
41         errorToast();
42         reject(e)
43       }
44     })
45   })
46 }
47 module.exports = {
48   http: http
49 }

注：上边代码中已经注释比较详细了，就不再赘述了。

2. api.js

 1 import {
 2   http
 3 } from \'../utils/util.js\'
 4 
 5 var url = {
 6   userLogin: "/user/login", 
 7   getUserPhone: "/user/phone", 
 8   ...
 9   userCardReceive: "/card/receive" 
10 }
11 module.exports = {
12   userLogin(code) {
13     return http({      
14       url: url.userLogin,
15       data: { code: code},
16       header: {
17         "Content-Type": "application/x-www-form-urlencoded"
18       }
19     })
20   },
21   getUserPhone(params) {
22     return http({
23       url: url.getUserPhone,
24       data: params
25     })
26   },
27   ...
28   userCardReceive() {
29     return http({
30       url: url.userCardReceive,
31       method:"GET"
32     })
33   },
34 }

注：以函数封装请求，并以回调函数的方式返回请求结果。具体参数可根据需要单独设置。

调用方式：

1       http.getUserPhone(params).then(data => {
2         if (data) {
3             //返回结果的处理逻辑
4             ...
5         }
6       })        

个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt/p/9715367.html