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

（一）问题描述

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

（二）同步和异步 

原因很简单：fetch是异步的。

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

对于这段代码：

let obj=[]//定义objfetch("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()中）