javascript - AngularJs - $http.get() 中的 Array.push() 会产生一个有缺陷的数组

Question

我无法弄清楚我的代码有什么问题。这似乎是一个javascript问题。

我正在使用$http.get加载本地 txt 文件（有不同的方法吗？）。我想将此内容推送到数组中。为了测试，我只是推送任何字符串，以确保它与实际的 txt 文件无关。

 var myArray = [];
 $http.get(localFilePath).then(
        function(success){
            myArray.push("123");
        },
        function(error){
            // other stuff
        });

console.log(myArray);

这个简单的代码不会生成正确的数组。如果我console.log创建的数组，这是 Chrome 开发工具的屏幕截图：

现在，这看起来像一个正确的数组，但事实并非如此。如果我console.log(myArray.length)返回0。

myArray.push("123") 相反，在函数外部 使用相同的代码时，正确的数组应该是这样的$http.get()：

如果我在$http.get()函数中执行它，有人能说出这两个数组之间的区别以及为什么第一个数组的创建方式不同吗？

标签： javascriptarraysangularjshttp-get

Answer 1

因为您在数组最有可能获得值之前是 console.logging，并且在控制台内部，chrome 更新数组（因为它是一个引用）而不是长度（因为它是一个原语）。这就是为什么作为数组的一部分，您可以看到正确设置的长度属性。如果你这样做：

var myArray = [];
let $http = { get: () => {
    var p = new Promise((resolve, reject) => {
        setTimeout(() => resolve('hi'), 1000);
    })
    return p;
}}
 $http.get('').then(
  function(success){
      myArray.push("123");
      console.log(myArray, myArray.length, 'after');
  },
  function(error){
      // other stuff
  }
);
console.log(myArray, myArray.length, 'before');

你可以明白我的意思。