After translated a blog about how Promise works in a more functional programming way, I tried to build something to make Ext Ajax call to work in Promise style as a practice.
ExtPromise is a simple wrapper to Ext.Ajax and Ext.data.Connection to help you do an Ajax call in Promise style instead of passing success/failure callback to it. The Promise library I used is the bluebird. I chose it not only because its speed is faster than most of the Promise library, but also its error handling philosophy looks cleaner and more attractive.
It didn"t took long to implement the ExtPromise wrapper but it took me some time to test it.
Originally, I thought I could use the jasmine-ajax I enhanced and shared before about how to test Ajax call in ExtJs. However, it doesn"t work as expected. Testing Async method in Jasmine seems very awkward because the API in version 1.4 and 2.0 are dramaticlly different. Even worst, many strange issues messed around all the way.
I finally gave up and search other alternative approaches. Sinon.js and Mocha come to rescure. It is pretty easy to test the Ajax call using the useFakeXMLHttpRequest provided by Sinon and the Async testing in Mocha looks more intuitive (Jasmine 2.0 use the same way). Let"s see how the testing (BDD style) is setup.
describe("Ajax should be now working in promise style", function() {
var xhr, ajax;
before(function() {
xhr = sinon.useFakeXMLHttpRequest();
xhr.onCreate = function(xhr) {
ajax = xhr;
}
})
after(function() {
xhr.restore();
});
describe("ExtPromise.Ajax", function() {
it("#success case", function(done) {
ExtPromise.Ajax().request({url: "foo"})
.then(function(result) {
expect(result.responseText).to.equal("Bar");
done();
})
.catch(done);
ajax.respond(200, { "Content-Type": "application/json" }, "Bar");
});
});
});
It"s quite straightforward. Before test spec runs, it"s required to stub the XMLHttpRequest using Sinon"s useFakeXMLHttpRequest API and obtain a reference in the onCreate method so that later it can be used to stub a response.
Passing a done parameter in the test spec function tells Mocha that this spec is for Async testing and callinig done() will end it. One thing to notice here is this part.
.catch(done);
If you don"t do this, and the assertion in the test spec failed, the error it shows will be a timeout error instead of telling the true assertion error.
When testing failure case, the style written like below doesn"t look good and error-prone because done() is called twice although you might think the success resolver doesnot require as it should not be called.
ExtPromise.Ajax().request({url: "foo", scope: scopeObj})
.then(scopeObj.getName)
.then(function(result) {
expect(result).to.equal("Bar In scope");
done();
}, function(result) {
expect(result.status).to.equal(500);
done();
})
.catch(done);
ajax.respond(500, { "Content-Type": "application/json" }, "Error");
You may rewrite the call to done in a then call.
ExtPromise.Ajax().request({url: "foo", scope: scopeObj})
.then(scopeObj.getName)
.then(function(result) {
expect(result).to.equal("Bar In scope");
}, function(result) {
expect(result.status).to.equal(500);
})
.then(done)
.catch(done);
ajax.respond(500, { "Content-Type": "application/json" }, "Error");
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78003.html
摘要：为了避免不同项目之间进行复制粘贴，可以将这些常用的函数封装到一起并发布包。目前所包含模块已达三百个，基本可以满足前端的日常工发需求。二使用打包工具该项目自带打包工具，可以通过配置文件或命令行扫描源码自动生成项目专用的工具库。 前言 在业务开发过程中，我们经常会重复使用日期格式化、cookie 操作、模板、浏览器判断、类型判断等功能。为了避免不同项目之间进行复制粘贴，可以将这些常用的函数...
摘要： async can be transformed to promise. So, if we want to understand async, we have to understand promise first. Promise Normally, promise is easy to understand, especially when using like this: p...
摘要：前言最近搭建的项目想引入并实现样式局部作用域化，但是在网上找了很多方法试过了都不行，最后打到解决方法，在此记下这惨痛的历程。 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决你的问题。 1. 前言 最近搭建的 react 项目想引入 less ,并实现样式局部作用域化，但是在网上找了很多方法试过了都不行，最后打到解决方法，在此记下这惨痛的历程。 2. cr...
摘要：本文记录了用搭建项目后，配置成多页面应用的过程。项目地址首先全局安装创建初始项目创建后默认是一个单页面应用，在默认结构的基础上将目录结构改为如下形式。其中目录下的和就是多页面应用中的两个页面。 vue-multi-pages 本文记录了用@vue/cli+webpack搭建项目后，配置成多页面应用的过程。 项目地址：https://github.com/mandyshen9... 首先...
摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一...
阅读 2865·2021-10-27 14:19
阅读 516·2021-10-18 13:29
阅读 1112·2021-07-29 13:56
阅读 3532·2019-08-30 13:19
阅读 1914·2019-08-29 12:50
阅读 1006·2019-08-23 18:16
阅读 3481·2019-08-22 15:37
阅读 1879·2019-08-22 15:37
