用Fetch API替换$ http [英] Replacing $http with Fetch API

问题描述

我用Fetch API替换了$http，并用Promise API替换了$q.因此，Angular不再运行摘要循环，因此UI也无法呈现.为了解决这个问题，我尝试了Zone.js，这似乎可以部分解决我们的问题.不幸的是，其API在0.6中已完全更改，因此我们使用的是旧版0.5.15 .

I'm replacing $http with Fetch API and got replaced $q with Promise API. Because of that, Angular didn't run digest cycles anymore, thus UI didn't render. To solve this problem I tried Zone.js and that seems to solve our problems partially. Unfortunately its API completely changed in 0.6 so we're using legacy 0.5.15.

现在是实际问题.

刷新页面时，Angular会按预期方式配置和引导应用程序.在此阶段，我将初始化区域，并用区域和$rootScope.$digest()装饰$rootScope.apply.现在，当我在状态/路由(使用ui-router)之间进行转换时，一切都按预期工作，但是在完全刷新时，出现了竞争状况，并且区域/摘要无法正确运行.我不确定该如何解决.

When refreshing the page Angular configs and bootstraps the application like expected. In this phase I'm initializing the Zone and decorating the $rootScope.apply with the Zone and $rootScope.$digest(). Now when I transition between states/routes (with ui-router) everything works as expected, but when full refreshing there's a race condition and the zone/digest doesn't run correctly. I'm not sure how to fix it.

在angular.run()块中有以下代码:

console.log('Zone setup begin');
const scopePrototype = $rootScope.constructor.prototype;
const originalApply = scopePrototype.$apply;
const zoneOptions = {
    afterTask: function afterTask() {
        try {
            $rootScope.$digest();
        } catch (e) {
            $exceptionHandler(e);
            throw e;
        }
    }
};

scopePrototype.$apply = function $applyFn() : void {
    const scope = this;
    const applyArgs = arguments;

    window.zone.fork(zoneOptions).run(() => {
        originalApply.apply(scope, applyArgs);
        console.log('Zone + $digest run!');
    });
};
console.log('Zone setup end');

上面，您可以看到我在区域初始化开始，结束和运行时(+ Angular摘要循环)登录到控制台.在我通过Fetch API提取数据的控制器中，我添加了console.log('Data fetched!');，因此我知道何时提取数据.

Above you can see that I log to the console when the Zone initialization begins, when it ends and when it's run (+ Angular digest cycle). In my controller where I fetch the data via Fetch API I've added a console.log('Data fetched!'); so I know when the data has been fetched.

现在在控制台中输出:

使用ui路由器进行状态转换 (完美运行)

请注意摘要将在最后运行.

Notice that the digest is run in the end.

Zone setup begin
Zone setup end
Zone + $digest run!
Zone + $digest run!
Zone + $digest run!
Zone + $digest run!
Data fetched!
Zone + $digest run!

状态/路由上的全刷新 (最终不会运行)

Zone setup begin
Zone setup end
Zone + $digest run!
Zone + $digest run!
Zone + $digest run!
Zone + $digest run!
Data fetched!

如您所见，区域/摘要在获取数据后未运行，这就是为什么数据和UI未呈现在页面上的原因.

As you can see the Zone/digest doesn't run after the data is fetched, which is why the data and UI isn't rendered on the page.

推荐答案

转换由

Convert the ES6 promises created by the fetch API to AngularJS $q promises with $q.when.

AngularJS通过提供自己的事件处理循环来修改常规JavaScript流.这将JavaScript分为经典和AngularJS执行上下文.只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等... 2 由于承诺来自AngularJS框架之外，因此该框架没有意识到模型的更改，并且没有更新DOM.

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc...² Since the promise comes from outside the AngularJS framework, the framework is unaware of changes to the model and does not update the DOM.

使用$q.when将外部诺言转换为Angular框架诺言:

Use $q.when to convert the external promise to an Angular framework promise:

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

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

使用$ q服务诺言已与AngularJS框架及其摘要周期正确集成.

Use $q Service promises that are properly integrated with the AngularJS framework and its digest cycle.

$ q.when

将可能是值或(第三方)可允许诺言的对象包装为$q诺言.当您处理的对象可能是或不是承诺时，或者承诺来自无法信任的来源时，这很有用.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

-AngularJS $ q服务API参考-$ q.when

这篇关于用Fetch API替换$ http的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！