非同期操作を処理する方法

非同期操作を処理する方法

TypeScript では、コールバック、Promise、async/await など、非同期操作を処理する複数の方法があります。非同期プログラミングを使用すると、他のコードの実行をブロックすることなく、API からのデータのフェッチなど、時間がかかる可能性のある操作を管理できます。

コールバック

コールバックは、別の関数に引数として渡される関数であり、タスクの完了後に実行されます。コールバックは単純なタスクでは機能しますが、操作を連鎖する必要がある場合はすぐに判読できなくなる可能性があります。

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const createPromise = (
  id: number,
  callback: (error: Error | null, task: Todo | null) => void
) => {
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("failed to load data");
      }
    })
    .then((data) => {
      callback(null, data);
    })
    .catch((error) => {
      callback(error, null);
    });
};

createPromise(1, (error, task) => {
  if (error) {
    console.error(error);
  } else {
    console.log(task);
  }
});

約束

Promise は、.then() メソッドと .catch() メソッドを使用して、より線形な方法で非同期操作を処理できるようにすることで、コールバックよりもクリーンなアプローチを提供します。チェーンするのは簡単ですが、複雑な操作が必要になる可能性があります。

const createPromise = (id: number): Promise<object> => {
  return new Promise<object>((resolve, reject) => {
    const data: object = fetch(
      `https://jsonplaceholder.typicode.com/todos/${id}`
    ).then((response) => response.json());
    if (data) {
      resolve(data);
    } else {
      reject("failed to load data");
    }
  });
};

createPromise(1)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
</object></object>

非同期/待機

Async/await は、Promise やコールバックと比較して、非同期コードを処理するための読みやすく管理しやすい方法を提供します。これにより、async キーワードを使用して関数を非同期としてマークし、Promise が解決されるまでコードの実行を一時停止するのを待つことで、同期しているかのように非同期コードを作成できます。このアプローチにより、可読性が向上し、デバッグが容易になります。

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const getTodo = async (): Promise<todo> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

console.log(getTodo());
</todo>

Async/Await を使用する理由

• 可読性の向上: Async/await は、特に複数の非同期呼び出しを含む複雑なコードの場合、より読みやすく、理解しやすくなります。
• エラー処理: 複数の .catch() メソッドの代わりに、try/catch ブロックを使用したより単純なエラー処理が可能になります。

---

ありがとう

以上が非同期操作を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。