JS 9 Promise 面接の質問

JS 9 Promise 面接の質問

1. 複数の .catch

var p = new Promise((resolve, deny) => {
  拒否(エラー('失敗しました!'))
})
p.catch(エラー => console.log(エラー.メッセージ))
p.catch(エラー => console.log(エラー.メッセージ))

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [ ] メッセージを印刷する
  • [x] メッセージを2回印刷する
  • [ ]未処理のPromise拒否警告
  • [ ] プログラム終了

分析:

コンストラクター メソッドを使用して Promise を作成し、拒否コールバックを介してすぐにエラーをトリガーします。

次に、.catch は DOM の .addEventListener(event, callback) または Event Emitter の .on(event, callback) と同様に動作し、複数のコールバックを追加できます。それぞれ同じ引数で呼び出されます。

2. 複数の .catch

var p = new Promise((resolve, deny) => {
  Promise.reject(Error('失敗しました!')) を返します
})
p.catch(エラー => console.log(エラー.メッセージ))
p.catch(エラー => console.log(エラー.メッセージ))

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [ ] メッセージを1回印刷する
  • [ ] メッセージを2回印刷する
  • [x]未処理のPromise拒否警告
  • [ ] プログラム終了

分析:

Promise コンストラクターを使用する場合は、resolve() または reject() コールバックのいずれかを呼び出す必要があります。 Promise コンストラクターは戻り値を使用しないため、実際には Promise.reject() によって作成された別の Promise を受け取ることはありません。

Promise.reject() の後に .catch がない場合、答えは UnhandledPromiseRejectionWarning です。

3. .then と .catch の連鎖

var p = new Promise((resolve, deny) => {
    拒否(エラー('失敗しました!'))
  })
  .catch(エラー => console.log(エラー))
  .then(エラー => console.log(エラー))

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [x] 印刷エラーと未定義
  • [ ] 2回印刷エラー
  • [ ]未処理のPromise拒否警告
  • [ ]未定義

分析

.then と .catch を連鎖させるときは、それらを一連のステップとして考えると便利です。各 .t​​hen は、前の .then によって返された値を引数として受け取ります。ただし、「step」でエラーが発生した場合、後続の .then 「step」は .catch に遭遇するまでスキップされます。エラーを上書きしたい場合は、エラー以外の値を返すだけです。後続の .then を介してアクセスできます。

ヒント: console.log() は常に undefined を返します。

4. リンクキャッチ

var p = new Promise((resolve, deny) => {
    拒否(エラー('失敗しました!'))
  })
  .catch(エラー => console.log(エラー.メッセージ))
  .catch(エラー => console.log(エラー.メッセージ))

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [x] エラーメッセージを1回印刷する
  • [ ] エラーメッセージを2回印刷する
  • [ ] 未処理のPromise拒否警告
  • [ ] プログラム終了

分析

.catch を連鎖させると、それぞれは前の .then または `.catch "ステップ" で発生したエラーのみを処理します。この例では、最初の .catch は console.log を返しますが、これには 2 つの .catch の後に .then() を追加することによってのみアクセスできます。

5. 複数の .catch

新しい Promise((resolve, 拒否) => {
    解決します('成功しました!')
  })
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(エラー => {
    「実は、うまくいきました」と返します
  })
  .catch(エラー => console.log(エラー.メッセージ))

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [ ] メッセージを印刷する
  • [ ] メッセージを2回印刷する
  • [ ] 未処理のPromise拒否警告
  • [x] 何も印刷しない

分析

ヒント: .catch は通常の値を返すことでエラーを無視 (または上書き) することができます。

このトリックは、後続の .then が値を受け取った場合にのみ機能します。

6..次に処理する

Promise.resolve('成功しました!')
  .then(データ => {
    data.toUpperCase() を返す
  })
  .then(データ => {
    コンソール.log(データ)
  })

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [ ] 「成功!」と「SUCCESS!」を印刷します。
  • [ ] 「成功しました!」と印刷します。
  • [x] 「成功!」と印刷します。
  • [ ] 何も印刷しない

分析

ヒント: .then は、戻り値から次の .then(value => /* ハンドル値 */) にデータを順番に渡します。

次の .then に値を渡すには、return が鍵となります。

7..次に処理する

Promise.resolve('成功しました!')
  .then(データ => {
    data.toUpperCase() を返す
  })
  .then(データ => {
    コンソール.log(データ)
    データを返す
  })
  .then(コンソール.log)

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [ ] 「成功!」を印刷します。
  • [ ] 「成功しました!」と印刷します。
  • [x] 「SUCCESS!」と「SUCCESS!」を印刷します。
  • [ ] 何も印刷しない

分析:

呼び出される console.log 呼び出しが 2 つあります。

8..次に処理する

Promise.resolve('成功しました!')
  .then(データ => {
    データ.toUpperCase()
  })
  .then(データ => {
    コンソール.log(データ)
  })

上記のコードの出力は何でしょうか?正しい答えを選択してください:

  • [ ] 「成功!」と印刷します。
  • [ ] 「成功しました!」と印刷します。
  • [ ] 「SUCCESS!」と「SUCCESS!」を出力します。
  • [x] 未定義を印刷

分析:

ヒント: .then は、戻り値から次の .then(value => /* ハンドル値 */) にデータを順番に渡します。

次の .then に値を渡すには、return が鍵となります。

9. .then と .catch 間のフロー

Promise.resolve('成功しました!')
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(エラー => {
    「実は、うまくいきました」と返答する
  })
  .then(データ => {
    throw Error('失敗しました!')
  })
  .catch(エラー => console.log(エラー.メッセージ))

上記は、JS Promise の面接の質問 9 つについての詳細です。JS Promise の面接の質問の詳細については、123WORDPRESS.COM の他の関連記事をご覧ください。

以下もご興味があるかもしれません:
  • JavaScript Promise の徹底解説
  • JavaScript における Promise の詳細な説明
  • フロントエンドJavaScriptの約束
  • JS の Promise に中止関数を追加する方法
  • JavaScriptのPromiseを徹底的に理解する

<<:  Linux での Docker と portainer の設定方法

>>:  MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

推薦する

VUEはFlappy Birdゲームのサンプルコードを実装します

Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...

vite2.0+vue3 モバイルプロジェクトの詳細な説明

1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

MySQL の結合テーブルにインデックスを作成する方法

この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...

Linux環境変数の設定に関する完全なガイド

Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...

CSS 3.0 テキストホバージャンプ特殊効果コード

これは、CSS 3.0 で実装されたテキストのホバーとジャンプ効果です。効果は次のとおりです。 以下...

Vue検証コードコンポーネントの使い方の詳しい説明

この記事の例では、vue検証コードコンポーネントで使用される具体的な実装コードを参考までに共有してい...

Vueでショッピングカートのすべての機能を実装する簡単な方法

主な機能は次のとおりです。製品情報を追加する製品情報を変更する単一の製品を削除する複数の製品を削除す...

Vue プロジェクトにインターフェース リスニング マスクを追加する方法

1. 事業背景マスク レイヤーを使用してユーザーの異常な操作を遮断する方法は、フロントエンドでよく使...

カスタムポップアップボックスを実装するためのJavaScriptシングルトンモード

この記事では、カスタムポップアップボックスを実装するためのJavaScriptシングルトンモードの具...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

xHTML タグと HTML タグの違いは何ですか?

すべてのタグは小文字でなければなりませんXHTML では、すべてのタグは小文字でなければなりません。...

広告を閉じる効果を実現するJavascript

参考までに、Javascript を使用して広告を閉じる方法に関するケース スタディを示します。詳細...

Vueタブとキャッシュページを切り替えるいくつかの方法

目次1. 切り替え方法2. タブを動的に生成する3. キャッシュコンポーネント3.1 キープアライブ...

MySQLクエリプランでken_lenの値を計算する方法

key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...