快應(yīng)用 使用async

使用async語(yǔ)法開(kāi)發(fā)業(yè)務(wù)，代碼以更整潔優(yōu)雅的方式替代Callback與Promise

通過(guò)本節(jié)，你將學(xué)會(huì)：

• 如何配置async語(yǔ)法的babel編譯支持
• 使用async, await語(yǔ)法
• 在native接口中使用async

教程文檔對(duì)應(yīng)的項(xiàng)目代碼文件：src/Async目錄, app.ux

如何配置async語(yǔ)法的babel編譯支持

傳統(tǒng)前端開(kāi)發(fā)中，異步的處理方式有：Callback、Promise、Generator；這幾種代碼的書(shū)寫(xiě)方式，后者往往比前者可讀性好很多；ECMA規(guī)范中新的語(yǔ)法方式async以一種更優(yōu)雅的方式來(lái)處理異步

當(dāng)前應(yīng)用平臺(tái)本身僅支持ES5的語(yǔ)法，所以要支持它必須借助babel之類(lèi)的語(yǔ)法分析轉(zhuǎn)換工具，同時(shí)還要在代碼中注入polyfill

那么開(kāi)發(fā)者可以把babel-runtime/regenerator注入到app.ux中，因?yàn)檫@個(gè)文件是所有頁(yè)面腳本執(zhí)行前都會(huì)執(zhí)行的

示例如下：

// 腳本：regenerator.js
// 全局引用
const globalRef = global.__proto__ || global

// global注入regeneratorRuntime
globalRef.regeneratorRuntime = require('babel-runtime/regenerator')

在app.ux中引入這個(gè)腳本文件，就可以注入對(duì)async的支持（在項(xiàng)目編譯后的build/app.js中搜索regeneratorRuntime即可發(fā)現(xiàn)注入成功）

注意：該功能在hap-toolkit的version:24版本以上才支持（因?yàn)樾枰砑訋?kù)依賴(lài)與修改編譯選項(xiàng)）

使用async, await語(yǔ)法

async 與 await 的學(xué)習(xí)請(qǐng)參考是 async文檔 與 await文檔，以下是示例代碼

示例如下：

<script>
  export default {
    data: {
    },
    onInit () {
      this.$page.setTitleBar({ text: '支持AsyncAwait' })
    },
    onReady () {
      this.testAsync()
    },
    /**
     * 測(cè)試Async
     */
    testAsync () {
      async function bar () {
        return 'bar'
      }
      async function foo() {
        const ret1 = await bar();
        console.info('PAGE: foo: ', ret1)
      }
      foo()
    }
  }
</script>

在native接口中使用async

Native 接口直接返回 Promise

該方法僅支持 platformVersion  的異步接口。

關(guān)于異步接口的更多信息，詳見(jiàn)文檔 接口

示例如下：

<script>
  import fetch from '@system.fetch'
  export default {
   async onReady () {
      // 成功示例
        try {
          const response = await fetch.fetch({
              url: 'https://statres.quickapp.cn/quickapp/quickapptool/release/platform/quickapp_platform.json',
          })
          console.info('fetch 成功 code: ', response.data.code)
          console.info('fetch 成功 data: ', response.data.data)
          console.info('fetch 成功 headers: ', JSON.stringify(response.data.headers))
        } catch(err) {
          console.info('fetch 失敗 code: ', err.code)
          console.info('fetch 失敗 data: ', err.data)
        }
        // 失敗示例
        try {
          const response = await fetch.fetch({
              url: 'http://www.Its_A_Wrong_URL.com/',
          })
          console.info('fetch 成功 code: ', response.data.code)
          console.info('fetch 成功 data: ', response.data.data)
          console.info('fetch 成功 headers: ', JSON.stringify(response.data.headers))
        } catch(err) {
          console.info('fetch 失敗 code: ', err.code)
          console.info('fetch 失敗 data: ', err.data)
        }
    }
  }
</script>

Native 接口返回 callback

對(duì)于 platformVersion 低于 1010 的設(shè)備，以及非異步回調(diào)的方法，要想以 async 的方式使用 native 接口，需要對(duì) native 接口進(jìn)行改造，從返回callback方式到返回Promise方式，同時(shí)定義async方法返回。

我們同樣以 fetch 接口為例

示例如下：

// asyncNatives.js
import nativeFetch from '@system.fetch'
const natives = {
  /**
   * 網(wǎng)絡(luò)請(qǐng)求
   * @param options
   * @return {Promise}
   */
  async fetch(options) {
    const p1 = new Promise((resolve, reject) => {
      options.success = function(data, code) {
        resolve({ data, code })
      }
      options.fail = function(data, code) {
        reject({ data, code })
      }
      nativeFetch.fetch(options)
    })
    return p1
  }
}
export { natives }

改造 fetch 接口，暴露natives變量到app對(duì)象上；

<script>
  export default {
    onReady () {
      this.testMockNatives()
    },
    /**
     * 測(cè)試async的native接口
     */
    async testMockNatives () {
      const { natives } = this.$app.$def
      // 成功示例
      const ret1 = await natives.fetch({
        url: 'https://statres.quickapp.cn/quickapp/quickapptool/release/platform/quickapp_platform.json',
      })
      console.info('fetch成功結(jié)果: ', JSON.stringify(ret1))
      // 失敗示例
      const ret2 = await natives.fetch({
        url: 'http://www.Its_A_Wrong_URL.com/'
      })
      console.info('fetch失敗結(jié)果: ', JSON.stringify(ret2))
    }
  }
</script>

總結(jié)

本節(jié)不是開(kāi)發(fā)的必須部分，只是為開(kāi)發(fā)者提供一種更優(yōu)雅的異步處理方式，推薦感興趣的同學(xué)使用