Cách làm việc với TypeScript và Promises

TypeScript tăng cường phát triển JavaScript bằng cách thêm các kiểu tĩnh. Khi làm việc với mã không đồng bộ, các lời hứa được sử dụng để xử lý các hoạt động hoàn tất trong tương lai. TypeScript cung cấp các công cụ để quản lý các lời hứa với sự an toàn và rõ ràng về kiểu. Hướng dẫn này khám phá cách làm việc với các lời hứa trong TypeScript, từ cách sử dụng cơ bản đến các tình huống nâng cao.

Hiểu về lời hứa

promise là một đối tượng biểu diễn sự hoàn thành hoặc thất bại cuối cùng của một hoạt động bất đồng bộ. Nó cung cấp các phương thức để xử lý kết quả hoặc lỗi của hoạt động. Trong TypeScript, các lời hứa có thể được nhập để đảm bảo rằng chúng giải quyết với kiểu dữ liệu mong đợi.

Cách sử dụng cơ bản của Promises

Việc tạo và sử dụng lời hứa trong TypeScript rất đơn giản. Sau đây là ví dụ về lời hứa được giải quyết bằng chuỗi:

function fetchData(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // Outputs: Data fetched successfully!
}).catch((error) => {
  console.error("Error:", error);
});

Trong ví dụ này, fetchData trả về một lời hứa giải quyết bằng một chuỗi. Phương thức then xử lý giá trị đã giải quyết, trong khi catch xử lý mọi lỗi.

Xử lý Promises với Async/Await

TypeScript hỗ trợ cú pháp async/await, cung cấp cách dễ đọc hơn để làm việc với các lời hứa. Sau đây là cách sử dụng async/await với các lời hứa:

async function fetchDataAsync(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Outputs: Data fetched successfully!
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

Trong ví dụ này, hàm fetchDataAsync được khai báo là async, cho phép nó sử dụng từ khóa await để chờ lời hứa giải quyết. Lỗi được phát hiện bằng khối try/catch.

Gõ Promises với Generics

TypeScript cho phép chỉ định loại dữ liệu mà lời hứa giải quyết bằng cách sử dụng generics. Điều này đảm bảo rằng các loại được quản lý chính xác trong toàn bộ mã. Sau đây là ví dụ về lời hứa đã gõ:

interface User {
  id: number;
  name: string;
}

function fetchUser(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "John Doe" });
    }, 1000);
  });
}

fetchUser().then((user) => {
  console.log(user.id, user.name); // Outputs: 1 John Doe
}).catch((error) => {
  console.error("Error:", error);
});

Trong ví dụ này, fetchUser trả về một lời hứa giải quyết bằng đối tượng User. Kiểu được chỉ định bằng cách sử dụng generic, đảm bảo an toàn kiểu.

Sử dụng Promises trong TypeScript với API Calls

Promise thường được sử dụng với các lệnh gọi API để xử lý việc truy xuất dữ liệu không đồng bộ. Hệ thống kiểu của TypeScript giúp quản lý phản hồi từ API:

async function getUserData(userId: number): Promise {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("Network response was not ok.");
  }
  const data: User = await response.json();
  return data;
}

getUserData(1).then((user) => {
  console.log(user);
}).catch((error) => {
  console.error("Error:", error);
});

Ví dụ này trình bày cách sử dụng fetch để thực hiện lệnh gọi API và xử lý phản hồi bằng cách sử dụng promises và async/await. Phản hồi được nhập là User, đảm bảo an toàn kiểu.

Phần kết luận

Làm việc với các lời hứa trong TypeScript cung cấp tính an toàn và rõ ràng về kiểu cho các hoạt động không đồng bộ. Bằng cách sử dụng hệ thống kiểu của TypeScript, cú pháp async/await và generic, các nhà phát triển có thể quản lý các lời hứa một cách hiệu quả và xây dựng các ứng dụng đáng tin cậy hơn.

typescript lời hứa async await fetch các loại async/await kiểu api xử lý giải quyết từ chối mã lỗi