如何處理非同步操作

如何處理非同步操作

在 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));

異步/等待

與 Promise 和回呼相比，Async/await 提供了一種更具可讀性和可管理性的非同步程式碼處理方式。它讓我們可以像同步一樣編寫非同步程式碼，使用 async 關鍵字將函數標記為非同步，並使用 wait 暫停程式碼執行，直到 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());

為什麼要使用非同步/等待？

• 提高可讀性：Async/await 更具可讀性且更易於理解，特別是對於具有多個非同步呼叫的複雜程式碼。
• 錯誤處理：它允許使用 try/catch 區塊進行更簡單的錯誤處理，而不是多個 .catch() 方法。

---

謝謝

以上是如何處理非同步操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！