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

news2024/12/22 2:57:17

一、背景

这一篇随机主要是想记录一下自己学习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);

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

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()