当前位置: 首页 > article >正文

解释为什么fetch(JavaScript)无法将读取的数据存入外部变量

(一)问题描述

      你可能会遇到这样的情况:在fetch之外创建变量,将fetch获取到的数据赋值给这个变量以便在fetch外使用,但在使用这个变量的时候发现值是空的,这是为什么呢?

(二)同步和异步 

原因很简单:fetch是异步的

那么什么是同步什么是异步呢?简单来说,同步和异步中任务执行的顺序不同:同步是指任务按顺序执行,一个任务完成后再开始下一个任务异步是指任务可以独立执行,一个任务不需要等待另一个任务完成,可以通过回调、事件或通知来获取结果。

对于这段代码:

let obj=[]//定义obj

fetch("XXX")//利用fetch获取数据
    .then((res) => res.text())
    .then((data) => {

        ......

        console.log("获取数据");
        obj.push(XXX);//为obj赋值

        ......

}
console.log("写在获取数据之后的代码")

假设fetch是同步的,那么执行的顺序就是定义obj->获取数据并放入obj->在fetch外使用obj,控制台输出的顺序就是"获取数据”->"写在获取数据之后的代码“。但实际是fetch是异步的,fetch内的代码段可以独立执行,整个代码执行的顺序是(1)定义obj->在fetch外使用obj(2)fetch获取数据二者同步进行,那么fetch外使用obj时,数据获取和obj的赋值还没有完成!实际控制台输出的顺序是”写在获取数据之后的代码“->"获取数据”!

(三) 解决办法

1. 使用async和await来确保在使用变量之前数据已经被获取

2. 将需要使用数据的代码放入fetch的回调函数内部或者在数据获取完成后的回调中(也就是.then()中)


http://www.kler.cn/a/456332.html

相关文章:

  • linux学习笔记(一).学习路径+学习流程+起源
  • curl+openssl 踩坑笔记
  • patch补丁制作,合入,卸载的方法
  • 图片转成oled使用的字模数据
  • 数据结构(哈希表(中)纯概念版)
  • 网易企业邮箱登陆:保障数据安全
  • JVM简介—JVM的执行子系统
  • 企业架构学习笔记-数字化转型
  • 华为管理变革之道:奋斗文化与活力
  • 软路由系统 iStoreOS 中部署 Minecraft 服务器
  • Redis+注解实现限流机制(IP、自定义等)
  • SqlSugar配置连接达梦数据库集群
  • C#WPF基础介绍/第一个WPF程序
  • 【RabbitMQ的死信队列】
  • CCF-GESP 等级考试 2023年12月认证C++二级真题解析
  • firefly rk3588s+qt+海康摄像头部分问题记录
  • Java中的Servlet
  • Java容器都有哪些?
  • 时序论文34|AdaWaveNet:用于时间序列分析的自适应小波网络
  • 【代数学6】基于数域筛法对大整数进行分解
  • 【小程序】自定义组件的data、methods、properties
  • Kafka高可用机制总结
  • Linux-frp_0.61.1内网穿透的配置和使用
  • 数据结构与算法(JAVA语言版解密)
  • CDN(Content Delivery Network,内容分发网络)
  • 浏览器语音视频功能