前端JS for循环内异步接口变成同步提交(JavaScript for循环异步变同步)

news2024/9/24 4:20:50

遇见的问题:
导入Excel文件的时候,将每行数据整合成一个数组,循环数组插入每一条数据,插入数据后要判断是否插入成功,如果没插入成功的话,停止循环,不再插入后面的数据。甚至插入数据后,还要进行一些其他操作。

解决方法: 使用 Promiseasync/await 即可。

重点: JS的循环有部分不支持异步变同步
支持: for()循环for in , for of , while(), promise.all()
不支持: forEach(), map()

下面直接上代码了

代码:


var data_arr = [
    {
        name: "姓名一",
        sex: "男"
    },
    {
        name: "姓名二",
        sex: "女"
    },
    {
        name: "姓名三",
        sex: "男"
    }
]
async function arrInsert() {
    for (let i = 0; i < data_arr.length; i++) {
        let result_data = await createUser(data_arr[i]);
        if (!result_data.result) {
            // 如果出错,就跳出循环
            this.$message({
                message: `${i + 1} 行数据 ${data_arr[i].name}(${data_arr[i].sex}),插入失败`,
                type: 'error'
            });
            break;
        }
    }
}

// 添加用户信息接口
async function createUser(data) {
    return await new Promise(function (resolve, reject) {
        // 处理异步逻辑时候调用resolve和reject函数
        axios({
            method: 'POST',
            url: `${base_url}/api/h5/invitation/add`,
            headers: {
                // 没有可以不要token
                // authorization: `bearer ${token}`
            },
            // 数据
            data: data
        }).then(res => {
            let resp = res.data;
            if (resp.code == 1) {
                if (resp.data.code == 200) {
                    resolve({
                        "result": true
                    });
                }
            } else {
                resolve({
                    "result": false,
                    "msg": resp.msg
                });
            }
        }).catch(req => {
            reject({
                "result": false,
                "msg": ""
            });
        });
    });
}

注意: 如果有用到 setTimeout 的时候,将 setTimeout 放在 Promise 里面,例如:

// 添加用户信息接口
// 添加用户信息接口
async function createUser(data) {
    return await new Promise(function (resolve, reject) {
        // 延迟一秒执行
        setTimeout(() => {
            // 处理异步逻辑时候调用resolve和reject函数
            axios({
                method: 'POST',
                url: `${base_url}/api/h5/invitation/add`,
                headers: {
                    // 没有可以不要token
                    // authorization: `bearer ${token}`
                },
                // 数据
                data: data
            }).then(res => {
                let resp = res.data;
                if (resp.code == 1) {
                    if (resp.data.code == 200) {
                        resolve({
                            "result": true
                        });
                    }
                } else {
                    resolve({
                        "result": false,
                        "msg": resp.msg
                    });
                }
            }).catch(req => {
                reject({
                    "result": false,
                    "msg": ""
                });
            });
        }, 1000)
    });
}

补充个知识点:

支持异步变同步的循环: for()循环for in , for of , while(), promise.all()
可以使用 break 跳出当前循环,循环后面的代码仍然可以执行。
可以使用 return 可以终止当前函数,循环后面的代码不可以执行。
可以使用 continue 跳过当次循环,仍然执行后续的循环。

不支持异步变同步的循环: forEach(), map()
无法使用 breakcontinue来跳出遍历。
通过抛出异常 throw Error() 的方式跳出循环,实现 break 效果。
通过 return 跳过当次循环,实现 continue 的效果。
例如:

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
var id = 5;
try {
    arr.forEach(function (item, index, arr) {
        if (item === 1) return;
        console.log(item)
        if (item === id) {
            //满足条件,跳出循环
            throw Error();
        }
    })
} catch (e) {
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1143151.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Leetcode】反转单链表

反转单链表 反转单链表题目题目思路代码 反转单链表题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 题目思路 链表的本质就是改变每一个结点的next域。 我们从第一个结点开始遍历&#xff0c;改变它的next域。 当我们要注意在改变…

尚未解决:use_python()和use_virtualenv()的使用

reticulate包为Python和R之间的互操作性提供了一套全面的工具。该包包含以下功能&#xff1a; 以多种方式从R调用Python&#xff0c;包括RMarkdown、获取Python脚本、导入Python模块以及在R会话中交互使用Python。 R和Python对象之间的转换&#xff08;例如&#xff0c;R和Pan…

TP项目启用websocket聊天功能 - gateway、wss、swoole、长连接 - PHP

TP项目启用websocket聊天功能 须知 swoole不支持windows安装,没有windows扩展WebSocket 在线测试(可测本地wss连接) websocket在线测试建议gateway只负责给终端发信,不参与逻辑部分后台负责所有的收信+发信安排,可以方便地获取用户好友关系、上下线状态管理、消息缓存、已…

图文并茂的帮助文档你值得拥有

概述 工作中除了写代码开发需求&#xff0c;也需要写文档&#xff0c;怎么写好一个文档能够让读者既能看懂API&#xff0c;又能快速上述操作&#xff0c;所见即所得。本文基于vitepress、ace-builds带大家实现一个这样好用的帮助文档。 实现效果 在线预览地址&#xff1a;ht…

4.5 数据加密

思维导图&#xff1a; 4.5 数据加密 为确保高度敏感数据的安全性&#xff0c;如财务、军事及国家机密数据&#xff0c;可采用数据加密技术。此技术将原始数据&#xff08;明文&#xff09;转化为不可识别格式&#xff08;密文&#xff09;&#xff0c;确保不知解密方法的人无法…

提高车联远控异常分析效率的设想

提高车联远控异常分析效率的设想 前言 随着汽车集成度、智能化、软件功能越来越丰富&#xff0c;用户车辆使用已不是传统的出行、驾驶等物理场景&#xff0c;更多的人与车的互动功能的场景。其中车联远控功能使用日益增多。技术人员开展排查车联远控问题时&#xff0c;往往需…

图解kd树+Python实现

开篇 在讲解k-近邻算法的时候&#xff0c;我们提供的思路是&#xff1a;对于新到来的样本&#xff0c;计算该样本与训练集中所有样本之间的距离&#xff0c;选取训练集中距离新样本最近的k个样本中大多数样本的类别作为新的样本的类别。 也就是说&#xff0c;每次都要计算新的样…

c语言基础:L1-060 心理阴影面积

这是一幅心理阴影面积图。我们都以为自己可以匀速前进&#xff08;图中蓝色直线&#xff09;&#xff0c;而拖延症晚期的我们往往执行的是最后时刻的疯狂赶工&#xff08;图中的红色折线&#xff09;。由红、蓝线围出的面积&#xff0c;就是我们在做作业时的心理阴影面积。 现给…

4.6 其他安全性保护

思维导图&#xff1a; 4.6 其他安全性保护 1. 推理控制 (Inference Control) 定义&#xff1a;处理强制存取控制未解决的问题&#xff0c;如利用列的函数依赖关系&#xff0c;从低安全等级信息推导出高安全等级信息。示例&#xff1a;在公司信息系统中&#xff0c;姓名和职务为…

SQL查询优化---如何查询截取分析

慢查询日志 1、慢查询日志是什么 MySQL的慢查询日志是MySQL提供的一种日志记录&#xff0c;它用来记录在MySQL中响应时间超过阀值的语句&#xff0c;具体指运行时间超过long_query_time值的SQL&#xff0c;则会被记录到慢查询日志中。 具体指运行时间超过long_query_time值的…

use renv with this project create a git repository

目录 1-create a git repository 2-Use renv with this project 今天在使用Rstudio过程中&#xff0c;发现有下面两个新选项&#xff08;1&#xff09;create a git repository (2) Use renv with this project. 选中这两个选项后&#xff0c;创建新项目&#xff0c;在项目目…

Redis(01)| 数据结构

这里写自定义目录标题 Redis 速度快的原因除了它是内存数据库&#xff0c;使得所有的操作都在内存上进行之外&#xff0c;还有一个重要因素&#xff0c;它实现的数据结构&#xff0c;使得我们对数据进行增删查改操作时&#xff0c;Redis 能高效的处理。 因此&#xff0c;这次我…

此页面不能正确地重定向

这种是由于条件判断有误&#xff0c;程序不断的重定向到一个页面&#xff0c;而造成的死循环的情况 下面列举一个常出现的场景之一 1、使用过滤器实现登录验证错误处理 解释&#xff1a;当用户访问login.jsp进行登录的时候&#xff0c;这个时候请求会被Filter捕获&#xff0…

【Java基础(高级篇)】集合源码剖析

集合源码剖析 文章目录 集合源码剖析1. List接口分析1.1 ArrayList1.2 LinkedList 2. Map接口分析2.1 哈希表的物理结构2.2 HashMap中数据添加过程2.2.1 JDK7中过程分析2.2.2 JDK8中过程分析 2.3 红黑树2.4 HashMap源码剖析(JDK1.8.0_271)2.4.1 Node2.4.2 属性2.4.3 构造器2.4.…

基础课11——数据来源

随着科技的进步和数字化转型的加速&#xff0c;全球数据量正以惊人的速度增长。根据IDC的最新报告&#xff0c;2020年全球数据总量已经达到了约53 ZB&#xff08;Zettabyte&#xff0c;万亿亿GB&#xff09;&#xff0c;而这个数字在2025年预计会达到175 ZB。这种指数级增长不仅…

MAC下安装Python

MAC基本信息&#xff1a; 执行命令&#xff1a; brew install cmake protobuf rust python3.10 git wget 遇到以下问题&#xff1a; > Downloading https://mirrors.aliyun.com/homebrew/homebrew-bottles/rust-1.59.0 Already downloaded: /Users/xxxx/Library/Caches/Ho…

售后处置跟踪系统设想

售后处置跟踪系统设想 前言 随着汽车工业的发展&#xff0c;软件定义车的模式已成为主流汽车设计及智能化功能架构模式&#xff0c;通过引入SOA的软件架构设计&#xff0c;使得现有的座舱软件、云端服务软件、App软件等众多功能模块的版本迭代频次日新月异&#xff0c;发版更…

【ubuntu】 Linux(ubuntu)创建python的虚拟环境

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

语雀故障事件——P0级别事故启示录 发生肾么事了? 怎么回事?

前言 最近&#xff0c;阿里系的语雀出了一个大瓜&#xff0c;知名在线文档编辑与协同工具语雀发生故障&#xff0c;崩溃近10小时。。。。最后&#xff0c;官方发布了一则公告&#xff0c;我们一起来看看这篇公告&#xff0c;能不能有所启发。 目录 前言引出一、语雀P0故障回顾…