angular.js - angularjs $q的promise 怎么解决嵌套的ajax问题？

Question

问题一：我需要用第一次发送ajax请求回的数据作为第二次ajax的参数，而第二次的ajax是在第一次ajax的回调函数里发送的。但是这里有问题！就是第二次ajax返回的数据不能赋值给全局对象的属性，不知道是不是掉到坑里了。所以想用$q解决。
问题二：那这个例子来说吧，
// $q 是内置服务，所以可以直接使用
ngApp.factory('UserInfo', ['$http', '$q', function ($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 是为了延迟执行吗？那如果能在回调函数里面写逻辑为什么还要多此一举的延迟执行呢？
问题三：为什么说deferred.promise返回的承诺是最终数据api？这个promise的作用是什么？
问题四：promise.then执行逻辑是什么？

Answer 1

Sebelum menjawab semua soalan anda, izinkan saya menerangkan secara ringkas kod sampel anda! !

Kod sampel anda ialah bahan pengajaran negatif biasa Promise Cirinya ialah: mencipta deferred objek tanpa tujuan, yang hanya meningkatkan kerumitan kod. Mengenai ini, anda boleh melihat anti-corak di sini:

Selepas membetulkan masalah, kami akan kembali untuk membincangkan masalah anda.

Pertama sekali, apabila anda menyedari bahawa anda bertahan callback hell, tahniah, anda berada di jalan ke javascript. Jadi apakah penyelesaiannya? Yang paling baru-baru ini kita lihat termasuk:

• Promise

• generatorBekerjasama dengan co

• async/await

Mengenai pengenalan terperinci kaedah ini, saya tidak membaca jawapan orang lain dengan teliti (mungkin ada yang lebih baik), jadi saya hanya boleh menyiarkan apa yang saya tulis sebelum ini dalam JavaScript

OK, berikut ialah beberapa cara biasa untuk menyelesaikan callback hell Mari kita bincangkan tentang Promisemasalah

anda

Soalan 1: Saya perlu menggunakan data yang dikembalikan oleh permintaan ajax pertama sebagai parameter ajax kedua, dan ajax kedua dihantar dalam fungsi panggil balik ajax pertama. Tetapi ada masalah! Cuma data yang dikembalikan oleh ajax untuk kali kedua tidak boleh diberikan kepada sifat objek global Saya tidak tahu sama ada saya telah jatuh ke dalam lubang. Jadi saya mahu menggunakan $q untuk menyelesaikannya.

Memandangkan kami berharap Promise dapat menyelesaikan masalah panggilan balik, kami pasti tidak akan menggunakan panggilan balik lagi, tetapi masalah anda ialah anda tidak memahami sepenuhnya cara Promise berfungsi. Biar saya berikan anda contoh dahulu:

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

Ini ialah kebergantungan panggil balik biasa, call2 bergantung pada hasil call1. Jika anda menulis semula dengan Promise, apakah yang sepatutnya kelihatan?

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

Terdapat beberapa perkara yang perlu diperhatikan di sini, 1. Tidak perlu deferred objek yang tidak perlu, hanya call1 dan call2 sendiri mengembalikan Promise objek; 2. resolve hampir bermain peranan Peranan cb sebelumnya; 3. Apabila melaksanakan call1 dan call2, jangan masukkan panggilan balik, tetapi dapatkan hasil pulangan melalui then 4. Terutamanya return call2(param1);, benar-benar tidak bersarang lagi (Ramai pemain yang masuk Promise buat kali pertama melakukan kesilapan), balik terus dan anda akan mendapat keputusan pada seterusnya then

Soalan 2: Mari kita ambil contoh ini

Ini adalah soalan pertama Anda bertindak balas secara berlebihan dan jelas merumitkan isu mudah Ini sudah cukup:

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

Di mana

dipanggil, hanya gunakan then terus:

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

Soalan ketiga dan keempat adalah disebabkan oleh kekurangan pemahaman tentang pelaksanaan Promise itu sendiri saya telah menulis tutorial kecil sebelum ini untuk mengajar anda menulis pelaksanaan mudah Promise saya cadangkan anda ikutinya Mula-mula Mempunyai pemahaman umum tentang Promise dirinya dan tulis Janji

langkah demi langkah.