promise的链式调用

promise的链式调用

每次then都是对上一个promise进行处理。

如下例，第一个then是对p1的期约进入“允许“状态时执行，而如果没有提供处理程序，默认情况下会按照“兑现“

状态执行（如第二个then）

let p1 = new Promise((resolve, reject) => {
	resolve("fulfilled");
	})
    .then(
        value => {
        	return "good";
        },
        reason => console.log("erorr" + reason)
    )
    .then(
        value => {
            console.log("成功:" + value);
        },
        reason => console.log("error" + reason)
	);

//成功good

注意虽然是对上一个promise处理，但是promise的链式处理是一步接着一步的，每次then都是有联系的。

let p1 = new Promise((resolve, reject) => {
	reject("fail");
	//   resolve("fulfilled");
	})
    .then(
        value => {
        	return "good";
        },
        reason => console.log("erorr" + reason)
    )
    .then(
        value => {
            console.log("成功:" + value);
        },
        reason => console.log("error" + reason)
	);

//erorrfail
//成功:undefined

每次new新创建的promise对象，默认状态为pending，需要通过调用resolve()和reject()改变当前promise对象的状态，不然无法执行then方法里的内容。而在then方法中返回的promise实例的状态为fulfilled。

如下例，通过连缀调用then构成”期约连锁”，但这样的实现最终执行了一连串同步任务（相当于所有的代码都在一个then中）。

let p = new Promise((resolve, reject) => {
        console.log('first');
    //若把resolve()删除，则不会执行后面的三个then
        resolve();
    }).then(()=>{
        setTimeout(()=>{console.log('second')},1200);
    }).then(()=>{
        setTimeout(()=>{console.log('thirt')},1000);
    }).then(()=>{
        setTimeout(()=>{console.log('four')},800);
    });

//first
//four
//thirt
//second

要真正执行异步任务，要让每个执行器都返回一个期约实例，每次通过resolve()或reject()改变当前promise对象的状态，这样就可以让每个后续期约都等待上一个的期约。

let p = new Promise((resolve, reject) => {
        console.log('first');
        resolve();
    }).then(()=>{
        return new Promise((resolve, reject)=>{
            console.log('second');
            setTimeout(resolve,1200);
        })
    }).then(()=>{
        return new Promise((resolve, reject)=>{
            console.log('thirt');
            setTimeout(resolve,1000);
        })
    }).then(()=>{
       return new Promise((resolve, reject)=>{
            console.log('four');
            setTimeout(resolve,800);
        })
    });
//first
//second
//third
//four