本文主要参考链接https://es6.ruanyifeng.com/#docs/generator,阮一峰作者写的非常详细,我只是抽取了其中一小部分作为自己的笔记。
Generator
es6中用于异步编程的函数,英语中是生成器的意思。普通函数只能生成一个值,返回一个return,generator可以生成一系列的值,可以执行多个yield(表达式)。
function* add(){
yield console.log(1+2);
yield console.log("hello");
console.log('done11');
console.log('done22');
yield console.log("333")
yield console.log("444")
return "ok"
}
var result = add();
result.next(); //3
result.next(); //hello
result.next(); //done11 done22 333
使用方法:与普通函数不同,他会在function后面加一个 * 在函数名之前,但是并没有规定function、*、函数名之间的空格位置是否必须存在;在函数内部使用yield可以理解为暂停执行,调用方式与普通函数相同,但是调用之后不会立即输出,需要使用next才能将暂停的函数开始执行。
如上面代码:第一个next执行第一个yield然后暂停,第二个yield执行第二个yield然后暂停,第三个next接着刚才的代码执行,直到遇到下一个yield执行之后再暂停。
调用next方法会返回一个对象:对象包含两个属性(value,done),value代表当前表达式的值,yield表达式代表yield的值,遇到return代表return的值,done表示函数是否执行结束(遍历结束或者遇到return)。
async
async是对generator的改进。将function*替换成async function;将yield替换成await就是async的写法。它的原理就是将generator和自动执行器封装成一个函数
与generator不同的是:
它不需要使用next执行,与普通函数一样直接调用就会自动执行;
async代表函数中有异步操作,await表示后面的表达式需要等待结果才能执行;
yield后面只能是thunk或promise函数,await后面可以是promise对象或基本类型值,但都会转换成promise对象‘
async返回值是promise对象,可以直接使用then等操作;yield返回一个对象数组
语法:
1.async函数中return后的值会成为then的参数。
async function f1() {
return 3;
}
f1().then(result => console.log(result + 1 ))
//4
2.async函数中抛出错误会认为promise状态变为rejected,会被catch方法收到。
async function f2() {
throw new Error();
}
f2().then(result => console.log("resolve" + result))
.catch(error => console.log("rejected" + error))
//rejectedError
3.async函数中只有await全都执行完或者抛出异常或者遇到return才会返回promise对象,才会执行then方法。如果await后面返回rejected,也会中断执行。
下面是一个休眠函数的写法,也就是指定多少时间之后再返回结果:
function sleep(time) {
return new Promise(resolve => {
setTimeout(resolve, time);
})
}
async function f() {
for(let i = 1; i <= 5; i++) {
console.log(i);
await sleep(1000);
}
}
f(); //1 2 3 4 5
//会每隔一秒返回一个数字
如果await后面的异步操作出错,代表着async函数返回的是promise对象的reject状态,防止出错后影响后面的执行可以将代码块放在try-catch中。