热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入探讨JavaScript中async/await的常见问题及解决方案

项目中有一个数据是二层嵌套数组,数据类型类似这样12345678910111213141516171819202122questions: [    {        type: 'INPUT',  

项目中有一个数据是二层嵌套数组,数据类型类似这样



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
questions: [

    {

        type: 'INPUT',

        answer: 'helloworld'

    },

    {

        type: 'SELECT',

        answer: '1'

    },

    {

        type: 'GROUP',

        sub_questions: [

        {

            type: 'INPUT',

            answer: 'hihi'

        },

        {

            type: 'SELECT',

            answer: '2'

        }

    ]}

    ]

然后我要通过重组数据将这些数据展示出来,但是select显示的值并不是answer,而是将answer传到后端然后拿到的一个结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let answer_arr = [];

questions.forEach(async (question) => {

    let single_answer = {type: question.type};

    if (question.type === 'INPUT') {

        single_answer.answer = question.answer;

    } else if (question.type === 'SELECT') {

        await axios.post('xxxx', {code: question.code}).then(res => {single_answer.answer = res.data.data})

    } else if (question.type === 'GROUP') {

        single_answer.answer = [];

        question.sub_questions.forEach(async (sub_question) => {

            let single_sub_answer = {type: sub_question.type};

            if (sub_question.type === 'INPUT') {

                single_sub_answer.answer = question.answer;

            } else if (sub_question.type === 'SELECT') {

                await axios.post('xxxx', {code: sub_question.code}).then(res => {single_sub_answer.answer = res.data.data})

            single_answer.answer.push(single_sub_answer )

        })

    }

    answer_arr.push(single_answer)

})

期望得到的结果就是



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
answer_arr = [

    {

        type: 'INPUT',

        answer: 'helloworld'

    },

    {

        type: 'SELECT',

        answer: 1对应的值

    },

    {

        type: 'GROUP',

        answer: [

            {

                type: 'INPUT',

                answer: 'hihi'

            },

            {

                type: 'SELECT',

                answer: 2对应的值

            },

        ]

    }

]

但是执行后发现await并没有生效,answer_arr 中 type为SELECT时,并没有answer。。。
是不是async/await用法不对。。。


   



推荐阅读
  • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • 本文探讨了异步编程的发展历程,从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现,帮助开发者更好地理解和使用这一重要工具。 ... [详细]
  • 本文探讨了如何使用Scrapy框架构建高效的数据采集系统,以及如何通过异步处理技术提升数据存储的效率。同时,文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • Java虚拟机及其发展历程
    Java虚拟机(JVM)是每个Java开发者日常工作中不可或缺的一部分,但其背后的运作机制却往往显得神秘莫测。本文将探讨Java及其虚拟机的发展历程,帮助读者深入了解这一关键技术。 ... [详细]
  • 1、编写一个Java程序在屏幕上输出“你好!”。programmenameHelloworld.javapublicclassHelloworld{publicst ... [详细]
  • 本文回顾了作者在求职阿里和腾讯实习生过程中,从最初的迷茫到最后成功获得Offer的心路历程。文中不仅分享了个人的面试经历,还提供了宝贵的面试准备建议和技巧。 ... [详细]
  • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
  • 一文详解Linux
    Linuxnetfilter与VRF实验环境如下图所示:配置如下:#!binbashsudoipnetnsaddns1sudoiplinkaddns1veth1typevethpe ... [详细]
  • 数据输入验证与控件绑定方法
    本文提供了多种数据输入验证函数及控件绑定方法的实现代码,包括电话号码、数字、传真、邮政编码、电子邮件和网址的验证,以及报表绑定和自动编号等功能。 ... [详细]
  • binlog2sql,你该知道的数据恢复工具
    binlog2sql,你该知道的数据恢复工具 ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
author-avatar
许心怡917
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有