Promise 的串联

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

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

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

后续的 Promise 一定会等到前面的 Promise 有了后续处理结果，才会变成已决状态
后续 Promise 的状态数据是前面 Promise 的结果

const pro1 = new Promise((resolve, reject) => {
      resolve(1);
});
console.log(pro1);

const pro2 = pro1.then(result => {
     return result * 2
});
console.log(pro2);

• fulfilled 就是 resolve
• 为什么 pro1 是 resolve 状态，因为 new Promise 那里是同步代码，resolve 也是同步执行的，所以当执行到输出 pro 那里时，pro1 已经是 resolve 状态
• 为什么 pro2 是 pending 状态，因为当 pro1 有了后续处理结果，也就是执行完 then 后面的语句，pro2 才会变成 resolve 状态，但是 then 里面的内容是异步执行的，也就是先输出 pro2 在执行 then 里面的内容，所以当输出 pro2 的时候，pro2 还处于 pending 状态

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

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("success");
    return pro2;
});

pro3.then(result => {
     console.log(result);
});

• 先输出 “success”， 然后 3 秒之后输出 2
• 因为 pro2 是一个 promise， 所以 pro3 的状态要和 pro2 保持一致，当 pro2 的状态变成 resolve 的时候，pro3 的状态才能变成 resolve

上面代码也可以这样写

const pro1 = new Promise((resolve, reject) => {
    resolve(1);
});

const pro2 = new Promise((resolve, reject) => {
    setTimeout(() => {
         resolve(2);
    }, 3000);
});

pro1.then(result => {
    console.log("结果出来了，得到的是一个 Promise");
    return pro2;
}).then(result => {
    console.log(result);
});

一个例子

//ajax 返回的是一个 Promise 对象
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;
        }
    }
}).then(cid => {
    const pro1 = ajax({
        url: "./data/classes.json?cid=" + cid
    });
    const pro2 = pro1.then(cls => {
        for (let i = 0; i < cls.length; i++) {
            if (cls[i].id == cid) {
                return cls[i].teacherId;
            };
        };
    });
    return pro2;
}).then(tid => {
    console.log("老师的id：" + 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);
});