快应用 使用async
使用
async语法开发业务，代码以更整洁优雅的方式替代Callback与Promise
通过本节，你将学会：
教程文档对应的项目代码文件：src/Async目录, app.ux
如何配置async语法的babel编译支持
传统前端开发中，异步的处理方式有：Callback、Promise、Generator；这几种代码的书写方式，后者往往比前者可读性好很多；ECMA规范中新的语法方式async以一种更优雅的方式来处理异步
当前应用平台本身仅支持ES5的语法，所以要支持它必须借助babel之类的语法分析转换工具，同时还要在代码中注入polyfill
那么开发者可以把babel-runtime/regenerator注入到app.ux中，因为这个文件是所有页面脚本执行前都会执行的
示例如下：
// 脚本：regenerator.js
// 全局引用
const globalRef = global.__proto__ || global
// global注入regeneratorRuntime
globalRef.regeneratorRuntime = require('babel-runtime/regenerator')在app.ux中引入这个脚本文件，就可以注入对async的支持（在项目编译后的build/app.js中搜索regeneratorRuntime即可发现注入成功）
注意：该功能在hap-toolkit的version:24版本以上才支持（因为需要添加库依赖与修改编译选项）
使用async, await语法
async 与 await 的学习请参考是 async文档 与 await文档，以下是示例代码
示例如下：
<script>
export default {
data: {
},
onInit () {
this.$page.setTitleBar({ text: '支持AsyncAwait' })
},
onReady () {
this.testAsync()
},
/**
* 测试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 的异步接口。
关于异步接口的更多信息，详见文档 接口
示例如下：
<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
对于 platformVersion 低于 1010 的设备，以及非异步回调的方法，要想以 async 的方式使用 native 接口，需要对 native 接口进行改造，从返回callback方式到返回Promise方式，同时定义async方法返回。
我们同样以 fetch 接口为例
示例如下：
// asyncNatives.js
import nativeFetch from '@system.fetch'
const natives = {
/**
* 网络请求
* @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对象上；
调用async版本的 fetch 接口的示例代码如下：
<script>
export default {
onReady () {
this.testMockNatives()
},
/**
* 测试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成功结果: ', JSON.stringify(ret1))
// 失败示例
const ret2 = await natives.fetch({
url: 'http://www.Its_A_Wrong_URL.com/'
})
console.info('fetch失败结果: ', JSON.stringify(ret2))
}
}
</script>总结
本节不是开发的必须部分，只是为开发者提供一种更优雅的异步处理方式，推荐感兴趣的同学使用