Цепочка Angular $http звонит правильно?

Ответ 1

Promises действительно помогает с составлением кода для создания асинхронных вызовов. Другими словами, они позволяют составить ваш код аналогичным образом, как вы создадите синхронный набор вызовов (с использованием цепочки .then s), и как если бы код синхронизации был в try/catch block (с .catch).

Итак, представьте, что ваши HTTP-вызовы блокировались - логика у вас будет выглядеть так:

var allowedAccess, data;
try {
  allowedAccess = $http.get(something);

  if (allowedAccess){
    try{
      var result = $http.get(somethingElse);
      data = {data: result};
    } catch (){
      data = {data: "n0pe"};
    }
  } else {
    data = {data: "n0pe"};
  }
} catch (){
  data = {data: "n0pe"};
}
return data;

Вы можете немного упростить его:

var allowedAccess, result;
try {
  allowedAccess = $http.get(something);
  var result;
  if (allowedAccess) {
     result = $http.get(somethingElse);
  } else {
     throw;
  }
  data = {data: result};
} catch () {
   data = {data: "n0pe"};
}
return data;

И это переведёт в асинхронную версию:

return $http
          .get(something)
          .then(function(allowedAccess){
             if (allowedAccess){
               return $http.get(somethingElse);
             } else {
               return $q.reject(); // this is the "throw;" from above
             }
          })
          .then(function(result){
             return {data: result};
          })
          .catch(function(){
             return {data: "n0pe"};
          })

По крайней мере, это аргументы, которые вы могли бы применить при составлении кода с помощью ветвей и асинхронных вызовов.

Я не говорю, что представленная версия оптимальна или короче - она ​​ , однако более DRY из-за одной обработки ошибок. Но просто поймите, что когда вы делаете .then(success, error), это эквивалентно try/catch по предыдущей операции async - это может потребоваться или не понадобиться в зависимости от ваших конкретных обстоятельств.

Ответ 2

Вот как я бы назвал такую ​​проблему:

// returns a promise that resolves some endpoint if allowed
function getDataWithAccess(allowed){
    return allowed ? $http.get(someEndpoint) : $q.reject();
}

// do something with data
function handleData(data){
    // do stuff with your data
}

// main chain
$http.get(accessCredEndpoint)
    .then(getDataWithAccess)
    .then(handleData)
    .catch(function(err){
        return { data: "n0pe" };
    });

Да, это очень похоже на ответ "Новый разработчик", однако я хотел сделать вывод об извлечении функций в свои собственные блоки. Это делает код более понятным.

Ответ 3

$q поможет уменьшить пирамиду вызовов следующим образом:

async-call1.then(...
  aysnc-call2.then(...

Это сообщение в блоге - http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/ - предлагает чистый способ создания нескольких HTTP-запросов. Обратите внимание на более чистый подход с использованием $q. В случае, если вы ударили по одной конечной точке HTTP, использование вашего метода было бы просто прекрасным. Я бы сказал, что у вас все хорошо; $q может обеспечить большую гибкость в будущем.

Сообщение в блоге описывает службу при использовании $q, а код выглядит более чистым.

service('asyncService', function($http, $q) {
  return {
    loadDataFromUrls: function(urls) {
      var deferred = $q.defer();
      var urlCalls = [];
      angular.forEach(urls, function(url) {
        urlCalls.push($http.get(url.url));
      });
      // they may, in fact, all be done, but this
      // executes the callbacks in then, once they are
      // completely finished.
      $q.all(urlCalls)
      .then(...

Я тоже начинаю с promises, поэтому возьмите это с солью.