解释为什么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()中)