1.

原创文章，若转载请于明显处标明出处和相关链接https://blog.csdn.net/jiangkai528/article/details/80850460

2.

---------视频更新，可通过以下链接查看本篇文章视频教程------

微信小程序电商项目商品详情页开发实战之wx.request网络请求3.

前言：

4.

随着我们微信小程序电商项目教程视频的连载，我们已经讲了七节课了，不知道大家有没有认真看完呢。如果你认真看完了，我相信你已经轻松了解了Flex布局与CSS盒模型应用，WXML模板与WXSS应用，数据绑定与事件应用并在此过程中学会了电商项目商品列表和商品详情页等基本功能。但是，为了大家更容易入门，目前我们的课程还比较倾向于模板页面和样式的部分，还未涉及API的部分，仅一句话带过了一个名为wx.navigateTo的跳转页面API。

5.

-----------分割线------------

一、在下一节视频课开始前，我们先说一个非常重要的API，就是发起网络请求，也就是wx.request。6.

这是微信小程序官网API列表里面，位列第一位的API。

7.

下图是示例代码，wx.request(OBJECT)中的OBJECT是参数相关的描述，包括url、data、header、method、dataType、success、fail等。如果大家有网络开发的经验，对这个肯定不陌生，这和普通的HTTP请求的设定并无二致。我们先看一下，小程序官方提供的wx.requestAPI示例代码：

8.

如果我们在app.js里面的globalData对象里面，定义一个名为apiUrl的参数，即可以约定一个请求URL的根路径。那么上图我无需多言了，就是一个apiUrl/goods/get/${id}的这么一个网络请求。

9.

请求成功（success）后，我们判断一下服务器后台返回的code是否表明商品列表获取成功，并将data打印了一下日志。有同学可能会说了，这不是超简单的一个请求，和上面这个官方示例又没啥区别。

10.

那么我说，别着急啊，葫芦里面的卖的什么药，倒出来看看不就知道了。

三、要怎么优雅？11.

你想啊，我们有商品列表、商品详情、下单、订单列表等很多功能模块都要发起网络请求啊，如果我们让上述这种wx.request(OBJECT)请求，遍布我们的代码，会有什么问题？第一个感觉是，重复和冗余对么？第二，如果我们的请求是需要传递会话秘钥的，我们是不是要频繁的写秘钥获取的代码？第三，如果请求失败了，有没有方便的重试机制？第四，我们网络请求的代码是不是过于的分散，以致于不好维护？

12.

那么重点来了，如何解决上述四个问题呢？我们以商品详情页获取一个商品信息为例，展示我们优雅的方式

13.

我们在项目的api目录（和pages这个目录同级）下，利用面向对象的方式创建一个名为api-good.js的类。你会发现在这个Good（api-good）类中，并未有wx.request的踪影，仅仅定义了一个get（id，success,fail）方法，这个get（id，success,fail）方法里面约定了请求的URL地址，并直接调用了来自common-api的api.Get这个方法，请求失败或者成功，我们也直接用了传进来的success和fail函数进行了异步处理。那么是谁负责发起网络请求的呢？显而易见的，就是这个common-api.js里面的Get方法。至于这个common-api的api.Get这个方法，我们稍后再说。

14.

我们先看这个Good类有什么优势？以往对于商品详情页和列表页等功能，我们需要在"/pages/good/detail/index.js"、"/pages/good/list/index.js"等位置定义多个wx.request请求。但利用Good（api-good）类，我们可以将查询单个商品、商品列表、收藏或点赞商品等诸多和商品相关的网络请求管理起来，是不是避免了功能逻辑的网络请求过于分散的情况？

15.

接下来我们使用api-good的时候，在商品详情页"/pages/good/detail/index.js"里面引入，并new出来一个good对象得到一个Good实例，然后我们就可以直接调用good实例的get（id，success,fail）方法了

16.

获取数据成功或者失败，你都可以进行数据的逻辑处理了（比如将商品信息塞到全局的data{}对象里面的属性good:{}）。所以你应该发现了，我们的商品详情页"/pages/good/detail/index.js"里面的网络请求相对于前一个示例得到了极大简化，我们只需要关注逻辑处理即可，极大的解放了生产力有木有？并且，我们在api-good这个类将网络请求进一步抽象了。

17.

那么，我们还没有解决一些header参数（例如会话秘钥session_key），以及失败重试的机制对吧。所以，我们来看一下common-api这个类是怎么定义的？

四、起底背后功臣——工具库common-api18.

我们在libs目录（和pages这个目录同级）下，创建一个名为common-api的工具类，我们先看上文提到的Get方法是如何定义的（顺便加上Post方法）：

19.

我们先不管本地缓存（Storage），只看Get和Post方法，它们同时调用了GetData这个方法，并将自己对应的method（get/post）传递了进去。

20.

那么这个GetData是怎么实现的？我抽取部分代码我们一起看下，GetData里面调用了一个RequestData方法：

21.

所以你最终发现，我们的工具类里面还是落到了wx.request（OBJECT）这个微信官方的API，这里面包含了session_key的传递，至于session_key怎么获取和更新，以及请求重试机制我就不在这多讲了。

五、结论22.

为了更好的发起网络请求，我们最好将代码做一定的封装和抽象，这至关重要，也是大家走向高级工程师之路的过程。不过再说一句重点，我是工程师但不高级，哈哈哈。

23.

至于这样是不是优雅，我也不肯定，毕竟我这个不是唯一答案，欢迎大家批评指正，也欢迎大家提出其他解决方案，我们一起探讨。

后记24.

不知道大家有没有了解到我所讲的优雅，我基本上做了一个简短的介绍，可能文章和代码还不够丰满。不过没关系，以这篇文章为基础，我还会以视频的形式的讲解实战的。

25.

欢迎大家继续关注我，如果大家觉得我讲的还不错，欢迎大家帮我转发和收藏。

大家可以关注我微信公众号和头条号——“前端琅琊阁”查看更多开发连载视频。26.

或者直接向我提问：

27.

歌德说：“向着某一天终于要达到的那个终极目标迈步还不够，还要把每一步骤看成目标，使它作为步骤而起作用。”每天完成一小步，我们一起进步。直到有一天，会当凌绝顶，一览众山小。