在 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());
謝謝
以上是如何處理非同步操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
