Преобразуйте промисы ES6, созданные fetch API, в AngularJS $ q обещания с $q.when.

Используйте $q.when для преобразования обещаний ES6 в обещания AngularJS¹

AngularJS изменяет обычный поток JavaScript, предоставляя собственный цикл обработки событий. Это разделяет JavaScript на классический и контекст выполнения AngularJS. Только операции, которые применяются в контексте выполнения AngularJS, получат выгоду от привязки данных AngularJS, обработки исключений, наблюдения за свойствами и т. д....² Поскольку обещание исходит из-за пределов фреймворка AngularJS, фреймворк не знает об изменениях в модели и не обновить ДОМ.

Используйте $q.when, чтобы преобразовать внешнее обещание в обещание фреймворка Angular:

var myRequest = new Request('flowers.jpg');

$q.when(fetch(myRequest)).then(function(response) {
    //code here
})

Используйте промисы $q Service, которые должным образом интегрированы с фреймворком AngularJS и его циклом дайджеста.

$q.когда

Оборачивает объект, который может быть значением или обещанием (стороннего производителя), в обещание $q. Это полезно, когда вы имеете дело с объектом, который может быть или не быть обещанием, или если обещание исходит из источника, которому нельзя доверять.

-- Справочник по API службы AngularJS $q – $q.when

Обоснование

Обертывание $q.when будет работать, но, по опыту моей команды, это будет очень привередливо и подвержено ошибкам. Например, возврат $q.when из тела функции Promise.then по-прежнему будет цепочкой, как обычный Promise, и вы не получите $digest при обратных вызовах.

Также требуется, чтобы все авторы понимали разницу между двумя очень похожими конструкциями (Promise/$q) и заботились об их конкретных типах для каждого уровня асинхронного вызова. Если вы используете современные удобства, такие как async/await (которые еще больше абстрагируют типы промисов), вы столкнетесь с еще большими проблемами. Внезапно ни один из ваших кодов не может быть независимым от фреймворка.

Наша команда решила, что стоит выпустить большой обезьяний патч, чтобы убедиться, что все промисы (и ключевые слова async/await) «просто работают», не требуя дополнительных размышлений.

Уродливый? Да. Но мы чувствовали, что это был хороший компромисс.

Исправлены обратные вызовы Promise, чтобы они всегда применяли $rootScope

Сначала мы устанавливаем патч против Promise в блоке angular.run:

angular.module(...).run(normalizePromiseSideEffects);

normalizePromiseSideEffects.$inject = ['$rootScope'];

function normalizePromiseSideEffects($rootScope) {
  attachScopeApplicationToPromiseMethod('then');
  attachScopeApplicationToPromiseMethod('catch');
  attachScopeApplicationToPromiseMethod('finally');

  function attachScopeApplicationToPromiseMethod(methodName) {
    const NativePromiseAPI = window.Promise;
    const nativeImplementation = NativePromiseAPI.prototype[methodName];

    NativePromiseAPI.prototype[methodName] = function(...promiseArgs) {
      const newPromiseArgs = promiseArgs.map(wrapFunctionInScopeApplication);
      return nativeImplementation.bind(this)(...newPromiseArgs);
    };
  }

  function wrapFunctionInScopeApplication(fn) {
    if (!isFunction(fn) || fn.isScopeApplicationWrapped) {
      return fn;
    }

    const wrappedFn = (...args) => {
      const result = fn(...args);
      // this API is used since it's $q was using in AngularJS src
      $rootScope.$evalAsync();
      return result;
    };
    wrappedFn.isScopeApplicationWrapped = true;
    return wrappedFn;
  }
}

Асинхронный/ожидание

Если вы хотите поддерживать использование async/await, вам также необходимо настроить Babel, чтобы он всегда реализовывал синтаксис в виде промисов. Мы использовали babel-plugin-transform-async-to-promises.