DanLevy.net

クイズ: JavaScript Promise 問題9問

もうPromiseを取りこぼさない!

Hero image for クイズ: JavaScript Promise 問題9問

JavaScriptのPromiseを知っていますか？

  • JavaScriptのスキルを証明してみましょう！ 🚀
  1. ヒントを確認する（右下の大きなボタン）。
  2. ブラウザのコンソール（ショートカットキーF12または検索）でコードを試すか、repl.it* を使用してください。
  3. ぜひ私にツイートしてください @justsml. ご意見をお聞かせください！

👇 以下の9問を解いてください👇

1. 

エラーの処理

次のコードの出力は何になるか？

var p = new Promise((resolve, reject) => {
  reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

Promiseコンストラクタを使ってPromiseを作成し、直ちにrejectコールバックでエラーを発生させます。

その後、.catchハンドラはDOMの.addEventListener(event, callback)やEvent Emitterの.on(event, callback)のように、複数のハンドラコールバックを追加することができます。同じ引数でそれぞれが呼び出されます。

2. 

エラーのハンドリング

次のコードの出力は何ですか？

var p = new Promise((resolve, reject) => {
  return Promise.reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

Promiseコンストラクタを使用する際は必ずresolve()またはreject()コールバックを呼び出さなければなりません。Promiseコンストラクタはエグゼキュータの戻り値を無視するため、Promise.reject()で作成された追加のPromiseはpにチェーンされません。2つのハンドラはpにアタッチされますが、pは未解決のままになり、戻された拒否済みPromiseはホスト環境によって未処理として報告されます。

5. 

エラーの処理

次のコードの出力は何になるか？

new Promise((resolve, reject) => {
    resolve('Success!')
  })
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return "actually, that worked"
  })
  .catch(error => console.log(error.message))

ヒント: .catch は、単に通常の値を返すことでエラーを無視（または上書き）するために使用できます。

通常の値を返せば拒否状態は処理され、後続のPromiseは履行状態になります。後に .then がなくても拒否は処理されますが、返した値を使うには .then などが必要です。

6. 

データの処理

次のコードの出力は？

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })

ヒント: .thenはreturn値を次の.then(value => /* handle value */)に順番に渡します。

returnが次の.thenに値を渡すために重要です。

7. 

データの処理

次のコードの出力は何になりますか？

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
    return data
  })
  .then(console.log)

console.logの呼び出しが2回あります。

8. 

データ操作

次のコードの出力は何ですか？

Promise.resolve('Success!')
  .then(data => {
    data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })

ヒント: .thenはreturn値を次の.then(value => /* ハンドリング */) に順番に渡します。

値を次の.thenに渡すにはreturnを記述する必要があります。

9. 

データの処理

以下のコードの出力結果は？

Promise.resolve('Success!')
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return 'actually, that worked'
  })
  .then(data => {
    throw Error('The fails!')
  })
  .catch(error => console.log(error.message))

最初の .catch は文字列を返して拒否状態から回復しますが、何も出力しません。次の .then が Error('The fails!') をスローし、最後の .catch はそのメッセージ The fails! だけを出力します。

Promiseチェーンで例外が伝わり、最後のcatchがThe fails!を出力する流れ

Loading comments...