JavaScript await和yield关键字的区别是什么

在这篇文章中，我们将看到await关键字与yield关键字的区别。

生成器函数： 可以根据用户需求在不同的时间间隔返回多个值，并且可以管理其内部状态的函数就是生成器函数。如果一个函数使用 ** function*** 语法，则它成为一个生成器函数。它们与普通函数不同，因为普通函数在单次运行中完成，而我们可以暂停和恢复生成器函数。

注意： 当执行生成器函数时，它会返回一个新的生成器对象。

功能： yield和await都可以用于编写“等待”的异步代码，这意味着代码看起来是同步的，即使实际上是异步的。

await： 这是一个用于等待Promise的运算符。在我们的常规JavaScript代码中，我们在async函数内部使用它，并且它可以与JavaScript模块一起使用。

当我们在表达式中使用await关键字时，async函数的执行将被暂停，直到Promise解决（即满足或拒绝），然后恢复async函数的执行。恢复后，await表达式的值就是已满足的Promise的值。

语法：

var result = await expression;

expression: 承诺或任何需要等待的值。

result: 包含承诺的值（解决值）。

示例：

Javascript

<script>
    function calculate(y) {
        var promise = new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve(calculateSquare(y));
            }, 3000);
        });
        return promise;
    }
 
    function calculateSquare(y) {
        return y * y;
    }
 
    async function main() {
 
        /* The expression following the await 
        the operator is not a Promise, it's 
        converted to a resolved Promise.*/
 
        // Code will be synchronized 
        var s1 = await calculate(5); 
 
        // After 3 sec this line will get execute
        console.log("Square of 5 is : " + s1);
        var s2 = await calculate(10);
 
        // After 3 sec next this line will get execute
        console.log("Square of 10 is : " + s2); 
 
         // In last this line will get execute
        console.log("End");
    }
 
    main()
</script>

（注意：在node.js中运行上述代码）

输出：

JavaScript await和yield关键字的区别是什么

yield: yield关键字用于暂停和恢复生成器函数的执行。

关键字yield用于暂停生成器函数的执行，并且表达式后面的值将作为yield关键字的返回值返回给生成器的调用者。

它导致调用生成器的next()方法返回一个具有两个属性的IteratorResult对象：

value：由yield关键字返回的值。
done：一个布尔类型的值。（如果done为false，表示生成器函数尚未完整执行完成）。

使用yield关键字，我们可以为数据遍历创建一个迭代器。

语法：

var result = yield expression;

表达式： 从生成器函数中返回的值。

结果： 检索传递给生成器的next()方法的可选值，以恢复其执行。

示例：

Javascript

<script>
    function* getValues(start, end) {
        while (start <= end) {
            yield start;
            start++;
        }
    }
 
    /* Expression */
    var it = getValues(5, 10);
 
    /* Generator's next() method  return an
    IteratorResult object with two 
    properties: value and done*/
 
    //element : {value : Object ,done : boolean}
    var element = it.next(); 
 
    while (element.done == false) {
        console.log(element);
        element = it.next();
    }
 
    // value:undefined, and done : false 
    console.log(element);
</script>

注意：在node.js中运行上述代码