每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day21

tags: ItIron2021 Javascript

前言

昨天我们打开了非同步的大门，今天我们要继续探讨与其有关的题目，忍耐一下! 这个主题会一路延续到Day24，趁这段时间把非同步相关的题目搞清楚吧!

本日题目与解释

　请你简单解释什麽是promise

再忙．．也要来张防雷图

又是一个让新手闻风丧胆的东西，不过坦白说多摸几次就会知道这并不真的这麽可怕，所谓的promise就是一个会在未来某个时间点回传某个数值的物件，也就是一个非同步的值(async value)。而一个promise只会有以下三种状态

1. pending
2. fulfilled
3. rejected

进入范例前我们先做个简单的比喻，你今天打开熊猫人点了一份午餐，熊猫平台收到你的订单并承诺(promise pending)你10-15分钟後会收到你的餐点，若一切顺利，在15分钟後你确实收到了餐点(promise fulfilled)，但万一订单被取消了，你收到的就只有失望(promise rejected)。另外，一旦promise被fullfilled或是rejected，这个promise就功成身退了，有个专有名词叫settled(after a promise being fulfilled or rejected,the promise is said to be settled)

了解基本概念後，接着你要知道要如何写出一个基本的prmoise

const p = new Promise((resolve, reject) => {
    if (满足某些条件) {
       resolve('某个A值');
    } else if (满足另一些条件) {
       resolve('某个B值')
    } else {
       reject('某个C值')
    }
})

Promoise建构子中你需要传入一个函数(称作该promise的excuter)，这函数需要传入两个参数，一般来说我们会照惯例命名为resolve & reject两个参数，分别决定fulfilled或rejected时，最终要回传什麽值。

注意一下，我刚刚的示范中写了不只一个resolve，很多时候你需要根据不同的情况决定要回传什麽样的resolve/reject值，因此一个promise内是可以存在复数个不同的情况的，但注意一旦回传了值(也就是使用了resolve/reject後)，整个promise就结束了(settled)，後续的程序码便不会再执行。

而这个promise在使用时可以藉由原生的**.then方法去取得resolved後的值**、藉由**.catch方法去取得rejected的值**，看一个简单的例子吧!

const p1 = new Promise((resolve, reject) => {
    resolve('看屁看')
})

const p2 = new Promise((resolve, reject) => {
    reject('邱喔')
})

p1.then(value => {
 console.log(value) //看屁看
})

p2.catch(value => {
 console.log(value) //邱喔
})

以上是很基本的promise说明，一般你在请求API时收到的都是promise物件，你再根据请求成功或失败决定你要如何运用回传的值，我知道这篇其实很简略，但就像我不断强调的，解释名词并不是我的目的，在进入明天的单元之前，强烈建议再透过其他资源去增加你对promise的熟练度!

本日核心观念与总结

核心观念

promise

总结

• 了解什麽是promise
• 了解一个promise只会有三种状态
• 了解一旦状态改变後，promise的状态就不会再变更
• 了解如何写一个promise
• 了解如何取用promise的回传值

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!