首页 > 编程语言 >《JavaScript权威指南第七版》13.3.4实现细节,关于“ES2017解释器可以把函数体分割成一系列独立的子函数,每个子函数都被传给位于他前面以await标记的那个期约的then方法”的疑惑

《JavaScript权威指南第七版》13.3.4实现细节,关于“ES2017解释器可以把函数体分割成一系列独立的子函数,每个子函数都被传给位于他前面以await标记的那个期约的then方法”的疑惑

时间:2023-05-16 18:33:22浏览次数:50  
标签:function await return JavaScript let Promise 子函数 第七版

读到“ES2017解释器可以把函数体分割成一系列独立的子函数,每个子函数都被传给位于他前面以await标记的那个期约的then方法”这一部分是比较困惑,也没有代码示例,很抽象,不易理解。
自己写了个例子来复述一下这段话:

function getPosts() {
    return new Promise(function (resolve, reject) {
        setTimeout(function() {resolve(['p1','p2','p3'])}, 1000);
    });
}
function getAuthors() {
     return new Promise(function (resolve, reject) {
        setTimeout(function() {resolve(['a1','a2','a3'])}, 1000);
    });
}
async function getAll() {
    let posts = await getPosts();
    let authors = await getAuthors();

    let result = posts.map((item, index)=>{
        return {
            post: item,
            author: authors[index]
        }
    });

    return result;
}

getAll函数这样被拆分:

function getAll() {
    // 创建返回的Promise对象
    let resultResolve,
        resultPromise = new Promise(function(resolve, reject) {resultResolve = resolve});
    
    // 第一个await之前的代码
    let posts;

    // 第一个以await标记的Promise对象后面的代码,分割为独立的函数
    function fn1 (val) {
        posts = val;

        // 第二个await之前的代码
        let authors;

        // 分割的第二个独立函数
        function fn2 (val) {
            let authors = val;
            let result = posts.map((item, index)=>{
                return {
                    post: item,
                    author: authors[index]
                }
            });

            resultResolve(result);
        }

        // 将第二个函数传给它前面的Promise对象的then方法
        getAuthors().then(fn2);
    }

        

    // 将第一个函数传给它前面的Promise对象的then方法
    getPosts().then(fn1);

    // 返回Promise对象
    return resultPromise;
}

标签:function,await,return,JavaScript,let,Promise,子函数,第七版
From: https://www.cnblogs.com/chaihuibin/p/17406469.html

相关文章

  • 汉字转换为拼音的JavaScript库的比较
    JSPinyin有提供了两个方法:<依赖mootools>1)一个是将汉字翻译为拼音,其中每一个字的首字母大写;1pinyin.getFullChars(this.value);2)一个是可以将每一个字的拼音的首字母提取出来,是大写的形式。1pinyin.getCamelChars(this.value);还可以设置是否判断多音字。只是功能比较简单,如......
  • 40+JavaScript进阶单行代码
    数组//生成数组0-99的数组//方案1constcreateArr=(n)=>Array.from(newArray(n),(v,i)=>i);letarr=createArr(100);console.log(arr);//方案2constcreateArr=(n)=>newArray(n).fill(0).map((v,i)=>i)......
  • JavaScript 好书推荐
    javascript好书[^2022_V1]开始[^必学基础-红宝书]新手入门系统学习的书籍一:20年8月出版的[《JavaScript高级程序设计(第4版)》](JavaScript高级程序设计(第4版)(豆瓣)(douban.com))有电子版和纸质版。此书虽然是JS必学之一的红宝书,但章节安排欠佳(比如面对对象章节放于函数章......
  • 5种你未必知道的JavaScript和CSS交互的方法
    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方......
  • 6-JavaScript基础
    1.JavaScript简介JavaScript是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。JavaScript是用来控制网页行为的,它能使网页可交互......
  • 使用钩子函数
    钩子分两种,一种是系统级的全局钩子;一种是线程级的钩子.全局钩子函数需要定义在DLL中,从线程级的钩子开始比较简单.其实钩子函数就三个:设置钩子: SetWindowsHookEx释放钩子: UnhookWindowsHookEx继续钩子: CallNextHookEx在线程级的钩子中经常用到GetCurrentThreadID......
  • 必知必会的JavaScript前端面试题篇(二),不看后悔!
    必知必会的JavaScript前端面试题篇(二),不看后悔!1.JavaScript有哪些数据类型以及它们的区别?js一共有八种数据类型,分别是:Undefined,Null,Boolean,Number,String,Object,Symbol,BigInt其中Symbol,BigInt是ES6中新增的数据类型:Symbol:代表唯一的数据类型,主要为了解......
  • 10款Flash和Javascript网页音乐播放器
    关联:9FreshjQueryMediaPlayers   10款音乐播放器,有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器。赶快挑一款,分享你喜爱的音乐吧! 1.Dewplayer  Dewplayer是一个微型,免费的Flashmp3播放器,具有简洁的界面。Dewplayer包含三种不同的尺寸界面。  2.......
  • Ohm:用 JavaScript 创造你的编程语言
    导读解析器是一种超级有用的软件库。从概念上简单的说,它们的实现很有挑战性,并且在计算机科学中经常被认为是黑魔法。在这个系列的博文中,我会向你们展示为什么你不需要成为哈利波特就能够精通解析器这种魔法。但是为了以防万一带上你的魔杖吧!我们将探索一种叫做Ohm的新的......
  • 【转】JavaScript 执行上下文——JS 的幕后工作原理
    转自译文:JavaScript执行上下文——JS的幕后工作原理。译文中图片不显示,要结合原文看,看着不方便。整理了一份含图片的。所以有了此篇的转载,以方便阅读。以下是正文:原文:JavaScriptExecutionContext–HowJSWorksBehindTheScenes,作者:VictorIkechukwu所有JavaScript代......