如何为Promise.all返回的响应对象命名，替代下标访问方式？

Absolutely! Ditching array indices for named variables makes your code way more readable and maintainable. Here are a few straightforward approaches to do this:

1. Array Destructuring (Most Common & Clean) #

This is the go-to method for most cases. You can directly destructure the array returned by Promise.all into named variables that match the order of your Promises:

// Example Promise-returning functions
const fetchUser = () => fetch('/api/user').then(res => res.json());
const fetchProduct = () => fetch('/api/product').then(res => res.json());
const fetchOrder = () => fetch('/api/order').then(res => res.json());
const fetchPayment = () => fetch('/api/payment').then(res => res.json());

// Destructure the resolved array into named variables
const [userData, productData, orderData, paymentData] = await Promise.all([
  fetchUser(),
  fetchProduct(),
  fetchOrder(),
  fetchPayment()
]);

// Use the named variables directly
console.log(userData.fullName);
console.log(productData.price);

Bonus: If you don't need some responses, skip them with empty commas:

// Skip productData and paymentData
const [userData, , orderData] = await Promise.all([
  fetchUser(),
  fetchProduct(),
  fetchOrder(),
  fetchPayment()
]);

2. Destructure into an Object (Explicit Index-to-Name Mapping) #

If you want to explicitly map array indices to named properties (useful if you need object-style access later), destructure the array into an object:

const responses = await Promise.all([
  fetchUser(),
  fetchProduct(),
  fetchOrder(),
  fetchPayment()
]);

// Map indices to custom names
const { 
  0: user, 
  1: product, 
  2: order, 
  3: payment 
} = responses;

// Access via named properties
console.log(user.email);

You can even condense this into one line:

const { 0: user, 1: product, 2: order, 3: payment } = await Promise.all([
  fetchUser(),
  fetchProduct(),
  fetchOrder(),
  fetchPayment()
]);

3. Object-Based Promise Mapping (Order-Independent) #

If you want to decouple response names from Promise order (great for larger sets or dynamic Promise lists), use an object to track Promises and map results back to their keys:

// Create an object with your desired names as keys
const promiseTasks = {
  user: fetchUser(),
  product: fetchProduct(),
  order: fetchOrder(),
  payment: fetchPayment()
};

// Resolve all Promises, then map results to their original keys
const resolvedValues = await Promise.all(Object.values(promiseTasks));
const namedResponses = Object.fromEntries(
  Object.keys(promiseTasks).map((key, index) => [key, resolvedValues[index]])
);

// Access via the original object keys
console.log(namedResponses.user.id);
console.log(namedResponses.product.inStock);

This approach ensures that reordering Promises in promiseTasks won't break your named response references.

内容的提问来源于stack exchange，提问作者Jamie Aden