如何过滤Promise.all返回数组中的null汽车数据条目？

我从其他系统获取汽车数据，getCar函数返回Promise。当传入多个汽车ID且某个ID对应的汽车不存在时，返回的cars数组中会出现null条目（格式如[carObject, ..., null]）。现有代码如下：

JavaScript代码：

const carPromises = cars.map(car=> getCar(car.id));
const cars = await Promise.all(carPromises );
console.log(`Car Data -> ${JSON.stringify(cars)}`);

TypeScript的getCar函数：

export const getCar = async (carId: number) => {
try {
    const response = await axiosInstance.get(`${baseUrl}/car/${carId}`);
    const car = response.data;
    return car;
} catch (err) {
   console.error(err);
}

下面给你几种可行的解决方法：

方法1：修改getCar并过滤结果 #

先调整getCar函数，让它在捕获异常时明确返回undefined（原代码catch块无return会隐式返回undefined，写清楚更直观），之后在拿到所有结果后过滤掉无效值：

修改后的getCar：

export const getCar = async (carId: number) => {
  try {
    const response = await axiosInstance.get(`${baseUrl}/car/${carId}`);
    return response.data;
  } catch (err) {
    console.error(err);
    return undefined; // 明确返回undefined
  }
}

处理结果时过滤：

const carPromises = cars.map(car => getCar(car.id));
const allResults = await Promise.all(carPromises);
const validCars = allResults.filter(car => car != null); // 同时过滤null和undefined
console.log(`有效汽车数据 -> ${JSON.stringify(validCars)}`);

方法2：在Promise链中提前处理异常 #

不用修改原getCar，给每个Promise加上catch逻辑，出错时返回null，之后统一过滤：

const carPromises = cars.map(car => 
  getCar(car.id)
    .catch(err => {
      console.error(err);
      return null;
    })
);

const allResults = await Promise.all(carPromises);
const validCars = allResults.filter(car => car !== null);

方法3：用Promise.allSettled区分成功失败 #

如果需要更清晰地区分每个请求的成功/失败状态，可以用Promise.allSettled，它会返回每个Promise的状态和结果，之后只提取成功且非null的结果：

const carPromises = cars.map(car => getCar(car.id));
const settledResults = await Promise.allSettled(carPromises);

const validCars = settledResults
  .filter(item => item.status === 'fulfilled' && item.value !== null)
  .map(item => item.value);

console.log(`有效汽车数据 -> ${JSON.stringify(validCars)}`);

这种方法的好处是不会因为单个请求失败影响整体，还能保留失败请求的信息（如果需要的话）。

内容的提问来源于stack exchange，提问作者John Silva