【前端】 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);

这段代码的输出如下图所示:
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()

程序输出如下图所示:
异步代码的输出以及解释
promise里面pending表示正在执行,fulfilled表示执行结束,rejected表示失败了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值