JS Promise用法

JS Promise用法

---

Promise概述

promise对象用于异步计算，相比于回调函数，promise对象除了规定的方法都是不可用的，牺牲了一定自由度的同时，可以将复杂的异步处理模式化。

句法

Promise( /* executor */ function(resolve, reject) { ... } );

new一个Promise构造器进行实例化，返回一个promise对象：

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

Promise 状态

一个promise实例有一下几个状态（默认是Promises/A+的描述状态）：

• pending:初始化阶段，没有fulfilled或者是rejected
• fulfilled:操作成功完成（promise resolve）
• rejected：操作失败（promise reject）

如果promise处于pending状态，处理promise的处理模块（handler）就会处于排队状态pending状态可以变成fulfilled或者rejected状态，不过fulfilled状态和rejected状态是不可相互转换的。promise从pending状态到fulfilled或者rejected状态，.then处理只会被调用一次，比如：

var promise = new Promise(function(resolve,reject){
var n = 6
if(n<3)
resolve(console.log('yes')); //成功了调用回调函数
else
reject(new Error(console.log('this is an error'))); //失败调用reject并抛出异常
})

var promise = new Promise(function(resolve,reject){
    var i = 2;
    if(i<3)
    resolve(setTimeout("alert('hello')",5000));
    else
    reject(new Error(console.log('no')));
})
promise.then(console.log('ok'));

Promise 链

Promise.prototype.then()和Promise.prototype.then()方法返回promise对象，就成为promise链，如图：

方法

• Promise.all()

返回promise在迭代声明中是fulfilled还是reject，如果是fulfill，就返回一个数组，值是按照在迭代器中的顺序成功了的promises。如果返回不成功（reject）的promise，返回迭代器中第一个失败对象的原因。这个方法可以使用在有多个promise的情况下。

• Promise.race()

如有有一个迭代中的promise被fulfilled或者rejected，这个方法立即返回处理值

• Promise.reject()

返回被reject的原因

• Promise.resolve()

返回处理成功的promise对象

例子

'use strict';
var promiseCount = 0;

function testPromise() {
    var thisPromiseCount = ++promiseCount;

    var log = document.getElementById('log');
    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') Started (<small>Sync code started</small>)<br/>');

    // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s)
    var p1 = new Promise(
        // The resolver function is called with the ability to resolve or
        // reject the promise
        function(resolve, reject) {
            log.insertAdjacentHTML('beforeend', thisPromiseCount +
                ') Promise started (<small>Async code started</small>)<br/>');
            // This is only an example to create asynchronism
            window.setTimeout(
                function() {
                    // We fulfill the promise !
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);
        }
    );

    // We define what to do when the promise is resolved/fulfilled with the then() call,
    // and the catch() method defines what to do if the promise is rejected.
    p1.then(
        // Log the fulfillment value
        function(val) {
            log.insertAdjacentHTML('beforeend', val +
                ') Promise fulfilled (<small>Async code terminated</small>)<br/>');
        })
    .catch(
        // Log the rejection reason
        function(reason) {
            console.log('Handle rejected promise ('+reason+') here.');
        });

    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') Promise made (<small>Sync code terminated</small>)<br/>');
}

浏览器兼容

Feature	Chrome	Edge	Firefox	InternetExplorer	Opera	Safari	Servo
Promise	32.0	(Yes)	29.0	No support	19	7.1	No support

本文参考

MDN ：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

JS Promise迷你书：
http://www.kancloud.cn/kancloud/promises-book/44251