共计 2559 个字符,预计需要花费 7 分钟才能阅读完成。
我觊觎 Promise 好久了。但由于缘分未到,以及智商不够,一直没有机会在实战中用它。前段时间的 2015 上海前端技术峰会 中的主题分享之《ES6 实战》让我有这样的感觉:ES5 的好多特性都还没有完全掌握呢,ES6 就来了。然后据说明年 ES7 就要来了……
所以说,
学无止境。
…
背景描述
在浏览器端,有个表单,为了填写方便,两个输入框使用 <select> 元素供用户选择;此外,在编辑一个条目时(对应数据库中一行),还要将该条目的数据从服务器获取到,然后生成到表单中。
<form id="student-info"> | |
<input type="text" data-key="name"> | |
<select data-key="province"> | |
<option value="10"> 省份 1 </option> | |
<option value="11"> 省份 2 </option> | |
</select> | |
<select data-key="university"> | |
<option value="1"> 学校 1 </option> | |
<option value="2"> 学校 2 </option> | |
</select> | |
</form> |
几个工具
没有使用任何 MVC 或者 MVVM 框架。只是借助于 jQuery、Underscore 等进行构建。
从表单中获取数据:
/* | |
* selector: 表单容器的选择器 | |
*/ | |
util.getDataFromForm = function(selector){var data = {}; | |
var inputs = $(selector).find(*[data-key]); | |
inputs.each(function(index, element){var value = $(element).val(); | |
var key = $(element).data('key'); | |
data[key] = value; | |
}); | |
return data; | |
}; |
把数据渲染到表单中:
/** | |
* data: 模型数据 | |
* selector: 表单容器的选择器 | |
*/ | |
util.renderFormWithData = function(data, selector){var inputs = $(selector).find(*[data-key]); | |
inputs.each(function(index, element){var key = $(element).data('key'); | |
$(element).val(data[key]); | |
}); | |
}; |
最初我是这样写 Promise 代码的
OK,对于上面这个表单,两个 select 元素是需要从服务器 GET 数据后生成的(借助于模板,在此不放代码了)。然后如果要编辑一个条目,还需要额外 GET 该条目的数据并赋值到表单里。
如果不使用 Promise,而是只用回调写法,那么最多的情况下,需要嵌套三层。任何一层失败了,都不好办。而借助于 Promise,可以大胆地像同步代码那样写:
版本 -0.0.1
Promise 异步流程控制 -0.0.1
function prepareForm(callback){var promise = new Promise(function(resolve, reject) {resolve(); | |
}); | |
promise.then(function(){ | |
$.ajax({ | |
url: '/rest/province/all', | |
type: 'get', | |
success: function(){/* render the province select element */} | |
}); | |
}) | |
.then(function(){ | |
$.ajax({ | |
url: '/rest/university/all', | |
type: 'get', | |
success: function(){/* render the university select element */} | |
}); | |
}) | |
.then(function(){if(callback){callback(); | |
} | |
}) | |
.catch(function(error){console.log('error:', error); | |
}); | |
}; |
在这里,prepareForm 函数依然接受一个回调函数作为参数。如果是 ADD 操作,则回调中无须再次执行一个 Ajax 操作;如果是 UPDATE 操作,则回调函数需要对该条目进行 Ajax 请求,然后根据这个值去渲染表单——这时不需担心表单里的两个 select 元素尚未就绪,因为一定是就绪了之后才根据模型对象渲染表单的。
注意:每次调用 then 都会返回一个新创建的 Promise 对象。
版本 -0.0.2
版本 -0.0.1 并没有很好地处理 rejected 情况。
【未完待续】
后来我意识到 Promise 应该这样用
上面我误以为直接链式 then()方法就是 Promise 处理异步流程的精髓了。然而大错特错。对于异步任务,重要的是保证数据的获取。这通常就需要自定义一个壳,来包装一下 Ajax 请求的参数、返回数据等,尤其要把返回的数据传给 resolve(),以便在 then()里可以使用这个数据。下面是例子。
/* 先定义一个返回 Promise 对象的 Ajax 过程 */ | |
var getAjaxPromise = function(option){return new Promise(function(resolve, reject){ | |
$.ajax({ | |
url: option.url, | |
type: 'get', | |
data: option.data || '', | |
success: function(data){resolve(data); | |
}, | |
error: function(error){reject(error); | |
} | |
}); | |
}); | |
}; | |
/* 启动第 1 个异步任务 */ | |
var p1 = getAjaxPromise({url: 'root/url/1'}); | |
p1.then(function(data1){ | |
/* 处理第 1 个异步任务的结果 */ | |
console.log(data1); | |
/* 然后启动第 2 个异步任务 */ | |
return getAjaxPromise({url: 'root/url/2'}); | |
}) | |
.then(function(data2){ | |
/* 处理第 2 个异步任务的结果 */ | |
console.log(data2); | |
}); |
then() 方法可以链式调用,关键就是每个 then 都会返回一个新的 Promise 对象。