AngularJs

Question

我不知道我的代码有什么问题。这似乎是一个 javascript 问题。

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

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

console.log(myArray);

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

现在，这看起来像是一个合适的数组，但事实并非如此。如果我console.log(myArray.length)它returns 0.

下面是使用相同代码 myArray.push("123") outside $http.get() 函数的正确数组的样子：

如果我在 $http.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');

你明白我的意思了。

Answer 2

这是一个异步问题。您在承诺的 "resolve" 函数之外调用 console.log()。

var myArray = []
$http.get(localFilePath).then(function(result) {
  myArray.push("123")
})

// outside resolve function     
console.log(myArray)

由于这是一个异步操作，解析函数只会在 $http.get() 请求完成后调用（通常是几百毫秒后）。但是，它不会等待，因此其余代码继续运行。因此它启动 get()，然后在 http 请求有机会完成之前立即运行发送 console.log()，因此到 [=12= 时它还没有填充数组] 被调用。

如果将 console.log() 放入 resolve 函数中，您会看到数组已正确填充，因为它等待 http 请求完成，填充数组，并且只有然后它打印了结果。

$http.get(localFilePath).then(function(result) {
  myArray.push("123")

  // inside resolve function     
  console.log(myArray)
})

Answer 3

我已经理解你的问题并尝试了下面的代码，我得到了相同的数组，这是正确的。您正在分配推送从服务返回的对象而不是 array.Array.push() 将与 $http.get() 服务和 $http.get() 服务

中的相同

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

  console.log(myArray);
  var myArray2 = [];
  myArray2.push("123");
  console.log(myArray2);

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

AngularJs - Array.push() inside $http.get() produces a flawed array

javascript

arrays

http-get