用 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"
			}
		]
	]
}