Javascript 进阶 11-4 Promise Chain 链接技巧

这篇文章要介绍的是 Promise Chain (链接技巧)

这里用到上一篇文章所介绍到的 Promise ，并在 resolved 的状态时，会使用样板字面值，将船入的参数也同时显示出来。

// 定义function promiseFn (num) {    return new Promise( (resolve, reject) => {        setTimeout(() => {            if (num) {                resolve(`成功 ${num}`);            } else {                reject('失败');            }        }, 10);    });}// 执行promiseFn(1)    .then((res) => {        console.log(res);    })    .catch((err) => {        console.log(err);    });

串接多个 Promise

就如同之前的文章所提到，有时候我们会需要在请求非同步行为之后再一次的请求非同步行为，造成过多巢状的问题

这时候我们要进行非同步的串接，该怎么做呢?

promiseFn(1)    .then((res) => {        console.log(res);        return promiseFn(2)    })    .then((res) => {        console.log(res);    })    .catch((err) => {        console.log(err);    });

也就是在第一个成功的 then 里面 return 第二个 Promise 的执行函式，之后再在第一个 then 下方新增第二个 then ，这样第二个 then 所承接的结果就是第二个 Promise 所回传的结果噜!

很神奇吧!

我们也可以透过这个概念一直链接多个 Promise 行为

// 执行promiseFn(1)    .then((res) => {        console.log(res);        return promiseFn(2)    })    .then((res) => {        console.log(res);        return promiseFn(3)    })    .then((res) => {        console.log(res);        return promiseFn(0)    })    .then((res) => {        console.log(res);        return promiseFn(5)    })    .catch((err) => {        console.log(err);    });

而只要其中一个 Promise 有出错的话，就会立刻跳到 catch里面，后续的 Promise 也不会执行噜!

那 catch 可不可以继续练接其他的 Promsie 呢? 可以的喔!

// 执行promiseFn(1)    .then((res) => {        console.log(res);        return promiseFn(2)    })    .then((res) => {        console.log(res);        return promiseFn(3)    })    .then((res) => {        console.log(res);        return promiseFn(0)    })    .then((res) => {        console.log(res);        return promiseFn(5)    })    .catch((err) => {        console.log(err);        return promiseFn(6)    })    .then((res) => {        console.log(res);        return promiseFn(0)    })    .catch((err) => {        console.log(err);    });

只是这样再接续的 Promise 如果发生 reject 的情形，就要用另一个 catch 来接收错误，也就是属于另一个 Promise Chain 了!

如果说不论成功或是失败，我都想要进行不同的非同步的处理，该怎么办?

在说明这个状况之前，我们先来介绍，我们所使用的 then 其实除了成功的结果之外，也可以接收失败的解果喔!

promiseFn(0)    .then((res) => {        // resolve 成功        console.log(res);        return promiseFn(1)    }, (rej)=> {        // reject 失败        console.log(rej);        return promiseFn(2)    })    .then((res) => {        // resolve 成功        console.log(res);        return promiseFn(6)    }, (rej)=> {        // reject 失败        console.log(rej);        return promiseFn(3)    })

透过同时传入两个 callback function，来分别区分 resolve 以及 reject 的状况，再依此进行不同非同步行为的串接。

以上就是关于 Promise Chain 的串接技巧，如果没有问题的话就可以往下一篇文章继续学习噜!汪汪~