JavaScript の約束: 初心者のための究極のガイド

導入

JavaScript は、主に Web 開発に使用される多用途のプログラミング言語です。 JavaScript の最も強力な機能の 1 つは、非同期操作を処理できることです。ここで Promise が登場し、開発者が非同期コードをより効率的に管理できるようになります。このガイドでは、Promise の基本を説明し、Promise を理解し効果的に活用するための深い知識と実践的な例を提供します。

目次

Heading	Subtopics
What is a Promise in JavaScript?	Definition, State of a Promise, Basic Syntax
Creating a Promise	Example, Resolving, Rejecting
Chaining Promises	then(), catch(), finally()
Handling Errors	Common Pitfalls, Error Handling Techniques
Promise.all()	Usage, Examples, Handling Multiple Promises
Promise.race()	Usage, Examples, First Settled Promise
Promise.any()	Usage, Examples, First Fulfilled Promise
Promise.allSettled()	Usage, Examples, When All Promises Settle
Async/Await	Syntax, Combining with Promises, Examples
Real-World Examples	Fetch API, Async File Reading
Common Mistakes	Anti-Patterns, Best Practices
Advanced Promise Concepts	Custom Promises, Promise Combinators
FAQs	Answering Common Questions
Conclusion	Summary, Final Thoughts

JavaScript における Promise とは何ですか?

JavaScript の Promise は、非同期操作の最終的な完了または失敗を表すオブジェクトです。これにより、ハンドラーを非同期アクションの最終的な成功値または失敗の理由に関連付けることができます。これにより、非同期メソッドは同期メソッドと同様に値を返すことができます。非同期メソッドは、最終値をすぐに返すのではなく、将来のある時点で値を提供するという約束を返します。

約束の状態

Promise は次の 3 つの状態のいずれかになります。

1. 保留中: 満たされても拒否されてもいない初期状態。
2. 完了: 操作は正常に完了しました。
3. 拒否されました: 操作は失敗しました。

Promise の基本構文

let promise = new Promise(function(resolve, reject) {
    // Asynchronous operation
    let success = true;

    if(success) {
        resolve("Operation successful!");
    } else {
        reject("Operation failed!");
    }
});

約束を作る

Promise の作成には、新しい Promise オブジェクトをインスタンス化し、それに関数を渡すことが含まれます。この関数は、resolve と accept の 2 つのパラメータを取ります。

例

let myPromise = new Promise((resolve, reject) => {
    let condition = true;
    if(condition) {
        resolve("Promise resolved successfully!");
    } else {
        reject("Promise rejected.");
    }
});

myPromise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message);
});

この例では、myPromise は正常に解決され、「Promisesolved fully!」とログに記録されます。コンソールへ。

約束を連鎖させる

Promise の強力な機能の 1 つは、Promise をチェーンできることです。これにより、一連の非同期操作を読みやすく保守しやすい方法で実行できます。

それから（）

then() メソッドは、Promise の履行を処理するために使用されます。

myPromise.then((message) => {
    console.log(message);
    return "Next step";
}).then((nextMessage) => {
    console.log(nextMessage);
});

キャッチ（）

catch() メソッドは、Promise の拒否を処理するために使用されます。

myPromise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.log(error);
});

ついに（）

finally() メソッドは、Promise が履行されたか拒否されたかに関係なく、コードを実行するために使用されます。

myPromise.finally(() => {
    console.log("Promise is settled (either fulfilled or rejected).");
});

エラーの処理

Promise 内のエラーの処理は、堅牢なコードにとって非常に重要です。

よくある落とし穴

1. エラーの無視: 常に catch() を使用してエラーを処理します。
2. 返すのを忘れている: then() ハンドラーで Promise を返すようにしてください。

エラー処理テクニック

myPromise.then((message) => {
    console.log(message);
    throw new Error("Something went wrong!");
}).catch((error) => {
    console.error(error.message);
});

Promise.all()

Promise.all() は、Promise の配列を受け取り、配列内のすべての Promise が解決された場合に解決される単一の Promise を返し、いずれかの Promise が拒否された場合には拒否されます。

使用法

let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values); // [3, 42, "foo"]
});

Promise.race()

Promise.race() は、配列内のいずれかの Promise が解決または拒否されるとすぐに、解決または拒否される Promise を返します。

使用法

let promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "two"
});

Promise.any()

Promise.any() は、配列内のいずれかの Promise が満たされるとすぐに解決される Promise を返し、すべての Promise が拒否された場合は拒否されます。

使用法

let promise1 = Promise.reject("Error 1");
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success"));
let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success"));

Promise.any([promise1, promise2, promise3]).then((value) => {
    console.log(value); // "Success"
}).catch((error) => {
    console.log(error);
});

Promise.allSettled()

Promise.allSettled() は、指定されたすべての Promise が解決または拒否された後に解決される Promise を、それぞれの Promise の結果を記述するオブジェクトの配列とともに返します。

使用法

let promise1 = Promise.resolve("Resolved");
let promise2 = Promise.reject("Rejected");

Promise.allSettled([promise1, promise2]).then((results) => {
    results.forEach((result) => console.log(result.status));
});

非同期/待機

async キーワードと await キーワードを使用すると、より同期的な方法で Promise を操作できます。

構文

async function myFunction() {
    let myPromise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Done!"), 1000);
    });

    let result = await myPromise; // Wait until the promise resolves
    console.log(result); // "Done!"
}

myFunction();

Promiseとの組み合わせ

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data: ", error);
    }
}

fetchData();

実際の例

APIを取得する

Fetch API は、Promise の一般的な使用例です。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

非同期ファイル読み取り

Promise を使用して Node.js でファイルを読み取る

const fs = require('fs').promises;

async function readFile() {
    try {
        let content = await fs.readFile('example.txt', 'utf-8');
        console.log(content);
    } catch (error) {
        console.error('Error reading file:', error);
    }
}

readFile();

よくある間違い

アンチパターン

1. コールバック地獄: ネストされた then() 呼び出しを回避します。
2. エラーの無視: Promise の拒否を常に処理します。

ベストプラクティス

1. 常に Promise を返す: then() ハンドラーと catch() ハンドラーで必ず Promise を返します。
2. Async/Await を使用する: async と await を使用して Promise の処理を​​簡素化します。

高度な Promise の概念

カスタムの約束

特定の非同期操作を処理するカスタム Promise を作成できます。

function customPromiseOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Custom operation complete!");
        }, 2000);
    });
}

customPromiseOperation().then((message) => {
    console.log(message);
});

Promise コンビネータ

Promise.all()、Promise.race() などのコンビネータを使用して複数の Promise を結合し、複雑な非同期フローを処理します。

よくある質問

Promise は非同期プログラミングにどのように役立ちますか?

Promise は、従来のコールバックと比較して、非同期操作を処理するためのよりクリーンで読みやすい方法を提供し、「コールバック地獄」のリスクを軽減します。

then() と `

の違いは何ですか?

キャッチ()?

then() は解決された Promise の処理に使用され、catch()` は拒否された Promise の処理に使用されます。

古い JavaScript コードで Promise を使用できますか?
はい、Promise は古い JavaScript コードでも使用できますが、完全な互換性を得るには、ポリフィルを使用する必要がある場合があります。

Promise.all() を使用する利点は何ですか?
Promise.all() を使用すると、複数の Promise を並行して実行し、それらがすべて完了するまで待機できるため、複数の非同期操作の管理が容易になります。

async/await はどのように Promise 処理を改善しますか?
async/await 構文により、非同期コードの外観と動作が同期コードのようになり、可読性と保守性が向上します。

Promise が解決されず、拒否されなかった場合はどうなりますか?
Promise が解決も拒否もされなかった場合、Promise は無期限に保留状態のままになります。潜在的な問題を回避するには、すべての約束が最終的に解決または拒否されるようにすることが重要です。

結論

Promise は最新の JavaScript の基本的な部分であり、開発者が非同期操作をより効率的かつ読みやすく処理できるようにします。 Promise をマスターすることで、非同期プログラミングの複雑さを効果的に処理する、よりクリーンで保守しやすいコードを作成できます。 API からデータを取得する場合でも、ファイルを読み取る場合でも、カスタムの非同期タスクを実行する場合でも、JavaScript 開発者にとって Promise を理解することは不可欠です。

以上がJavaScript の約束: 初心者のための究極のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。