上一節課最后，我們遇到了一個警告。

說我們太過頻繁的調用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

總結

以上是生活随笔為你收集整理的全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。