全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise

上一节课最后,我们遇到了一个警告。


说我们太过频繁的调用serData了,因为我们这个页面的三部分数据是通过三个接口获取的。

所以我们分别在三个接口返回的时候调用了数据绑定。

但是过于频繁的调用setData很容易引起性能问题。

要理解为什么会引发性能问题,我们要先看一下setData的工作原理。

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/performance/tips.html#setdata

(官方说明)小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的。同一进程内的 WebView 实际上会共享一个 JS VM,如果 WebView 内 JS 线程正在执行渲染或其他逻辑,会影响 evaluateJavascript 脚本的实际执行时间,另外多个 WebView 也会抢占 JS VM 的执行权限;另外还有 JS 本身的编译执行耗时,都是影响数据传输速度的因素。

对于搞不太懂的朋友,那么可以先不理会,先记下,要尽量的减少调用setData就可以了。

回到我们的问题中。

我们有三个请求,那我们可以等到三个请求的数据全部完成之后再调用setData,我们先按这个思路实现。


我们在第一个请求的回调函数里面发起了第二个请求的回调函数,同样的在第二个请求的回调函数里面发起了第三个回调函数。

保存代码,运行。返现警告解除了。说明我们这个方案是可以解决问题的。

但是,大家都知道这样的嵌套关系,不仅不利于阅读,而且很容易不小心就导致一些很难察觉的问题。

我在很早的教程中就提到了,用promise代替回调函数的概念。http://blog.csdn.net/onil_chen/article/details/51099443

所以这里我们依旧使用这个思路进行。

es6原生是支持promise的,但是小程序不支持。

所以我们这里需要引入第三方库。

比较好用的有Q.js和bluebird.js

这里我们使用bluebird.js来实现。

下载地址:https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js

我是直接浏览器打开,然后本地新建一个文件保存下来的。

首先我们在index.js中引入文件


然后改写一下getMovieList方法


最后在onload中修改调用


源文件 百度云 链接:http://pan.baidu.com/s/1boSi0zX 密码:87ed
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。
如果你觉得本文对你有帮助,请扫描文末二维码,支持博主原创。
希望大家关注我的个人公众号ionic_


原文地址:https://www.cnblogs.com/xiaohuoni/p/7642267.html