ES6-Promise

Promise

基本用法

创建Promise实例

• demo

var promise = new Promise(function(resolve, reject){
    // ... some code
    if(/* 异步操作成功 */){
        resolve(value);
    }else{
        reject(error);
    }
});

实例方法：then()

• 第一个参数是成功回调，状态为resolved时被调用
• 第二个参数是失败回调，状态为rejceted时被调用
• 尽量不要使用第二个参数处理失败回调，而是使用catch()

promise.then(function(data){
    console.log(data);
    return data;
}, function(error){
    console.log(error);
}).then(function(data){
    console.log(data);
});

实例方法：catch()

• .then(function(null, errorCallback){})的别名，只处理异常情况
• 执行then方法时的报错，也会被catch捕获

promise.then(function(data){
    aaaaa
    console.log(data);
}).catch(function(error){
    console.log(error); // aaaaa is not defined
})

静态方法：all()

• 参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例

var ajaxs = [1, 2, 3, 4, 5].map(function(item){
    return $http.get('/get/' + id);
})
Promise.all(ajaxs).then(function(datas){ // 数组
    
}).catch(function(error){ // 第一个失败的异步方法返回值
    
})

静态方法：trace()

• 用法同all()
• 不同的是，不是多个Promise方法全部返回之后触发成功或失败，而是返回结果比较快的那个Promise方法决定成功或失败

var demo = Promise.race([
    fetch('xxx.json'),
    new Promise(function(resolve, reject){
        setTimeout(() => reject(new Error('request timeout')), 5000)
    })
]);
demo.then(function(data){
    console.log(data); // fetch如果在5000ms以内返回时执行
}).catch(function(error){
    console.log(error); // fetch如果在5000ms以内未返回时执行
})

静态方法：resolve()

• 将现有对象转换为Promise对象

静态方法：reject()

• 将现有对象转换为Promise对象

实例

一个通过Promise实现的ajax请求

• 仅做Promise用法说明，未进行验证兼容性验证

const $http = (function(){
    const core = {
        ajax(method, url, args){
            const promise = new Promise(function(resolve, reject){
                const client = new XMLHttpRequest();
                let uri = url;
                let params = '';
                let argCount = 0;
                for(let key in args){
                    if(args.hasOwnProperty(key)){
                        if(argCount++){
                            params += '&';
                        }
                        params += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]);
                    }
                }
                if(method === 'GET'){
                    uri += '?' + params;
                }
                client.open(method, uri, true);
                client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                client.send(method === 'GET' ? null : params);
                client.onload = function(){
                    if(this.status >= 200 && this.status < 300){
                        resolve(this.response);
                    }else{
                        reject(this.statusText);
                    }
                };
                client.onerror = function(){
                    reject(this.statusText);
                };
            });
            return promise;
        }
    };
    return {
        get(url, args){
            return core.ajax('GET', url, args);
        },
        post(url, args){
            return core.ajax('POST', url, args);
        },
        ajax(method, url, args){
            return core.ajax(method, url, args);
        }
    };
})();

// 使用
$http.post('js/content.js', {
    'a': 1,
    'b': 2
}).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
});

与Generator结合