Javascript async/await và promise

1. Promise:

Promise đại diện cho 1 giá trị sẽ có trong tương lai, nhưng chưa được biết ngay lập tức. Nó có thể ở 1 trong 3 trạng thái:

Pending: chưa hoàn thành (đang chờ).
Fulfilled: đã hoàn thành và trả về kết quả thành công.
Rejected: thất bại và trả về lỗi.

Cú pháp:

let promise = new Promise(function(resolve, reject) {
  // logic bất đồng bộ ở đây
  // nếu thành công, gọi resolve(value)
  // nếu thất bại, gọi reject(error)
});

Ví dụ:

let myPromise = new Promise((resolve, reject) => {
  // giả sử lấy về dữ liệu
  let data = { id: 10, name: "John" }
  let success = true;  // giả sử công việc thành công
  if (success) {
    resolve(data);  // thành công
  } else {
    reject("Operation failed!");  // thất bại
  }
});

// Sử dụng .then() và .catch() để xử lý kết quả
myPromise
  .then(result => {
    console.log(result);  // trả về dữ liệu data : { id: 10, name: "John" }
  })
  .catch(error => {
    console.log(error);  // Nếu thất bại, sẽ hiện lỗi
  });

Kết hợp nhiều Promise:

– Promise.all(): chờ tất cả các promise hoàn thành:

let promise1 = Promise.resolve(3);
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo'));

Promise.all([promise1, promise2]).then(values => {
  console.log(values);  // [3, "foo"]
});

– Promise.race(): trả về kết quả của Promise đầu tiên hoàn thành (hoặc bị từ chối):

let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, "one"));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "two"));

Promise.race([promise1, promise2]).then(value => {
  console.log(value);  // "two" (vì promise2 hoàn thành trước)
});

Async/await:

Là cú pháp hiện đại hơn của Promise, giúp mã bất đồng bộ trông như mã đồng bộ, dễ đọc hơn:

async function getData() {
  try {
    let data = await fetchData()
    console.log(data)
  } catch (error) {
    console.log(error)
  }
}

– Async function: luôn trả về 1 Promise, bất kể hàm trả về 1 giá trị đồng bộ hay không. Nếu hàm trả về 1 giá trị trực tiếp, giá trị đó sẽ tự động được bọc trong 1 Promise thành công. Ví dụ:

async function sayHello() {
  return "Hello" // Hàm này sẽ trả về Promise.resolve("Hello")
}

sayHello().then((message) => console.log(message)) // "Hello"

– Await: await chỉ có thể sử dụng trong các hàm async. Nó dừng việc thực thi của hàm async cho đến khi promise được giải quyết, sau đó trả về kết quả của promise:

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

async function doTask() {
  console.log("Task started")
  await delay(2000)
  console.log("Task finished after 2 seconds")
}

doTask()

Sử dụng kết hợp async và await để xử lý promise:

Ví dụ với then():

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

getData().then((data) => {
  console.log(data);  // In ra "Data received" sau 2 giây
});

Sử dụng async/await:

async function fetchData() {
  let data = await getData();  // Chờ 2 giây cho Promise hoàn thành
  console.log(data);  // In ra "Data received"
}

fetchData();

Xử lý lỗi trong async/await: bằng khối try...catch:

async function fetchDataWithError() {
  try {
    let data = await Promise.reject("Error occurred");
    console.log(data);  // Dòng này không bao giờ chạy
  } catch (error) {
    console.log(error);  // In ra lỗi "Error occurred"
  }
}

fetchDataWithError();

Ví dụ thực tế hơn với API:

async function fetchUser() {
  try {
    let response = await fetch("https://api...")
    let user = await response.json()
    console.log(user)
  } catch (error) {
    console.log("Error: ", error)
  }
}

fetchUser()

Javascript

thietkeweb

Để lại một bình luận Hủy

thietkeweb

Để lại một bình luận Hủy

Login