DanLevy.net

クイズ: JavaScript Promise 問題9問

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

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

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

  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 は、単に通常の値を返すことでエラーを無視（または上書き）するために使用できます。

このトリックは、その後に値を受け取る .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))

annotated-code/question-9-4.webp

Loading comments...