前言

如果你恰巧使用的是bluebird，又恰巧你只是在模擬器上測試或者你的真機是iOS系統(tǒng)，你有必看看到最后，因為在Android的真機下，bluebird會報錯

建議閱讀對象: 在小程序中使用Promise或者使用bluebird報錯的對象。

如果你現(xiàn)在還不知道Promise是什么，建議先去查看es6后再看，不然你不知道我在解決的問題

問題描述

2016.11.22微信官方開發(fā)工具更新了，版本為0.11.112200，結(jié)果在上面跑小程序代碼的時候，發(fā)現(xiàn)報錯Promise is not a constructor.
初步判斷應(yīng)該是Promise在小程序代碼中不能直接使用。

問題查找

• 查看官方更新文檔34

F:修復(fù) 同客戶端保持一致，移除 Promise，開發(fā)者需要自行引入兼容庫

• 官方建議引入Promise庫57

這種轉(zhuǎn)換只會幫助開發(fā)處理語法上問題，新的 ES6 的 API 如 Promise等需要開發(fā)者自行引入 Polyfill 或者別的類庫。

解決方案

先說正確的解決方案，但是心酸的bluebird，你可以繼續(xù)看下去，坑:別用bluebird

既然官方給出了相關(guān)意見，那么我們就采用官方的意見自行引入 Polyfill,如果你不小心引入了bluebird庫，請看到最后。

• 找?guī)?br /> 我找到了es6-promise-polyfill: https://github.com/stefanpenner/es6-promise80 min版只有6KB,很合適。

• 使用
  常規(guī)使用即可

  1. import Promise from 'es6-promise.min';
  2. export const request = (method = 'GET') => (url, data) => {
  3. return new Promise((resolve, reject) => {
  4. wx.request({
  5. url,
  6. data,
  7. method,
  8. header: {
  9. 'Content-Type': 'application/json'
  10. },
  11. success: function(res) {
  12. resolve(res.data)
  13. },
  14. fail: function(err) {
  15. reject(err)
  16. }
  17. });
  18. })
  19. }
  20. export const get = request('GET');
  21. export const post = request('POST');
  22. export const put = request('PUT');
  23. export const del = request('DELETE');
  24.  

• 大公告成

坑:別用bluebird

• 隱蔽的Android真機錯誤

如果你恰巧使用的是bluebird，又恰巧你只是在模擬器上測試或者你的真機是iOS系統(tǒng)，那么你不會發(fā)現(xiàn)異樣，但是你用android機器一測試，就會報錯了。

• 錯誤分析

  1. 引入promise庫，如bluebird

  2. 用小程序官方的方法寫

由于第二個方案的復(fù)用性不夠好，第一選擇肯定是第一個方案，so，我開始找到bluebird引入到項目代碼中，如下：

1. // request.js
2. var Promise require('bluebird.min');

文件結(jié)構(gòu)如下：

1. /requests
2. /request.js
3. /bluebird.min.js

引入進去后，在開發(fā)工具上跑起來沒問題，但是在手機（安卓）上預(yù)覽的時候，發(fā)現(xiàn)有如下報錯：

1. TypeError: Cannot read property 'createElement' of undefined
2. ...

于是以為是bluebird的引入方式有問題，嘗試用import，還是報同樣的錯誤。

1. import Promise from 'bluebird.min';

• 錯誤原因
• 通過查看bluebird源碼發(fā)現(xiàn)，其中有關(guān)于對dom操作的代碼，導(dǎo)致在小程序中跑不通。
• 解決方案是：

到這里你就可以回到文章開頭的解決方案，老實的使用es-6.promise.min.js吧

找到一個輕量級、只包含promise異步的核心代碼的promise庫來引入。 通過小伙伴的幫助，找到es-6.promise.min.js引入進去，終于在手機上跑通了。。。

在手機上運行成功的興奮之余，題主還用iphone真機測試了一番，發(fā)現(xiàn)在iphone上直接引入非輕量級的bluebird.min.js也是可行的，當(dāng)然引入輕量級的es-6.promise.min.js也是沒問題的。 需要注意的是bluebird.min.js有70多kb，es-6.promise.min.js有6kb，對于限制代碼不超過1024kb的小程序而言，輕量級能給項目省下更多的空間，且兼容性更強。

今天，有朋友反映說，我的微信小程序的例子在andriod真機環(huán)境下運行出錯，研究調(diào)試了半天，發(fā)現(xiàn)原來是使用的bluebird.js(Promise實現(xiàn)庫)導(dǎo)致的。

由于小程序框架最近的更新中移除了原生Promise的支持，喜歡使用Promise特性的開發(fā)者都會去引入其他的第三方Promise庫來替代，bluebird.js是一個性能不錯，特性又豐富的Promise實現(xiàn)庫，所以大家都愛用。不過，由于bluebird.js中有些代碼還是用到了document對象上的方法，在iOS的真機JavascriptCore環(huán)境中，貌似這些代碼并不會被觸及到，而在Android真機環(huán)境中，就會被執(zhí)行到這塊代碼，導(dǎo)致了錯誤的發(fā)生。

怎么辦呢？找找其他能用的庫吧，Promise實現(xiàn)庫還算比較多的！NPM上搜搜就有。其中es6-promise是另一個被開發(fā)者下載使用比較多的庫。通過npm命令我們可以很方便的將它下載下來：

npm install es6-promise

然后在下載下來的文件夾下，把dist目錄中的es6-promise.js或es6-promise.min.js復(fù)制到你的微信小程序項目中，替換原來的bluebird.js就行啦，標(biāo)準(zhǔn)的Promise API一個都不會少。

而且es6-promise的代碼文件體積比bluebird小個3，4倍，也算一個好處吧（只能這么自我安慰了...哈哈）