Kullandığı Facebook Giriş hizmetlere örnek olarak gördümvaat ediyorFB Grafik erişmek için API

Örnek 1:

this.api = function(item) {
  var deferred = $q.defer();
  if (item) {
    facebook.FB.api('/'   item, function (result) {
      $rootScope.$apply(function () {
        if (angular.isUndefined(result.error)) {
          deferred.resolve(result);
        } else {
          deferred.reject(result.error);
        }
      });
    });
  }
  return deferred.promise;
}

Ve "$scope.$digest() // Manualy scope evaluation" kullanılan hizmetler tepki var

Örnek 2:

angular.module('HomePageModule', []).factory('facebookConnect', function() {
    return new function() {
        this.askFacebookForAuthentication = function(fail, success) {
            FB.login(function(response) {
                if (response.authResponse) {
                    FB.api('/me', success);
                } else {
                    fail('User cancelled login or did not fully authorize.');
                }
            });
        }
    }
});

function ConnectCtrl(facebookConnect, $scope, $resource) {

    $scope.user = {}
    $scope.error = null;

    $scope.registerWithFacebook = function() {
        facebookConnect.askFacebookForAuthentication(
        function(reason) { // fail
            $scope.error = reason;
        }, function(user) { // success
            $scope.user = user
            $scope.$digest() // Manual scope evaluation
        });
    }
}

JSFiddle

Sorular:

• bu . ne ^strong>farkörnekler yukarıda?
• bu . ne ^strong>sebepvedurumdakullanmak içins . $ hizmet?
• ve nasıliş?

Bu sorunuza tam bir cevap olmayacak, ama umarım bu $q hizmet belgeleri okumak için çalıştığınızda, size ve başkalarına yardımcı olacaktır. Beni biraz anlamaya götürdü.

Hadi bir an için AngularJS bir kenara bırakıp sadece Facebook API çağrıları göz önünde bulundurun. Hem API kullanın diyorgeri aramamekanizma Facebook tepkisi olduğunda arayan bildirmek için:

  facebook.FB.api('/'   item, function (result) {
    if (result.error) {
      // handle error
    } else {
      // handle success
    }
  });
  // program continues while request is pending
  ...

Bu JavaScript ve diğer diller içinde zaman uyumsuz işlemler işlemek için standart bir model.

Bu model ile büyük bir sorun, birbirini izleyen her bir işlem bir önceki işlemin sonucuna bağlı olduğu zaman uyumsuz işlemler, bir dizi gerçekleştirmek için gerektiğinde ortaya çıkar. Bu kod bunu yapıyor:

  FB.login(function(response) {
      if (response.authResponse) {
          FB.api('/me', success);
      } else {
          fail('User cancelled login or did not fully authorize.');
      }
  });

İlk oturum için çalışır, ve sonra sadece giriş başarılı olduğunu doğruladıktan sonra mı Graph API isteği yapmak.

Hatta sadece iki işlem zincirleme birlikte olan bu dava, olaylar karışmaya başlar. Yöntemi askFacebookForAuthentication başarısızlık ve başarı için bir geri arama kabul eder, ama FB.login başarılı ama FB.api başarısız olduğunda ne olur? Bu yöntem, her zaman FB.api yöntemin sonucu ne olursa olsun success geri çağırır.

Şimdi düşünün bunu yapmaya çalıştığını kodu sağlam bir dizi üç veya daha fazla zaman uyumsuz işlemler, bir şekilde düzgün işler hataları her adım ve olacaktır okunaklı herkesten, hatta senden sonra bir kaç hafta. Mümkün, ama çok kolay sadece yuvalama o geri tutun ve hataları kaybetmesine yol boyunca.

Şimdi, hadi $q servis tarafından uygulanan Facebook bir an için API ve sadece Açısal Sözler API düşünün bir kenara. Desen uygulanan bu hizmeti bir girişim için devre asenkron programlama arkasına bir şey andıran bir doğrusal dizi basit ifadeler ile yeteneği için 'AT' bir hata her adımda ve kolu sonunda, anlamsal olarak benzer tanıdık try/catch blok.

Bu yapmacık örneği ele alalım. İkinci işlev birincisi: sonuç tükettiği iki işlevi var ki

 var firstFn = function(param) {
    // do something with param
    return 'firstResult';
 };

 var secondFn = function(param) {
    // do something with param
    return 'secondResult';
 };

 secondFn(firstFn()); 

Şimdi hayal firstFn ve secondFn hem tamamlamak için uzun bir zaman alır, bu sıra süreç istiyoruz bu yüzden uyumsuz. İlk operasyonlar zinciri temsil eden deferred yeni bir nesne oluşturuyoruz:

 var deferred = $q.defer();
 var promise = deferred.promise;

promise özelliği zincirinin nihai sonucu temsil eder. Eğer hemen oluşturduktan sonra sözü oturum, sadece boş bir nesne ({}) olduğunu görürsünüz. Henüz bir şey yok, doğru boyunca hareket görmek için.

Şimdiye kadar verdiğimiz sözü sadece zincirinin başlangıç noktasını temsil eder. Şimdi iki operasyonlarımız ekleyin:

 promise = promise.then(firstFn).then(secondFn);

then yöntemi zincirine bir adım ekler ve sonra da yeni bir söz genişletilmiş zincirinin nihai sonucu belirten bir değer gönderir. Sizin gibi pek çok adım ekleyebilirsiniz.

Şimdiye kadar, fonksiyonları zincirimizi kurduk, ama hiçbir şey olmadı. Şey, zincirin ilk gerçek adım deferred.resolve, geçmek istediğiniz başlangıç değerini belirlemek arayarak başlamak:

 deferred.resolve('initial value');

Ve hala hiçbir şey olmuyor. Model değişiklikleri doğru uyulmasını sağlamak için, Açısal aslında bir dahaki sefere $apply çağrılana kadar zincirinde ilk adımı aramıyor:

 deferred.resolve('initial value');
 $rootScope.$apply();

 // or     
 $rootScope.$apply(function() {
    deferred.resolve('initial value');
 });

Hata işleme ne olacak? Şimdiye kadar sadece bir belirttinizbaşarı işleyicisizincirdeki her adımda. then ayrıca isteğe bağlı ikinci bir argüman olarak bir hata işleyicisi kabul eder. İşte başka bir, söz bir zincir, hata işleme ile bu zaman örnek: daha uzun

 var firstFn = function(param) {
    // do something with param
    if (param == 'bad value') {
      return $q.reject('invalid value');
    } else {
      return 'firstResult';
    }
 };

 var secondFn = function(param) {
    // do something with param
    if (param == 'bad value') {
      return $q.reject('invalid value');
    } else {
      return 'secondResult';
    }
 };

 var thirdFn = function(param) {
    // do something with param
    return 'thirdResult';
 };

 var errorFn = function(message) {
   // handle error
 };

 var deferred = $q.defer();
 var promise = deferred.promise.then(firstFn).then(secondFn).then(thirdFn, errorFn);

Bu örnekte gördüğünüz gibi, zincirdeki her işleyicisi sonraki trafik yönlendirmek için fırsat varhatasonraki yerine işleyicisibaşarıişleyici. Çoğu durumda zincirinin sonunda tek bir hata işleyicisi olabilir, ama aynı zamanda kurtarma girişimi Ara hata işleyici olabilir.

Hızlı bir şekilde örneklere (ve soru) geri dönmek için, sadece gözlemleyerek model değişikliği Açısal yol için Facebook geri çağırma yönelimli API uyum için iki farklı yolu temsil ettiklerini söyleyebilirim. İlk örnek bir kapsam için eklenebilir hangi bir söz, API çağrısı sarar ve Açısal var şablon sistemi tarafından anlaşılır. İkinci doğrudan geri arama sonuç kapsamında ayarı, ve sonra $scope.$digest() Açısal değişimi fark etmek için aradım, bir dış kaynaktan kaba kuvvet daha fazla yaklaşım getiriyor.

İki örnek ilk oturum açma adım eksik olduğu için doğrudan karşılaştırılabilir değildir. Ancak, genel olarak arzu edilen servisleri bu gibi harici API ile etkileşim saklanması ve vaat olarak denetleyicileri için sonuçlar. Bu yolu denetleyicileri dış sorunlar, ayrı tutmak ve daha kolay alay hizmetleri ile test edebilirsin.