AngularJS:在这种情况下如何使用 $q 承诺功能来等待数据准备好? [英] AngularJS : How to use the $q promise feature in this situation to wait for data to be ready?

问题描述

我有一个 Controller，它在 Factory 中启动 API 调用.目前我开始调用，然后在调用之后我有一个函数来检查 Array 的状态.但是我不确定如何在收集数据时强制它在这里等待，因此需要某种 $q 实现.

I have a Controller which starts an API call in a Factory. Currently I start the call, then I have a function after that call to check the status of the Array. However I'm not sure how to force it to wait here while the data is being gathered, thus the need for some kind of $q implementation.

正如您在下面的屏幕截图中看到的，vs.tickers 返回一个空的对象或数组.最后，GetTickersFactory 中的 console.log 触发:

As you can see in the screenshot below, vs.tickers returns an empty Object, or Array. Then finally the console.log in GetTickersFactory fires:

第一个控制器

if (root.tickerType === 'portfolio') {

    // Call to factory to start the API GETS:
    GetTickersFactory.getTickers('portfolio');

    // I then call a function in the Factory to return the array
    // Which isn't ready yet of course since it returns undefined...
    vs.tickers = GetTickersFactory.returnPortfolioTickers();

    console.log('portfolio');
    console.log('vs.tickers = ', vs.tickers);
}

GetTickersFactory 中的 getTickers 函数 |也许这会有所帮助:完整工厂的要点.

getTickers function in the GetTickersFactory | Perhaps this helps: the Gist for the full Factory.

function getTickers(type, load, searchedTicker) {
    load = load || loadString; searchedTicker = searchedTicker || '';

    var portfolioTickersArray = [], searchedTickersArray  = [];

    tickersPane.loadingTickersDone = false;

    switch(type) {
        case 'searched':
            ....
            break;

        case 'portfolio':

            if (portfolioCached) {
                // The API Call (cached)
                ApiFactory.getWatchList().then(function(data) {
                    portfolioTickersArray = renderTickers(data.data.tickers, undefined, type);
                    portfolioTickers.that = portfolioTickersArray;
                    tickersPane.loadingTickersDone = true;
                    console.log('portfolioTickersArray: ', portfolioTickersArray);
                    return portfolioTickersArray;
                });

            } else {
                // The API Call (not cached)
                ApiFactory.getWatchListRefresh().then(function(data) {
                    portfolioTickersArray = renderTickers(data.data.tickers, undefined, type);
                    portfolioTickers.that = portfolioTickersArray;
                    portfolioCached = true;
                    tickersPane.loadingTickersDone = true;
                    console.log('portfolioTickersArray: ', portfolioTickersArray);
                    return portfolioTickersArray;
                });
            }
            break;
    }

    function renderTickers(data, searchedTicker, type) {
        ....
    }
}

我在 getTickersFactory.js 中使用的返回数组函数我相信我不应该使用它，而是弄清楚如何使用承诺:

function returnPortfolioTickers() {
    return portfolioTickers.that;
}

<小时>

注意我最初尝试过这个，但结果相同:

---

Note I did originally try this, but with the same results:

vs.tickers = GetTickersFactory.getTickers('portfolio');

vs.tickers 将返回 undefined

推荐答案

你的 switch case 应该返回一个 promise，这样它的调用者函数就会 .then 在 promise 得到解决时调用

Your switch cases should return a promise so that it caller function will .then called when promise gets resolved

工厂代码

function getTickers(type, load, searchedTicker) {
    //other code remains same
    tickersPane.loadingTickersDone = false;
    switch (type) {
        case 'searched':
            return ApiFactory.getTickers(null, load).then(function(data) {
                //other code remains same
                if (tickersPane.tempTickers.length > 0) {
                    //other code remains same
                    return returnData(searchedTickersArray);
                }
                return []; //return default variable to continue promise chain
            });
            break;
        case 'portfolio':
            tickersPane.addOption = false;
            tickersPane.removeOption = true;
            tickersPane.displayTopTags = false;
            tickersPane.displayPortfolio = true;

            if (portfolioCached) {
                return ApiFactory.getWatchList().then(function(data) {
                    //other code remains same
                    return returnData(portfolioTickersArray);
                });
            } else {
                return ApiFactory.getWatchListRefresh().then(function(data) {
                    //other code remains same
                    return returnData(portfolioTickersArray);
                });
            }
            break;
    }
    function renderTickers(data, searchedTicker, type) {
        //this should be as is
    }
    function returnData(data) {
        tickersPane.loadingTickersDone = true;
        return data;
    }
    //tickersPane.loadingTickersDone = true;
    //return data; //removed this line and move to function
}

控制器

if (root.tickerType === 'portfolio') {
    // Call to factory to start the API GETS:
    GetTickersFactory.getTickers('portfolio').then(resp){
         vs.tickers = GetTickersFactory.returnPortfolioTickers();
         console.log('portfolio');
         console.log('vs.tickers = ', vs.tickers);
    };
}

这篇关于AngularJS:在这种情况下如何使用 $q 承诺功能来等待数据准备好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！