Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Method Promise.allSettled() trong JavaScript có gì hay?

@devnavNov 15, 20222 min read...

Trong bài viết trước, chúng ta đã tìm hiểu JavaScript Promise là gì?, ở bài viết này chúng ta sẽ tìm hiểu về method Promise.allSettled() trong JavaScript nhé!

Method Promise.allSettled() nhận một mảng gồm các promise và trả về một mảng các object chứa kết quả của mỗi promise. Mỗi object có một thuộc tính status có giá trị là 'fulfilled' hoặc 'rejected'.

Chúng ta cùng xem một ví dụ:

const api = "https://randomuser.me/api/";
const arrGender = ["female", "male"];

async function getData(gender) {
  const response = await fetch(`${api}?gender=${gender}`);

  if (response.ok) return response.json();

  const { status } = response;

  return Promise.reject(status);
}

const data = arrGender.map((value) => getData(value));

Promise.allSettled(data).then((results) => {
  console.log(results);
});

Ở đoạn code trên, mình muốn lấy kết quả trả về từ 2 request, chúng ta sẽ tạo một mảng chứa promise và truyền cho Promise.allSettled(), kết quả sẽ tương tự như sau:

[
    {
        "status": "fulfilled",
        "value": {
            "results": [
                {
                    "gender": "female",
                    "name": {
                        "title": "Ms",
                        "first": "Peppi",
                        "last": "Savela"
                    },
                }
            ],
        }
    },
    {
        "status": "fulfilled",
        "value": {
            "results": [
                {
                    "gender": "male",
                    "name": {
                        "title": "Mr",
                        "first": "Adán",
                        "last": "Lomeli"
                    },
                }
            ],
        }
    }
]

Kết quả trên chúng ta thấy, cả 2 request đều thành công với status là fulfilled. Giá trị nhận được từ request được trả vào thuộc tính value của object.

Chúng ta có thể giả sử một request bị lỗi để xem kết quả trả về của Promise.allSettled() như sau:

const api = "https://randomuser.me/api/";
const arrGender = ["female", "male"];

async function getData(gender) {
  const response = await fetch(`${api}?gender=${gender}`);

  if (gender === "female") {
    if (response.ok) return response.json();

    const { status } = response;

    return Promise.reject(status);
  }

  return Promise.reject("error: " + response.url);
}

const data = arrGender.map((value) => getData(value));

Promise.allSettled(data).then((results) => {
  console.log(results);
});

Như bạn thấy bên dưới, nếu request lỗi, giá trị status nhận được là rejected, và thuộc tính reason cho biết nguyên nhân dẫn đến lỗi.

[
    {
        "status": "fulfilled",
        "value": {
            "results": [
                {
                    "gender": "female",
                    "name": {
                        "title": "Mrs",
                        "first": "Hailey",
                        "last": "Morin"
                    },  
                }
            ],
        }
    },
    {
        "status": "rejected",
        "reason": "error: https://randomuser.me/api/?gender=male"
    }
]

Khi sử dụng Promise.allSettled(), các bạn có thể kết hợp với method Array.prototype.filter() để lọc promise theo điều kiện:

function isFulfilled(result) {
  return result.status === 'fulfilled';
}

Promise.allSettled(data).then(results => {
  console.log('Fulfilled results:', results.filter(isFulfilled));
});