angulaire.js - Comment la promesse d'Angularjs $q résout-elle le problème Ajax imbriqué?

Question

Question 1 : Je dois utiliser les données renvoyées par la première requête ajax comme paramètre du deuxième ajax, et le deuxième ajax est envoyé dans la fonction de rappel du premier ajax. Mais il y a un problème ! C'est juste que les données renvoyées par ajax pour la deuxième fois ne peuvent pas être attribuées aux propriétés de l'objet global. Je ne sais pas si je suis tombé dans un gouffre. Je veux donc utiliser $q pour le résoudre.
Question 2 : Prenons cet exemple,
// $q est un service intégré, vous pouvez donc l'utiliser directement
ngApp.factory('UserInfo', ['$http', '$ q', fonction ($http, $q) {
return {

query : function() {  
  var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行  
  $http({method: 'GET', url: 'scripts/mine.json'}).  
  success(function(data, status, headers, config) {  
    deferred.resolve(data);  // 声明执行成功，即http请求数据成功，可以返回数据了  
  }).  
  error(function(data, status, headers, config) {  
    deferred.reject(data);   // 声明执行失败，即服务器返回错误  
  });  
  return deferred.promise;   // 返回承诺，这里并不是最终数据，而是访问最终数据的API  
} // end query  

};
}]);
deferred.resolve consiste à retarder l'exécution ? Donc, si vous pouvez écrire de la logique dans la fonction de rappel, pourquoi s'embêter à retarder l'exécution ?
Question 3 : Pourquoi dit-on que la promesse renvoyée par deferred.promise est l'API de données finale ? Quelle est la fonction de cette promesse ?
Question 4 : Quelle est la logique d'exécution de promise.then ?

Answer 1

Avant de répondre à toutes vos questions, laissez-moi vous expliquer brièvement votre exemple de code ! !

Votre exemple de code est un matériel pédagogique négatif typique de Promise Sa caractéristique est : créer deferred des objets sans but, ce qui ne fait qu'augmenter la complexité du code. À ce propos, vous pouvez voir l'anti-modèle ici :

Après avoir corrigé le problème, nous reviendrons pour discuter de votre problème.

Tout d'abord, lorsque vous réalisez que vous êtes endurant callback hell, félicitations, vous êtes sur le chemin de javascript. Alors quelles sont les solutions ? Ceux que nous voyons le plus récemment incluent :

• Promise

• generatorCoopérer avec co

• async/await

Concernant l'introduction détaillée de ces méthodes, je n'ai pas lu attentivement les réponses des autres (il y en a peut-être de meilleures), je ne peux donc publier que ce que j'ai écrit auparavant Asynchrone en JavaScript

.

OK, nous avons présenté plusieurs façons courantes de résoudre callback hell, et parlons de votre Promiseproblème

Question 1 : Je dois utiliser les données renvoyées par la première requête ajax comme paramètre du deuxième ajax, et le deuxième ajax est envoyé dans la fonction de rappel du premier ajax. Mais il y a un problème ! C'est juste que les données renvoyées par ajax pour la deuxième fois ne peuvent pas être attribuées aux propriétés de l'objet global. Je ne sais pas si je suis tombé dans un gouffre. Je veux donc utiliser $q pour le résoudre.

Puisque nous espérons que Promise pourra résoudre le problème de l'enfer des rappels, nous n'utiliserons certainement plus les rappels. Vos doutes sont corrects, mais votre problème est que vous ne comprenez pas complètement comment Promise fonctionne. Laissez-moi d'abord vous donner un exemple :

var call1 = function(cb) {
    setTimeout(function() {
        cb('call1');
    }, 10);
};

var call2 = function(param1, cb) {
    setTimeout(function() {
        cb(param1 + ' + call2');
    }, 10);
};

call1(function(param1) {
    call2(param1, function(param2) {
        console.log(param2); //call1 + call2
    });
});

Il s'agit d'une dépendance de rappel typique, call2 dépend du résultat de call1. Si vous le réécrivez avec Promise, à quoi devrait-il ressembler ?

var call1 = function() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('call1');
        }, 10);
    });
};

var call2 = function(param1) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(param1 + ' + call2');
        }, 10);
    });
};

call1()
    .then(function(param1) {
        return call2(param1);
    })
    .then(function(param2) {
        console.log(param2); //call1 + call2
    });

Il y a quelques choses à noter ici, 1. Il n'y a pas besoin d'objets deferred inutiles, juste call1 et call2 renvoient eux-mêmes Promise objets 2. resolve joue presque ; le rôle Le rôle du cb précédent; 3. Lors de l'exécution de call1 et call2, n'insérez pas de rappel, mais obtenez le résultat de retour via then 4. Surtout return call2(param1);, ne l'imbriquez vraiment pas encore une fois (Beaucoup de joueurs qui entrent Promise pour la première fois font une erreur), revenez directement et vous obtiendrez le résultat dans le prochain then

Question 2 : Prenons cet exemple

C'est la première question. Vous avez réagi de manière excessive et avez évidemment compliqué un problème simple. Cela suffit :

ngApp.factory('UserInfo', ['$http', '$q', function($http, $q) {
    return {
        query: function() {
            return $http({method: 'GET', url: 'scripts/mine.json'});
        }
    };
}]);

Là où

est appelé, utilisez simplement then directement :

UserInfo
    .query()
    .then(function(data){
        console.log(data);//这不就是结果喽！
    });

Les troisième et quatrième questions sont toutes dues au manque de compréhension de l'implémentation de Promise lui-même. J'ai déjà écrit un petit tutoriel pour vous apprendre à écrire une implémentation simple de Promise à la main. suivez-le. Tout d'abord, ayez une compréhension générale de Promise lui-même et rédigez une promesse

étape par étape.