使用 extend 关键字防止函数在异步调用完成之前返回

Question

代码是这样的。

//Extending a Nativescript module.      
var test = ImageProvider.extend({

  getImage: function(url){

    //async call to get the image from cache
    cacheService.getImage(url,  
      function(image){
         return image
      }, 
      function(error){ 
        return null 
    });
 }
});

如何防止 getImage 函数在提供图像之前返回？ 我不喜欢使用 typescript 或 babel 来解决问题。但如有需要请指教。 （也试过 babel，打字稿没有任何运气） 我尝试通过设置来使用 await 和 yield：

"android": {"v8Flags": "--expose_gc --use_strict --harmony"} 

在 package.json 文件中没有成功。

使用产量给出错误的示例

"use strict" 

function onNavigationgTo(args){ 
  yield test(); 
}

function* test(){
  return 1;
}

在我添加 yield 关键字之前它可以正常工作。使用 yield 给出以下结果。 SyntaxError: Unexpected strict mode reserved word File : "unknown"

Answer 1

您想要做的可能不是一个好主意，因为它会在程序加载某些内容时阻塞 UI。这个问题通常通过回调或承诺/自定义任务实现来解决。回调示例：

getImage: function(url, callback){
    //async call to get the image from cache
    cacheService.getImage(url,  
      function(image){
         callback({ image: image, error: null });
      }, 
      function(error){ 
        callback({ image: null, error: error });
    });
 }

然后用法看起来像

ImageProvider.getImage('someurl.png', function(result) {
    if (result.image) {
        // image has successfully downloaded -- good!
    }
    else {
        // handle result.error
    }
});

Answer 2

您为此使用ES6 Promises。

var test = ImageProvider.extend({
  getImage: function(url){
    //async call to get the image from cache
    return new Promise(function(resolve,  reject) {
        cacheService.getImage(url,  
          function(image){
             resolve(image);
          }, 
          function(error){ 
            reject(error);
        });
    });
 }
});

然后像这样使用它

test.getImage('http://...').then(function(image) {
    // do stuff
});

所有主流浏览器都支持原生 Promise.. 除了 IE（它由 edge 支持）。 如果你想要更广泛的浏览器支持，我建议使用bluebird。