使用量角器评估角度 js 变量

Question

我有一个画布饼图，我想使用量角器进行测试。 html 元素看起来像：

<canvas id ="my_pie" data-values="ctl.gfx.values" data-categories="ctl.gfx.categories"... 

在我的量角器代码中，我能够评估每个属性数据值和数据类别如下：

...
 var canvas = element(by.css("canvas#my_pie"));
...
 canvas.evaluate("ctl.gfx.categories").then(function(c){
        console.log(c);            
    });
 canvas.evaluate("ctl.gfx.values").then(function(l){
        console.log(v);
    });

一切正常，数据已在控制台上注销，但如果我尝试返回数组本身，它们会以空数组的形式返回，我知道这与 promises 有关，因为这就是量角器评估函数所代表的但我无法弄清楚这一点，因为我对 JS、Jasmine 和 Protractor 完全陌生。

基本上预期的逻辑应该是这样的：

function getMyData(){
   var myCategories = [];
   var myValues = [];

   canvas.evaluate("ctl.gfx.categories").then(function(c){
        myCategories = c;            
    });

   canvas.evaluate("ctl.gfx.values").then(function(v){
        myValues = v;
    });

    // do something with both arrays, concat and return a result
   //final statement would be a return statement.
}

我想做的是在一些处理后返回这些数组的结果，但对我来说，return 语句似乎总是首先运行，因此结果为空。

Answer 1

你不了解Protractor中的Async编程/Promise，请学习并明确要点这个链接表达什么：http://www.protractortest.org/#/control-flow#promises-and-the-control-flow

然后查看此链接，我回答其他问题以解释运行 Protracotr 脚本时会发生什么：promise chaining vs promise.all

然后看下面，我解释了为什么你总是在代码注释中得到一个空数组

function getMyData(){
   var myCategories = [];
   var myValues = [];

   canvas.evaluate("ctl.gfx.categories").then(function(c){
        myCategories = c;            
    });

   canvas.evaluate("ctl.gfx.values").then(function(v){
        myValues = v;
    });

   // Assume we concat the two array and return the new array as below code shows
   var ret = myCategories.concat(myValues);
   return ret;

   // When JavaScript engine explain and execute below code line: 
   // var ret = myCategories.concat(myValues);

   // the above two canvas.evaluate() have not resoved, because they are 
   // executed async not sync.
   // so the myCategories and myValues have not assigned new value, they are 
   // still empty array at this time point, so always return empty array
}

要解决您的问题，请尝试以下代码示例：

function getMyData(){

    return Promise.all([
        canvas.evaluate("ctl.gfx.categories"),
        canvas.evaluate("ctl.gfx.values")
    ]).then(function(data){
        let myCategories = data[0];
        let myValues = data[1];
        return myCategories.concat(myValues);
    });
}


getMyData().then(function(myData){
    console.log(myData);
    // put your code to consume myData at here
})