Promise实现多个异步流程控制

我觊觎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对象。