全栈工程师之路中级篇之小程序开发第二章第五节小程序中的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_