用 async/await 来处理异步
Promise 的方式虽然解决了 Callback Hell,但是这种方式充满了 Promise的 then() 方法,如果处理流程复杂,整段代码将充满 then。语义化不明显,代码流程不能很好的表示执行流程。
async/await 让 JavaScript 对于异步操作有了终极解决方案。
示例
以下以调用相机拍照,并生成图片base64字串的流程做为演示。
import umsApi from 'ums-api'
//captureImage调用API的拍照接口,并通过Promise返回结果
async captureImage() {
return new Promise((resolve, reject)=>{
umsApi.camera.captureImage(
ret=>{
// 返回相机拍照后的保存路径
if (ret.path === null || ret.path === ""){
reject('capture image fail')
} else {
resolve(ret.path)
}
})
})
},
async getBase64() {
//getBase64调用captureImage,等到拍照流程结束,继续接下来的代码内容
let imgPath = await this.captureImage()
// 获取路径以后再做base64转化
console.log("path = " + imgPath);
umsApi.zxing.getImageBase64({
path:imgPath
}, ret=>{
console.log('result: ' + JSON.stringify(ret))
})
}
脚手架版本支持
ums-toolkit从 1.0.17 开始生成的项目模板,默认 支持 async/await
对于 1.0.16 之前的脚手架,仅需要以下简单操作,即可让项目支持 async/await 语法:
安装plugin
npm install --save-dev babel-plugin-transform-runtime
配置.babelrc文件
{
"presets": [
"env",
"es2015"
],
"plugins": [
[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
]
]
}