資訊專(zhuān)欄INFORMATION COLUMN
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");
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78003.html
摘要：為了避免不同項(xiàng)目之間進(jìn)行復(fù)制粘貼，可以將這些常用的函數(shù)封裝到一起并發(fā)布包。目前所包含模塊已達(dá)三百個(gè)，基本可以滿足前端的日常工發(fā)需求。二使用打包工具該項(xiàng)目自帶打包工具，可以通過(guò)配置文件或命令行掃描源碼自動(dòng)生成項(xiàng)目專(zhuān)用的工具庫(kù)。 前言 在業(yè)務(wù)開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)重復(fù)使用日期格式化、cookie 操作、模板、瀏覽器判斷、類(lèi)型判斷等功能。為了避免不同項(xiàng)目之間進(jìn)行復(fù)制粘貼，可以將這些常用的函數(shù)...
摘要： 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...
摘要：前言最近搭建的項(xiàng)目想引入并實(shí)現(xiàn)樣式局部作用域化，但是在網(wǎng)上找了很多方法試過(guò)了都不行，最后打到解決方法，在此記下這慘痛的歷程。 微信公眾號(hào)：愛(ài)寫(xiě)bugger的阿拉斯加如有問(wèn)題或建議，請(qǐng)后臺(tái)留言，我會(huì)盡力解決你的問(wèn)題。 1. 前言 最近搭建的 react 項(xiàng)目想引入 less ,并實(shí)現(xiàn)樣式局部作用域化，但是在網(wǎng)上找了很多方法試過(guò)了都不行，最后打到解決方法，在此記下這慘痛的歷程。 2. cr...
摘要：本文記錄了用搭建項(xiàng)目后，配置成多頁(yè)面應(yīng)用的過(guò)程。項(xiàng)目地址首先全局安裝創(chuàng)建初始項(xiàng)目創(chuàng)建后默認(rèn)是一個(gè)單頁(yè)面應(yīng)用，在默認(rèn)結(jié)構(gòu)的基礎(chǔ)上將目錄結(jié)構(gòu)改為如下形式。其中目錄下的和就是多頁(yè)面應(yīng)用中的兩個(gè)頁(yè)面。 vue-multi-pages 本文記錄了用@vue/cli+webpack搭建項(xiàng)目后，配置成多頁(yè)面應(yīng)用的過(guò)程。 項(xiàng)目地址：https://github.com/mandyshen9... 首先...
摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的元素是更新之前的鉤子函數(shù)說(shuō)明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴(lài)于的操作。鉤子函數(shù)說(shuō)明實(shí)例銷(xiāo)毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架 庫(kù)和框架的區(qū)別 我們所說(shuō)的前端框架與庫(kù)的區(qū)別？ Library 庫(kù)，本質(zhì)上是一...
閱讀 2917·2021-10-27 14:19
閱讀 546·2021-10-18 13:29
閱讀 1143·2021-07-29 13:56
閱讀 3560·2019-08-30 13:19
閱讀 1937·2019-08-29 12:50
閱讀 1062·2019-08-23 18:16
閱讀 3530·2019-08-22 15:37
閱讀 1907·2019-08-22 15:37
