AngularJS 1.5异步服务调用问题：单例服务在控制器中的使用

嘿，作为Angular新手，你碰到的这个问题是异步操作的典型坑——remote.get()是异步请求，直接赋值肯定拿不到返回的数据，得靠Promise来处理异步流。咱们一步步修正你的代码：

第一步：修正你的单例服务 #

首先，你的服务需要返回异步请求的Promise，这样控制器才能通过回调拿到数据。另外要确保你的服务已经正确注册到Angular模块里：

// 先把服务注册到你的Angular模块（替换成你的实际模块名）
angular.module('yourAppModule').service('obiUrlService', obiUrlService);

function obiUrlService(remote, SERVER_URL, URI, OBI_URL) {
    // 让getObiurl方法返回Promise
    this.getObiurl = function() {
        // 关键：一定要返回remote.get()的Promise链
        return remote.get(SERVER_URL + URI.obiDocumentViewer + '/' + OBI_URL.obiUrl)
            .then(function(response) {
                // 根据你的remote服务返回结构，这里返回实际需要的数据（通常是response.data）
                return response.data;
            });
    };

    // 你原来的this.obiUrl = this.getObiurl其实没必要，直接调用getObiurl方法即可
}

为什么要这么改？因为remote.get()发起的是异步HTTP请求，它不会立刻返回数据，而是返回一个Promise对象。我们把这个Promise返回出去，控制器就能通过.then()来监听请求完成的事件。

第二步：在控制器中正确调用服务 #

你原来直接赋值vm.myurlData = obiUrlService.obiUrl的方式行不通，因为这只是把方法赋值给了变量，没有触发异步请求，也没法拿到返回数据。正确的做法是调用服务方法并通过Promise回调赋值：

// 注册控制器到同一模块
angular.module('yourAppModule').controller('YourController', YourController);

function YourController(obiUrlService) {
    var vm = this;

    // 调用服务的异步方法，通过.then获取数据
    obiUrlService.getObiurl()
        .then(function(data) {
            // 请求成功后，把数据赋值给vm的属性
            vm.myurlData = data;
            // 这里可以加数据获取后的逻辑，比如渲染相关操作
        })
        .catch(function(error) {
            // 别忘了处理请求失败的情况！
            console.error('获取OBI URL失败:', error);
        });
}

这样当异步请求完成时，.then()里的回调会被触发，vm.myurlData会被赋值为返回的数据，Angular的脏检查机制会自动更新视图。

额外优化：缓存异步结果（可选） #

因为你用的是单例服务，如果你希望多次调用getObiurl只发起一次请求，可以在服务里缓存结果：

function obiUrlService(remote, SERVER_URL, URI, OBI_URL) {
    var cachedObiUrl = null; // 用于缓存已获取的数据

    this.getObiurl = function() {
        // 如果已经缓存过数据，直接返回缓存的Promise
        if (cachedObiUrl) {
            return Promise.resolve(cachedObiUrl);
        }

        return remote.get(SERVER_URL + URI.obiDocumentViewer + '/' + OBI_URL.obiUrl)
            .then(function(response) {
                cachedObiUrl = response.data;
                return cachedObiUrl;
            });
    };

    // 可选：提供获取缓存数据的方法
    this.getCachedObiUrl = function() {
        return cachedObiUrl;
    };
}

这样第一次调用会发起请求，后续调用直接用缓存的数据，适合单例服务的使用场景。

内容的提问来源于stack exchange，提问作者Anny