ES6中async的使用案例

在项目中有时会遇到异步操作的问题,async就是解决异步操作的终极操作。我会以终极三问(what,why,when)的形式来说明什么是async。由于这是第一篇文章不知道怎么写,有很大部分是借鉴阮一峰老的原文,事例将会从我的项目中摘取。

async是什么?

官方例子 官方文档

async相当于对Generator 函数的一个语法糖

const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};

用async函数就换成了

const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};

那async与Genetator有什么区别呢?我自己的理解就是,更简单,更语义化,而且会自动执行。

(1)自动执行

我们知道 generator 函数需要通过调用next()方法,才能往后执行到下一个yield,但是async函数却不需要,它能够自动向后执行。

(2) 更语义化

asyncawait,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。

(3) 更广的适用性

yield命令后面只能跟随TrunkPromise,但是await后面除了可以是Promise,也可以是普通类型,但是这样就和同步没有任何区别了。

(4) 返回值不同

generator返回的是一个遍历器对象,而async返回的是一个Promise对象

async怎么用?

await 命令

await语句后面的 Promise 变为reject,那么整个async函数都会中断执行。

async function () {
await Promise.reject('出错了');
await Promise.resolve('hello world');
}

要知道的是async返回的是一个Promise对象,后面可以使用then方法添加回调

async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});

也可以使用catch方法捕捉错误信息,然而使用时需要注意catch的一些使用方法

async function () {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 如果不想因为第一个异步失败,而中断后面的异步操作
// hello world
async function () {
await Promise.reject('出错了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 原因同上
// 出错了
// hello world

项目中的案例

案例背景:复合报表(项目功能之一)
复合报表是由用户来进行配置高自由度的展现报表,用户可以配置模块(组件)之间的查询条件以及共有参数、私有参数,来展示一个多功能查询,展示数据工具。

methods: {
checkAllReady() {
return new Promise((resolve, reject) => {
this.$watch(() => this.allReady && this.publicAllReady,
val => {
val ? resolve(val) : reject(val);
}, {immediate: true});
}).then(val => {
return p.resolve(val);
}).catch(e => {
console.log('组件的参数还没准备好')
})
},
async getData() {
await this.checkAllReady();
const url = this.parseApi(this.option.api);
const publicParams = this.blocks.getParams();
const id = this.option.f_id;
this.loading = true;
this.showChart = true;
api.get(url, $.extend({id},publicParams,this.getParams())).then(data => {
if (data.code) {
this.loading = false;
this.$message.error(data.msg);
this.$emit('remote-data-completed');
} else {
if (data.data.is_sync_query_mode) {
this.renderChart(data.data);
this.loading = false;
this.$emit('remote-data-completed',data);
} else {
const taskId = data.data.id;
this.getStatus(taskId);
}
}
})
}
}

版权声明:著作权归作者所有。

相关推荐

ES6字符串模板的使用

字符串模板let name = ‘leying’let age =18let str=’这个人叫’+name+’,年龄是 ‘+age+ ‘岁’’;console.log(str) //这个人叫leying年龄是18岁es6:let name = ‘leying’let age =18let str= `这个人叫${name},年龄是${age}s岁 `console.log(str) //这个人

ES6简化版的JavaScript中间件模式的实现

JavaScript中间件模式的目的是分解前端业务逻辑,通过next方法层层传递给下一个业务。比较经典的是express和koa。这是使用ES6实现的一个简版的中间件模式:class Middleware { use(fn) { this.go = (stack => next => stack(fn.bind(this, next.bind(this))))(this.go)

ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:命名参数设置默认参数多个返回值命名参数在传统的函数定义如下:function findUsersByRole (   role,    withContactInfo,    includeInactive )&

JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1:插入数组如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n