关于ajax同步异步处理循环遍历及push时发生的疑问

今天写了一个简单的ajax请求，其中因为一些需求 渲染过程没有写在回调函数内，要在外部访问遍历后的数组进行渲染，第一次写时图片如下图

此时console.log(arr)打印出来的内容是一个长度为0，包含十条完整数据的数组，如下图

此时，当我访问arr[0]或者arr[1]时，均会出现undefined提示，

开始的时候我一直认为是数组操作的问题，在这个方向上努力了半天，发现方向可能是错的，最后觉得可能是因为ajax默认的异步请求，所以将请求改成了同步，如下图

此时打印的内容变成了想要的需求，如下图

这样的话，我实际上的需求已经达成了，等我活忙完了回过头来反思，发现不能理解其中到底发生了什么，如果是因为异步请求，导致循环和push没完成就打印了arr，那么arr内应该是一个拥有不完整数据的数组，但打印出来的内容却是一个拥有完整的10条数据且长度为0的数组，也就是说，异步请求时循环遍历以及push的过程已经结束了，不然不可能有完整的10条数据，但为什么打印出来的arr却是一个没有长度数据完整的数组呢？

希望路过的大神能给解答一下，感激不尽