Javascript 进阶 11-2 Promise 基础概念

这篇文章要来介绍 Promise 的运行概念

基本上，Promise 在运行非同步事件的时候都会有几个状态，我们透过下方的图示来解说一下

首先不论如何，一开始都会有 pending 的状态，也就是非同步行为还没有确定结果，以 ajax 的範例来说，就是你送出了请求，但对方还没回应，或是资料正在传输的等待时间段。

再来，因应资料回传的结果，就有分成 成功 以及 失败，很好理解~

成功就是会让 Promise 走到 fullfilled 的状态，代表连线跟其他设定都没问题，并且成功取回请求的资料。

那么成功时所告诉 Promise 成功的语法就是 resolve(带入成功要回传的资讯);

失败就是 rejected 的状态，有可能是伺服器有问题，资料库有问题，连线有问题等等等的，反正就没有拿到你想要的资料。

失败的话则是 reject(带入失败要回传的资讯)

而不论成功或是失败，都是属于已经有结果的状态，这样的分类也同时称作 settled 的状态。

接着我们可以透过下面的简单範例，来跟大家说明一下，Promise 的状态，以及运行顺序。

function promiseFn (num) {    return new Promise((resolve, reject) => {        setTimeout(() => {            if (num) {                resolve('成功');            } else {                reject(new Error('失败'));            }        }, 0);    });}promiseFn(1)    .then((res) => {        console.log(res);    })    .catch((err) => {        console.error(err);    });

大家可以看到一开始，我们先宣告了一个 promiseFn 的函式，里面就是 return 了 Promise 的物件，而这个物件里面包着的是 setTimeout 的非同步事件。

并且在非同步事件中，我们判断传进来的数字是否为 falsy 或是 truthy 进行成功以及失败字样的回传。

下方就是执行的内容，而如果是成功的状态，我们可以使用 then 去承接成功的状态所回传的资料，以这边来说就是 成功 的字串。

而失败的话，则是利用 catch 的语法去承接失败的资料。

实际执行以后的结果:

可以看到因为我们传入的是 1，所以被判断为 truthy，最后回传成功。

那么现在改成 0 的话呢

promiseFn(0)    .then((res) => {        console.log(res);    })    .catch((err) => {        console.error(err);    });

这样子大家能够了解这样基础的观念了吗?

以上就是关于Promise 状态的基础运行解说，如果没有问题的话我们就可以继续往下一篇文章进行噜! 汪汪~