ES6——Promise的串联

一、Promise的串联

当后续的Promise需要用到之前的Promise的处理结果时，需要Promise的串联

Promise对象中，无论是then方法还是catch方法，它们都具有返回值，返回的是一个全新的Promise对象，它的状态满足下面的规则：

1. 如果当前的Promise是未决的，得到的新的Promise是挂起状态
2. 如果当前的Promise是已决的，会运行响应的后续处理函数，并将后续处理函数的结果（返回值）作为resolved状态数据，应用到新的Promise中；如果后续处理函数发生错误，则把返回值作为rejected状态数据，应用到新的Promise中。
   后续的Promise一定会等到前面的Promise有了后续处理结果后，才会变成已决状态

const pro1 = new Promise((resolve, reject) => {
    resolve(123);
});//123给pro1,就已决
const pro2 = pro1.then(result => result * 2 );//收到123*2返回，就已决
pro2.then(result =>console.log(result));//输出246，已决

const pro1 = new Promise((resolve, reject) => {
    throw 1;//推向rejected
});
const pro2 = pro1.then(result => {//这里pro2先为挂起，等pro1.then异步执行了，就对应结果推向已决
    return result * 2 
}, err => {
    return err * 3;//执行1*3，推向已决
});
pro2.then(result =>console.log(result));//3

const pro1 = new Promise((resolve, reject) => {
    throw 1;
});
const pro2 = pro1.then(result => {
    return result * 2
}, err => {
    return err * 3;//收到1 *3
});
pro1.catch(err => {
    return err * 2;
});//这里是新的pro了，不用在意它
pro2.then(result => console.log(result * 2), err => console.log(err * 3));//收到3 *2

如果前面的Promise的后续处理，返回的是一个Promise，则返回的新的Promise状态和后续处理返回的Promise状态保持一致。

const pro1 = new Promise((resolve, reject) => {
    resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
    resolve(2);
});
const pro3 = pro1.then(result => {
    return pro2;
});
console.log(pro3);//异步，所以console pro3时，还没拿到pro1.then的执行结果

const pro1 = new Promise((resolve, reject) => {
    resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
    resolve(2);
});
const pro3 = pro1.then(result => {
    return pro2;//返回pro2和pro3是一致的，所以为2
});
pro3.then(result => {
    console.log(result);//2
});

const pro1 = new Promise((resolve, reject) => {
    resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
    setTimeout(() =>{
        resolve(2);
    }，3000)
});
const pro3 = pro1.then(result => {
	console.log("结果出来了，得到的是一个Promise");
    return pro2;//pro1执行推向已决，但是pro2还在定时，所以pro3需要在3s后执行
});
pro3.then(result => {
    console.log(result);
});

简化

const pro1 = new Promise((resolve, reject) => {
    resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
    setTimeout(() =>{
        resolve(2);
    })
});
pro1.then(result => {
    console.log("结果出来了，得到的是一个Promise")
    return pro2;
}).then(result => {
    console.log(result)//得到2
}).then(result => {
    console.log(result)//前面没有返回值了，所以undefined
});

二、问题优化

最先我们提到的两个问题，一个通过查询数据找到另个数据和表白问题。

const pro = ajax({//已经进行了封装，可以直接返回数据。
    url: "./data/students.json"
});
pro.then(resp => {
    for (let i = 0; i < resp.length; i++) {
        if (resp[i].name === "李华") {
            return resp[i].classId; //将班级id返回
        }
    }
}).then(cid => {
    return ajax({
        url: "./data/classes.json?cid=" + cid //继续查询
    }).then(cls => {
        for (let i = 0; i < cls.length; i++) {
            if (cls[i].id === cid) {
                return cls[i].teacherId;//返回老师id
            }
        }
    })
}).then(tid => {
    return ajax({
        url: "./data/teachers.json"
    }).then(ts => {
        for (let i = 0; i < ts.length; i++) {
            if (ts[i].id === tid) {
                return ts[i];//找到目标老师
            }
        }
    })
}).then(teacher => {
    console.log(teacher);
});

function biaobai(god) {
    return new Promise(resolve => {
        console.log(`我向${god}发出了表白短信`);
        setTimeout(() => {
            if (Math.random() < 0.3) {
                //女神同意拉
                resolve(true)
            } else {
                //拒绝
                resolve(false);
            }
        }, 500);
    })
};
const gods = ["女神1", "女神2", "女神3", "女神4", "女神5"];
let pro;
for (let i = 0; i < gods.length; i++) {
    if (i === 0) {
        pro = biaobai(gods[i]);
    }
    pro = pro.then(resp => {
        if (resp === undefined) {
            return;//如果某一步成功，则不会继续向后表白
        } else if (resp) {
            console.log(`${gods[i]}同意了`)
            return;
        } else {
            console.log(`${gods[i]}拒绝了`)
            if (i < gods.length - 1) {
                return biaobai(gods[i + 1]);
            }
        }
    })
};