1
votes

AngularJs - Array.push () dans $ http.get () produit un tableau défectueux

Je n'arrive pas à comprendre ce qui ne va pas avec mon code. Cela semble être un problème javascript.

Je charge un fichier txt local en utilisant $ http.get ( existe-t-il une autre méthode? ). Je veux pousser ce contenu dans un tableau. Pour des raisons de test, je pousse juste n'importe quelle chaîne juste pour être sûr que cela n'a pas à voir avec le fichier txt réel.

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

console.log(myArray);

Ce code simple ne générera pas un tableau approprié. Voici une capture d'écran de l'outil de développement Chrome si j'ai console.log le tableau créé:

Maintenant , cela ressemble à un tableau approprié mais ce n'est pas le cas. Si je console.log (myArray.length) , cela renvoie 0 .

Voici plutôt à quoi devrait ressembler un tableau approprié en utilisant le même code myArray.push ("123") extérieur $ http.get () fonction:

Quelqu'un peut-il dire quelle est la différence entre les 2 tableaux et pourquoi le premier est créé différemment si je le fais dans la fonction $ http.get () ?

javascript arrays angularjs http-get

4 commentaires

Pouvez-vous montrer où vous consignez la console sur la baie? Est-ce à l'intérieur de la fonction de réussite ou à l'extérieur?

@Soviut Je me connecte à la console en dehors de la fonction de réussite

vous devez modifier votre question et l'inclure car elle est essentielle aux réponses que nous avons données.

Copie possible de Pourquoi ma variable est-elle inchangée après l'avoir modifiée à l'intérieur d'une fonction? - Référence de code asynchrone

3 Réponses :

2
votes

Parce que vous êtes console.logging avant que le tableau n'obtienne la valeur la plus probable, et à l'intérieur de la console, chrome met à jour le tableau (puisqu'il s'agit d'une référence) mais pas la longueur (car c'est une primitive). C'est pourquoi, dans le cadre du tableau, vous pouvez voir la propriété length correctement définie. Si vous faites:

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');

Vous pouvez voir ce que je veux dire.

2 commentaires

J'ai du mal à comprendre la première partie de votre code. Comment puis-je modifier mon code pour que, lorsque je me connecte à la console en dehors de la fonction, le tableau soit prêt?

Vous attendez qu'il soit prêt - utilisez .puis ou passez un rappel

2
votes

Il s'agit d'un problème asynchrone. Vous appelez console.log () en dehors de la fonction "résoudre" de la promesse.

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

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

Comme il s'agit d'une opération asynchrone, cette fonction de résolution n'est appelée qu'une fois La requête $ http.get () se termine (généralement quelques centaines de millisecondes plus tard). Cependant, il n'attend PAS, donc le reste du code continue à s'exécuter. Donc, il lance le get () , puis exécute immédiatement console.log () avant que la requête http n'ait eu une chance de se terminer, donc il n'a pas rempli le tableau au moment où console.log () est appelé.

Si vous deviez mettre console.log () dans la fonction de résolution, vous ' d voir que le tableau a été correctement rempli car il a attendu la fin de la requête http, rempli le tableau, et seulement alors il a imprimé le résultat.

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

// outside resolve function     
console.log(myArray)

0 commentaires

0
votes

J'ai compris votre problème et essayé le code ci-dessous et j'obtiens le même tableau, c'est correct. vous assignez en poussant un objet retournant du service au lieu de array.Array.push () fonctionnera de la même manière avec le service $ http.get () et en dehors du service $ 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);

0 commentaires