【前端】 async 和 await 以及 generator生成器函数

一、背景

这一篇随机主要是想记录一下自己学习js中有关异步内容的东西。然后发现有人拿异步跟生成器函数进行比较了一下，因此一起学习了一下。

二、知识点相关内容及实验test

2.1 generator 生成器函数

generator函数的作用：每次访问返回函数中yield 所定义的值，然后利用 方法.next() 来访问下一个yield所定义的值。

//generator函数测试 函数带*的意思就是生成器函数
function* fibs() {let a = 0;let b = 1;while (true) {yield a;[a, b] = [b, a + b];}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);let a = fibs().next();
let b = fibs().next();
let c = fibs().next();
let d = fibs().next();
let e = fibs().next();console.log(a,b,c,d,e);
//这里输出的都是0开始，是因为每次调用fibs()生成器方法都会生成一个新的遍历器。//如果想连续执行，可以将其赋值给一个变量。
const fib = fibs();let a1 = fib.next();
let b1 = fib.next();
let c1 = fib.next();
let d1 = fib.next();
let e1 = fib.next();console.log(a1,b1,c1,d1,e1);

这段代码的输出如下图所示：

2.2 异步 async和await

async 一般不单独使用，它里面有0个或者多个await，await不能单独使用。

这个是es7里面的内容，是基于promise构造的。

await的意思是，await后面的语句或者函数必须执行完全才能继续向下执行，异步函数（async）可以先不用执行完，下面的代码也可以执行。

function one() {console.log(performance.now());return 'I am one'
}
//这里设置了异步，setTimeout函数前面加了await说明这个函数必须执行完才能往下走async function two() {await setTimeout(()=>{},1000)console.log(performance.now());return 'I am two';
}function three() {console.log(performance.now());return 'I am three'
}function run() {console.log(one());console.log(two());console.log(three());
}
run()

程序输出如下图所示：

promise里面pending表示正在执行，fulfilled表示执行结束，rejected表示失败了。