api 调用完成后离子隐藏启动画面

Question

我想一直显示 Splashscreen，直到我的应用程序结束以从不同的 Api 调用中获取多个数据。隐藏 Splashscreen 的代码基于 Timer，我不希望这样：

 app.run(function($cordovaSplashscreen) {
    setTimeout(function() {
    $cordovaSplashscreen.hide()
  }, 5000)
 })

我的当前行为是启动画面显示 5 秒，然后出现空白页中的第一个视图，仅几秒钟后，数据就会在我的视图中可见。

我的问题是：如何在我的 app.js 中添加逻辑以仅在 API 调用完成时隐藏启动画面，这样用户将看到第一个视图数据可以使用了。

Answer 1

在运行块上，我没有看到任何函数调用来获取数据。如果您的 API 是基于 promise 的，您可以在成功或错误函数时隐藏闪屏。但我也不鼓励您从运行块调用它，因为它可能会导致难以检测的问题。

我建议使用 ui-router 并尝试解析函数。此函数在转换到视图之前加载。

Answer 2

您可以做的是使用 angularjs 内置 promise 库等待所有请求完成 $q.all(promises)。在 success 函数中，您可以在控制器中调用 $cordovaSplashscreen.hide() 来隐藏闪屏，就像已经提到的一样。示例代码：

index.html

<body ng-controller="AppController"></body>

app.js

var module = angular.module( "app", [ "ngCordova", "yourServices" ] )

module.config( ... );
module.run( ... );
module.controller( "ApplicationController", ApplicationController );

function ApplicationController( $cordovaSplashscreen, $q, apiCallService ) {

    loadData();

    function loadData() {

        $q.all( apiCallService.loadFoo1, apiCallService.loadFoo2, apiCallService.loadFoo3)
             .then( onSuccess, onError );

        function onSuccess() {
            $cordovaSplashscreen.hide()
        }

        function onError() {
            // do something useful else
        }
    }
}

yourServices.js

angular
    .module( "yourServices", [ "$http" ] )
    .factory( "apiCallService", apiCallService );

function apiCallService( "$http" ) {
    return {
        loadFoo1: loadFoo1,
        loadFoo2: loadFoo2,
        loadFoo3: loadFoo3
    }

    function loadFoo1() {
        return $http.get( "yourAPI" );
    }

    ...
}

请注意，此代码不是工作示例。但它应该解释你如何继续解决你的问题。此外，您还必须考虑如果您的一个请求在 onError() 函数失败时会发生什么。

此外，您应该将代码包装到 onDeviceReady 事件中。假设您使用的是 ionic，您可以使用这段代码：

$ionicPlatform.ready( loadData );

不要忘记将 $ionicPlatform 注入到控制器函数中。

api 调用完成后离子隐藏启动画面

ionic hide splashscreen after api call are completed

javascript

api

splash-screen

angularjs

ionic-framework