你好，我是李艺。

上节课我们主要学习了如何使用数据预拉取和周期性更新这两个能力，以及如何创建云函数，还有如何使用并发复合命令的一个竞赛模式，这节课我们学习如何优化小程序向后端接口发出的网络请求。

先看一下问题，之前我们在网络请求这件事上优化的是数据以及获取的渠道，这节课我们是想优化网络请求对象本身，对于同样的数据，如何可以更快地从一端传输到另一端，wx.request是微信小程序，向后端发起网络请求的接口已经提供了一些优化参数，下面我们就一一看一下这些优化参数：

第一个是enableCache是缓存内容，相同请求它优先读取本地的内容 这个参数是可以开启的；

第二个是enableHttp2 这个参数是尝试使用HTTP2协议，如果这个后端服务器支持的话，这个参数也可以开启，前提是我们后端WebServer有对HTTP2协议的一个支持；

第三个参数是enableQuic，这是尝试使用Quic协议，Quic是被称为第三代网络协议，它拥有更好的网络传输性能，这个参数也可以开启，与enableHttp2一样，也需要先让后端WebServer开启相关的一个支持；

第四个是这个enableHttpDNS，是开启HttpDNS服务，它是与httpDNSServiceId参数一起使用的，在使用的时候我们需要先填写HttpDNS服务商的一个id，这个功能主要是为了防止域名被第三方劫持和解决域名解析异常而设计的，如果这个用户设备它使用的网络代理，它网络请求还可能会失败，所以这个参数对于网络请求优化用处不是很大，在优化的时候我们一般不选择它；

最后一个优化参数enableChunked，它是开启客户端与服务端的一种分块传输编码，分块传输编码是超文本传输协议中的一种数据传输机制，它允许HTTP将这个WebServer发给客户端的数据分成多个部分相继传输，这个参数它是针对HTTP1.1的优化，在HTTP2里面如果有分包传输机制的话，这个参数它其实已经不是那么重要了，这个参数它设置的意义也就不是很大了，综上所述 我们开启前三个参数的一个优化就可以了，下面我们看项目实践。

首先看实践一，在小程序端开启enableCache等网络优化参数。

首先我们需要在optimus目录下面修改request.js文件把相关的网络优化参数添加进去，三个网络优化参数它们可以同时开启，即使我们这个服务器端不支持也没有关系，这个代码它是不会报错的。

下面我们看实践一的代码演示。

首先我们看一下我们最终的实现的一个代码，找到optimus的目录，下面有一个request.js在这个地方，这些是我们要用到网络请求的一个参数，将这些参数然后全部复制一下到我们的目前的项目下面，找到同样的一个文件，目前文件竟然目前不存在，我们就先创建一个就好了，将我们已经写好的这个代码这个文件request.js拷贝一份放在我们的目前的项目底，我们看一下这个文件，这是一个基类地址对吧，BASE_URL是我们基类地址，然后这个地方是我们网络参数的优化，一共是三个 开启了三个，下面是我们的一个返回，返回了一个Promise，在这个地方我们没有再去引入和调用promisify这样的一个工具函数，而是直接将它里边的它所写的代码直接就按照它自己的这种形式 格式，有需要又重写了一下，返回这样的一个东西就可以了。

这个代码写完以后，接下来我们要做一个改写，就是我们目前所有的调用wx.request接口的一个地方都可以进行一个改写，VSCode里面进行修改，选择这个目录查找一下，所有的调用这个接口代码都有哪些，这个地方是商品详情页里面有一个调用，在这个地方可以将它引入进来default:request等于require，然后是optimus，request.js，这样就可以了，这个方法引入以后，在我们下面这个地方就不需要进行一个转化了，promisify这个工具函数就不需要了，直接拿它替代就可以了 这样就可以了，因为我们这个地方它已经不需要了，所以它这个地方变灰了，这个我们可以删掉了。

下面我们再看剩余的其他的地方需要修改的，这是我们的主页，在主页这个地方也有需要 我们先把它引入，然后是library optimus request.js将这个方法，首先是把这个地方给它替掉，这个地方也给它替掉，因为我们这个参数它是一致的，所以我们只需要替换掉就可以了不需要修改其他的内容，这个文件好像就改完了，promisify它也不在，这个不是 不要一下子给改多了，这个不是 这个是我们的另外的一个文件，不要一下子给改错了，这个在我们的文件里面当前的文件 这是我们组件，秒表组件 就调用了后端接口的秒表组件，这个里面还没有，上面那个是不需要了，我们上面那个可以删掉。然后这个也需要引入，如果是我们忘记引入的话 也没有关系，稍后我们测试的时候它会测试不通过的，到时候我们再修改就可以。等于require，library optimus，request.js，我们现在写的路径全部是相对路径，如果是我们写的全局的require方法好用的话，那么在引入这些模块的时候直接拷贝就可以了，因为使用都是相对地址，它这个路径是一样的，如果是支持绝对路径的话，这一类的代码写起来会更加的简单，这个文件不需要改。我们现在看这个文件，这个文件只有它一个地方有这个使用，所以我们只需要在这个地方把它引入就行了，别的地方不需要，然后是library，optimus，request.js，将这个给它替掉这样就可以了，这个地方这是通道的标识 不需要修改，现在所有的代码都已经改完了。

现在单击编译按钮看一下它的运行表现，好像没有报错，看一下Network面板，接口的调用也没有问题，再看一下我们另外的商品页，商品页也有接口的调用，这个也没有问题，还有就是我们的组件，我们看一下我们现在用的是哪一个组件，看一下我们主页里面的配置，现在是nw 就是调用后端接口的组件，我们直接测试就可以，看到接口的调用也没有问题，这个代码演示我们就说到这里。

下面我们看实践二，在服务器端开启对HTTP2和Quic的支持。

在服务器端我们选择使用的是Go语言的Iris框架，在这个框架里面让WebServer支持Quic和HTTP2相对比较简单，相比原来的一般端口启动，修改以后我们采用443端口启动，引入HTTP3这个模块以后可以开启Quic协议，在Iris框架里面，当我们开启了TLS协议支持以后，同时也会默认开启对HTTP2的支持，是一个一举两得的事情，在我们这个代码里面有一个环境变量是PORT，它是在package.json文件里面定义的，在这个文件里面不同的小脚本它对应着不同的启动场景，当我们使用yarn tls脚本的时候，我们是在443端口启动我们后端程序，当我们使用yarn dev脚本启动的时候则是在3000端口附带热加载启动这个程序，使用443端口重新启动后端程序以后，我们不方便在浏览器里面去测试这个接口地址了，可以使用curl检测我们服务是否正常。如果我们在终端里面看到有正确的数据输出，那就说明我们WebServer对相关协议的开启是正常的，下面就是改写小程序端的request.js代码了。

将所有的URL地址就使用replace这个方法替换一下，改成新的服务器地址，同时还有另外一种更通用的做法，是我们在这个代码里面编写URL的时候只写不包含域名的绝对地址，这个基地址就写在某一个地方，方便我们在线下以及线上这个环境之间进行一个快速的切换。

下面我们看实践二的代码演示。

这个支持修改我们的后端代码，也就是server目录下的一个代码，我们先看一下我们目前的代码，在server目录下打开我们的main.go主文件，这就是我们目前的一个代码，下面我们看一下我们最终的编写的一个示例代码，打开server选择main.go这个文件，下面这一段是关于端口以及相关的协议启动的一个配置了，其中上面还有一个http3这样的这个模块我们是需要先安装的，然后我们到我们目前的项目的目录下面，这就是我们当前的后端代码的目录，安装的时候我们要用go get添加我们的模块，进行安装，安装以后会在我们本地的mod文件里面去添加一个模块依赖。

我们看一下这个代码，在这个文件里面对吧，这里面有很多模块依赖，然后这地方已经装完了，已经返回了，我们可以看一下装在了哪里，看一下我们Go语言的配置，我们的模块现在是开启的吗，模块变量是开启的，先不要管它 我们先把我们的代码给它拷贝过来看它能不能运行，这个是我们需要引用 需要模块先引用进来，然后才可以使用它，看使用代码，主要在这一部分，回到我们源码里面把它粘过来，这个地方有一些重复，这是我们原来的代码，这个代码可以先注掉它，用下面这个，然后这个地方有一个PORT，我们是通过这个Getenv取的是系统的一个系统的环境变量，这个变量我们是在package.json这个地方设置的，我们可以看一下这个地方有一个export，这个变量等于true，同时export PORT等于8080，然后在这个地方进行设置的。

接下来我们看最终源码里面对小脚本的一个设置，这是我们新的小脚本tls的一个设置，把这个给它拷贝一下，然后在我们新文件里面把它给粘过来，这两个它是有一点点区别的，首先第一个区别就是我们PORT环境变量变成了443，然后后面我们这个地方去掉了热加载的支持，直接拿run main.go文件进行运行，在443端口上进行启动我们这个程序，这是这样的一个修改以后，我们再看一下目前源码是这样一个东西，下面将我们的程序 我们已经启动的程序给它停掉，按Ctrl C或者是Command C给它停掉，停掉以后我们执行我们tls小脚本，这个地方它会有打印，把我们执行的小脚本会以灰色文字打印出来，已经启动成功了 到这个地方了，当然这个链接我们其实不方便在本地进行调试，我们可以拿这个链接在浏览器里面可以试一下，随便找一个网址，就拿这个网址好了拷贝一下放在浏览器里面，把3000端口给它去掉，同时前面这个协议给它改成https，但由于浏览器的限制，所以我们直接这样去测试，其实它倒不是很好测，所以在这个地方我们可以用另外一种方式，就是用curl来测试。

看一下我们这个里面是有测试实例的，在下面这个地方我们把这个测试代码给它拷贝一下直接放在集成终端里面，放在任何一个地方都可以，然后跑一下，看到没有，这些内容已经返回了，它能返回内容就说明它的调用成功了，其他的接口也是同样的一个测试方法，只不过它这个地址和协议修改了，我们可以以这样的一种方式用curl进行测试，说明现在我们WebServer已经支持了http2的协议，同时我们这个程序里面我们可以看一下，因为目前的话我们已经引入了http3，其实就是Quic一个模块用它来启动，其实它本质上现在对Quic也已经有了支持，现在我们要再修改一下我们小程序端，因为我们小程序端也有对后端接口的一个调用，现在我们后端接口已经变化了，所以我们前端也要做一些修改。

找到request.js，好在我们现在所有的请求都在request.js文件里面，这个地方我们可以用这个地方有个判断，如果它含有这个 然后我们把request然后给它替掉，替掉之后变成我们这个，但是这个地址我们其实可以多备几个，123可以多备几个，然后默认是3000的，这是一个 然后下面这个我们可以改一下，改成3000端口给它去掉，然后前面加上https 加个s，现在就改成这个地址，刷新一下看看它现在能不能正常运行，看到没有，这个地址已经返回了，这个也改了 已经返回了没有问题。

另外还有一种情况，如果我们要在手机设备上然后去测试我们接口的话，还需要将我们这个网址修改一下，可以查看一下我们本机的IP 局域网的IP，这个是我的局域网IP，把它拷贝一下放在我们的这个文件里面，把这个地方给它替掉，如果你要用3000端口的话就是这样的一种形式，如果你要是用附带http2的这样的协议的话，就把这个给它改成这个IP地址，当然这个IP地址每次它网络环境变的话它不一样，每次可以查看一下，然后再进行设置，改成这个网址之后我们可以测一下，因为我们现在这个它是这样的，它启用的不是3000端口，是443端口，所以我们要改成这个 然后再进行测试一下，现在就可以了。

其实我们用这种链接的话可以在手机上然后扫码进行测试，不然的话它在手机设备上它访问不到我们电脑上的程序，这个数据是拉取不到的，但是在一般情况下，我们为了快速调试，我们还是使用这样一种方式，这种方式其实更简洁而且它还附带热加载的支持，所以我们一般情况下就是要用yarn dev，还是要用这个端口来进行开发调试，我们这个地方为了快速切换，所以我们特意将PORT然后写成了一个环境变量，然后在脚本里面进行定义的，这样方便我们以脚本名称然后进行一个快速的切换，切换以后这个地址也改了，然后现在我们再编译一下，为什么这个变成红色了，之前我们提到了因为它附带热加载以后，它第一次请求是失败的，第一次请求它是激活，你第二次请求就正常了。关于代码演示我们就说到这里。

最后我们来总结一下，小程序的后端接口要求必须使用HTTPS协议，Go语言的Iris框架，在启用支持TLS协议以后，它顺带也支持了HTTP2这样的一种协议，这是一举两得的一个好事。小程序这个内部调用这个云函数，它使用既不是这个HTTP2协议也不是这个Quic协议，而是经过这个微信团队经过长链接，复用优化之后的一个私有协议，使用这种私有协议的好处，我们可以列举一下它包括也不限于以下这些几点：

第一点它不需要鉴权，鉴权是微信自动添加的；

第二点就是它不需要域名，也不需要购买第三方的云服务器；

第三点就是在很多地方都受支持，比如在数据预拉取与周期性更新，前面我们提到了它也支持配置为云函数；

综上所述 如果是这个业务不复杂的话，后端我们优先选择使用云开发，这种方式自带网络参数的优化，如果必须要拥有完全自控的一个后端的话可以考虑使用Go语言以及Iris框架，同时在这个后端开启这个TLS Quic以及这个HTTP2等这些协议都非常的方便，这节课我们就讲到这里，上面我们看到的这些网址是本课所涉及的这些文档地址。

点击查看开放文档：

• 性能与体验 /网络调优
• 网络 /发起请求 /wx.request

这节课我们主要学习了如何优化网络请求参数，下节课我们学习如何使用调试工具辅助定位代码的性能问题。

最后说一下思考题，这里有个问题请你思考一下，当我们感觉这个程序特别卡顿的时候，我们应该如何判断我们目前小程序代码的一个性能，在微信开发者工具里面有哪些现成的工具可以帮助我们验证我们对这个代码的性能判断，这个问题先留给你思考一下，下节课我们一起深入探讨一下这个问题。