5 thủ thuật hay với Javascript Promise

Trong bài viết tìm hiểu Promise là gì? Bạn hẳn đã hiểu rõ về khái niệm Promise này rồi đúng không? Quả thật, sau một thời gian sử dụng Promise API, mình cảm thấy rất thích thú, viết code sướng hơn hẳn. Từ phiên bản ES7, ngoài Promise ra, bạn còn có thêm Async/Await cũng sướng không kém.

Bài viết này, mình sẽ chia sẻ một số thủ thuật javascript promise hay ho khi làm việc với Promise. Đảm bảo bạn sẽ ngạc nhiên cho mà coi.

Hủy một fetch request

Có một vấn đề nhức nhối khi làm việc với Promises đó là bạn không thể hủy (cancel) chúng. Bạn ao ước có một API kiểu như promiseInstance.cancel() để có thể cancel một promise nào đó. Nhưng rất tiếc, đời không như mơ!

Thay vào đó, chúng ta phải sử dụng phương pháp phức tạp hơn một chút để cancel một promise. Kiểu như sau:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(Request 1 is complete!);
}).catch(e => {
    console.warn(Fetch 1 error: ${e.message});
});

// Abort request
controller.abort();

Điều kỳ diệu ở đây là chúng ta cung cấp tín hiệu (signal) cho từng fetch request. Trong thế giới Javascript, việc tạo API để kế thừa và trừa tượng hóa là tương đối khó khăn. Do vậy, trước mắt bạn cứ tạm sử dụng phương pháp như trên nhé.

waitForTime & waitForever

Trong một số tình huống sử dụng hoặc kiểm thử ứng dụng, bạn cần phải tạo một khoảng thời gian chờ nào đó.

Các ứng dụng lớn cũng làm như thế, không phải là họ không có khả năng làm cho ứng dụng nhanh mà họ cố tình đấy. Không tin ư, mời bạn đọc thử bài này: Ngạc nhiên chưa: Nhiều ứng dụng cố tình chạy chậm để bắt người dùng phải đợi

Lan man quá, tóm lại, nếu bạn cần phải tạo một timeout với promise thì dành cho bạn đây.

/* Wait for milliseconds */
function waitForTime(ms) {
  return new Promise(r => setTimeout(r, ms));
}

/* Usage */
await waitForTime(200);

/* Wait Forever */
function waitForever() {
  return new Promise(r => {});
}

// Usage:
await waitForever();

Viết đến đây, mình chợt nghĩ tới câu: “Đúng người đúng thời điểm là tốt nhất“.

Chạy bất đồng bộ các hàm Array

Có thể bạn chưa biết, các hàm làm việc với mảng như forEach(), map(), some()... đều là các hàm đồng bộ.

Có một số trường hợp, bạn muốn chạy các chức năng không đồng bộ trong map(), some()... Ví dụ: cập nhật danh sách các models và đẩy thông tin đã thay đổi trở lại để cập nhập vào cơ sở dữ liệu. Hoặc request tới API để lấy thông tin dùng cho các bước tiếp theo trong use case.

Do vậy, tip trick này sẽ giúp bạn chạy một asynchronous operation trong synchronous function.

async function fetchRepoInfos () {  
  // load repository details for this array of repo URLs
  const repos = [
    {
      url: 'https://api.github.com/repos/vntalking/ebook-reactjs-that-don-gian'
    },
    {
      url: 'https://api.github.com/repos/vntalking/nodejs-express-mongodb-co-ban'
    }
  ]

  // map through the repo list
  const promises = repos.map(async repo => {
    // request details from GitHub’s API with Axios
    const response = await Axios({
      method: 'GET',
      url: repo.url,
      headers: {
        Accept: 'application/vnd.github.v3+json'
      }
    })

    return {
      name: response.data.full_name,
      description: response.data.description
    }
  })

  // wait until all promises resolve
  await Promise.all(promises).then(results => {
    console.log(results);
  })

  // use the results
}

fetchRepoInfos();

Biến đối tượng bất kỳ thành Promise

Bạn có biết rằng, bạn có thể tùy ý thêm phương thức .then() vào một đối tượng bất kỳ để biến chúng thành một Promise không?

async function convertObjectToPromise() {
  j = { then: resolve => fetch("/").then(resolve) }

  j.then(res => console.log(res));
  // Response {type: "basic", url: "https://vntalking.com/", redirected: false, status: 200, ok: true, …}

  // ... or an await...
  const response = await j;
  // Response {type: "basic", url: "https://vntalking.com/", redirected: false, status: 200, ok: true, …}

}

convertObjectToPromise()

Một thủ thuật tuyệt vời mà ít người biết!

Detect một hàm Async

Mặc dù thủ thuật này không phổ biến lắm, ít người sử dụng, nhưng nó lại rất hữu ích khi bạn cần tới. Khi bạn cần phát hiện hàm nào là bất đồng bộ để có phương án làm việc hợp lý, đây là cách dành cho bạn.

async function myFunction() {

}

const isAsync = myFunction.constructor.name === "AsyncFunction";

Javascript Promise là thứ mà bạn sử dụng hàng ngày trong dự án. Do vậy nếu tinh ý, bạn có hàng tá thủ thuật hay ho với nó.

Mình hi vọng bài viết về thủ thuật javascript promise này giúp được điều gì đó cho bạn.

💦 Đọc các bài viết khác về javascript:

• [JS] Series tự học Javascript trong 10 tiếng
• [JS] Thủ thuật tối ưu Javascript giúp tăng tốc độ web gấp 2 lần
• [JS] Toàn tập về Javascript Async Await – Tại sao lại nên dùng?

Tài liệu tham khảo:

• https://futurestud.io/tutorials/node-js-how-to-run-an-asynchronous-function-in-array-map
• https://davidwalsh.name/javascript-promise-tricks