微信小程式中非同步處理實例詳解（async/await）

Promise和co都搞過了，終於還是忍不住要折騰，上ES7的終極方案：async/await。

async/await也是和Promise配合使用的, 先來看範例程式碼，這個用法和我們之前講的co的用法是極其相似的：

function myAsyncFunc() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("myAsyncFunction done!");
      resolve({data: "Hello,World"});
    }, 5000);
  });
}

async function test() {
  var result = await myAsyncFunc();
  console.log(result.data); //Hello,World
}

test();

要在小程式中使用async/await的話，靠微信web開發者工具中的Babel轉換工具是不夠的了，因為需要一些額外的Babel插件來編譯使用了async/await的程式碼。所以這次我們得自己寫腳本來呼叫Babel。

在專案中，我們得先關閉「開啟ES6轉ES5」這個選項，因為我們現在要自己來做這件事。

關閉選項

然後，我準備用Gulp來寫我的腳本，從Gulp中呼叫Babel來編譯我的程式碼。當然你也可以用你其他的工具如Grunt, Webpack之類的，你可以參考這裡來了解如何在你使用的build工具中使用Babel。

重要的一點是，當我們呼叫Babel時，我們需要為我們的Babel配置插件以支援async/await，例如async-to-generator，async-generator-functions等插件。方便起見，直接使用preset（也就是官方配置好的插件包），es2017或latest這兩個preset其中一個都能滿足我們的需要。

這是Babel的設定檔：.babelrc

{  
  "presets": [ "latest" ],  
  "plugins": []
}

然後在我的gulpfile.js中，我會將我的小程式專案下所有的js檔案都透過Babel編譯：

gulp.task('scripts', () => {  
  return gulp.src('./src/**/*.js')    
    .pipe(babel())
    .pipe(gulp.dest('./dist'))
})

好了，這是我們編譯我們的程式碼要做的工作。接下來，我們來講一下在小程式碼中要做的一些改變：

1. 引入generator支撐庫

經過Babel轉譯後的程式碼，會把aysnc/await的功能通過類似co函式庫的方式來實現，即要使用到generator，所以，和我們使用co的時候一樣，需要依賴一個regeneratorRuntime，才能支援generator特性。我們可以使用Facebook開源的regenerator函式庫。你可以透過npm來下載這個regenerator函式庫：

npm install regenerator

然後將下載檔案中名為regenerator-runtime.js的檔案拿出來，放到我們的小程式碼中去。

2.引入程式碼

在需要使用async/await特性的程式碼檔案中，引入regenerator庫：

const regeneratorRuntime = require('../../libs/regenerator-runtime')

然後，你就可以放心的在你的程式碼裡使用async/await來寫非同步處理了。

以上是微信小程式中非同步處理實例詳解（async/await）的詳細內容。更多資訊請關注PHP中文網其他相關文章！