javascript的语法自测(异步)

之前介绍过这个作者给的 javascript的语法自测(数组)
现在我们聊一聊异步的事情。

async

首先是最外层的测试,给了一个回调done,然后在两次调用finish()的时候,调用done。

it('you should understand how to use promises to handle asynchronicity', function(done) {
  var flag = false;
  var finished = 0;
  var total = 2;

  function finish(_done) {
    if (++finished === total) { _done(); }
  }

  asyncAnswers.async(true).then(function(result) {
    flag = result;
    expect(flag).to.eql(true);
    finish(done);
  });

  asyncAnswers.async('success').then(function(result) {
    flag = result;
    expect(flag).to.eql('success');
    finish(done);
  });

  expect(flag).to.eql(false);
});

测试代码比较简单,需要保证then执行的回调函数的输入是async的输入,所以我新返回了一个promise,在支持promise的浏览器里面是可以测试通过的

async: function(value) {
  return new Promise(function (resolve) {
    resolve(value);
  });
},

当然也可以通过语法糖

async: function(value) {
  return Promise.resolve(value);
}

作者的答案,利用了Jquery的Deferred

 async: function(value) {
    var dfd = $.Deferred();
    setTimeout(function() {
      dfd.resolve(value);
    }, 10);
    return dfd.promise();
  },

manipulateRemoteData

题目要求获得json数据,并进行name的提取和排序
json数据如下

{
  "people" : [
    { "name" : "Matt" },
    { "name" : "Rebecca" },
    { "name" : "Paul" },
    { "name" : "Alex" },
    { "name" : "Adam" }
  ]
}

断言

 it('you should be able to retrieve data from the server and return a sorted array of names', function(done) {
    var url = '/data/testdata.json';

    asyncAnswers.manipulateRemoteData(url).then(function(result) {
      expect(result).to.have.length(5);
      expect(result.join(' ')).to.eql('Adam Alex Matt Paul Rebecca');
      done();
    });
  });

我用promise写的代码

manipulateRemoteData: function(url) {
  return Promise.resolve($.ajax(url)).then(function (value) {
    var res = [];
    var people = value.people;
    for(var i=0;i<people.length;i++){
      res.push(people[i].name);
    }
    return res.sort();
  })
}

作者给的代码,用了一下map


  manipulateRemoteData: function(url) {
    var dfd = $.Deferred();

    $.ajax(url).then(function(resp) {
      var people = $.map(resp.people, function(person) {
        return person.name;
      });
      dfd.resolve(people.sort());
    });

    return dfd.promise();
  }
};

尝试一些使用 promise写异步

    return new Promise(function (resolve,reject) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
              resolve(xhr.responseText);
            } else {
              reject(xhr.status);
            }
        }
       xhr.open("get","url",true);
       xhr.send()
      }
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,336评论 5 22
  • Promise的含义:   Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和...
    呼呼哥阅读 2,190评论 0 16
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,140评论 0 12
  • 昨日A股市场整体呈现震荡上行态势。沪深两市小幅高开,盘初石油、银行等蓝筹股活跃,带动股指震荡走高,但由于创业板呈现...
    牛眼看盘阅读 187评论 1 1
  • 作者:王阿正 01 站在双流镇不高的城郭上往西南方瞧去,一小块黄色琉璃顶在团团绿木的掩映下忽隐忽现,那里坐落着当地...
    王阿正阅读 612评论 2 4