私の React の旅: 9 日目

今日学んだこと:

1. 非同期 JavaScript:

定義: 非同期プログラミングを使用すると、JavaScript は前のタスクの完了を待たずにタスクを実行できます。
使用例: API 呼び出しまたはその他の時間のかかる操作を実行します。
利点: 応答を待っている間に他のタスクを実行できるため、効率が向上します。

1. コールバック:

• 定義: コールバックは、別の関数に引数として渡され、必要に応じて後で実行される関数です。
• 課題: ネストされたコールバックはコールバック地獄を引き起こし、コードの読み取りと保守を困難にします。
• 解決策: 非同期処理を簡素化するために Promise が導入されました。

1. 約束:
2. 定義: Promise は非同期操作をよりクリーンに処理し、コールバック地獄を回避します。

• 約束の状況:
  保留中: 初期状態で、結果を待っています。
  解決済み: 操作は成功しました。
  拒否: 操作は失敗しました。

• メソッド:

.then(): Promise が解決されたときに実行されます。
.catch(): Promise が拒否された場合に実行されます。
.finally(): Promise が解決されたか拒否されたかに関係なく実行されます。

約束の例

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let success = true; // Simulating success or failure
        setTimeout(() => {
            success ? resolve("Data fetched!") : reject("Failed to fetch data.");
        }, 2000);
    });
};

fetchData()
    .then((data) => console.log(data)) // Output: Data fetched!
    .catch((error) => console.error(error))
    .finally(() => console.log("Operation completed."));

1. 非同期/待機

• 目的: Promise に基づいて構築され、コードがよりクリーンで読みやすくなります。
• Async Function: 非同期操作を処理する関数を宣言します。
• Await キーワード: Promise が解決または拒否されるまで関数の実行を一時停止します。

非同期/待機の例:

const fetchDataAsync = async () => {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data);             // Output: Data fetched!
    } catch (error) {
        console.error(error);
    } finally {
        console.log("Operation completed.");
    }
};

fetchDataAsync();

5.現実世界の例え:

• 約束: 保留中: ピザをオンラインで注文し、配達を待ちます。 解決済み: ピザが到着しました。食事をお楽しみください。 拒否されました: ピザが届きません。あなたは文句を言います。
• 非同期/待機: ピザが到着するのを待ちながら本を読み続けます。

6.約束.すべて

• 目的: 複数の Promise を同時に実行し、すべてが完了するまで待ちます。 例：

const promise1 = Promise.resolve("Task 1 completed");
const promise2 = Promise.resolve("Task 2 completed");

Promise.all([promise1, promise2])
    .then((results) => console.log(results)) // Output: ["Task 1 completed", "Task 2 completed"]
    .catch((error) => console.error(error));

1. Fetch API による非同期/待機

• フェッチ: JavaScript で HTTP リクエストを作成する最新の方法。 例：

const fetchDataFromAPI = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchDataFromAPI();

ハイライト

• 非同期操作をクリーンアップし、エラー処理を改善することを約束します。
• Async/Await を使用すると、特にチェーンされた Promise の場合、コードの作成と理解が容易になります。
• Promise.all は、複数の非同期タスクを並行して実行する場合に便利です。

これまでのところ、素晴らしい旅でした。

火事10日目

以上が私の React の旅: 9 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。