在前端开发中，经常会遇到需要同时发起多个异步请求的情况，例如获取用户信息、获取商品列表、获取订单信息等等。在没有 Promise 的时代，我们通常使用回调函数来处理这些异步请求，但是回调函数嵌套过多，代码可读性和可维护性都会变得非常差。而 Promise 的出现，可以很好地解决这个问题。
Promise 的基本用法
Promise 是一种异步编程的解决方案，它可以让我们更加优雅地处理异步请求。一个 Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 的状态变为 fulfilled 或 rejected 时，我们可以通过 then() 方法指定回调函数来处理 Promise 的返回值或错误信息。
下面是 Promise 的基本用法：
// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
// 异步操作
// 如果异步操作成功，则调用 resolve() 方法
// 如果异步操作失败，则调用 reject() 方法
});
promise.then(result => {
// 处理成功的结果
}).catch(error => {
// 处理失败的结果
});Promise.all() 方法
如果我们需要同时发起多个异步请求，并且需要等待所有请求都完成后再进行处理，可以使用 Promise.all() 方法。Promise.all() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise，当所有 Promise 都成功返回结果时，这个新的 Promise 的状态变为 fulfilled，并返回所有 Promise 的结果数组；当其中一个 Promise 失败时，这个新的 Promise 的状态变为 rejected，并返回失败的 Promise 的错误信息。
下面是 Promise.all() 方法的基本用法：
// www.javascriptcn.com code example
const promise1 = new Promise(resolve => {
setTimeout(() => {
resolve('Hello');
}, 1000);
});
const promise2 = new Promise(resolve => {
setTimeout(() => {
resolve('World');
}, 2000);
});
Promise.all([promise1, promise2]).then(results => {
console.log(results); // ['Hello', 'World']
}).catch(error => {
console.error(error);
});Promise.race() 方法
如果我们需要同时发起多个异步请求，并且只需要处理最先完成的请求的结果，可以使用 Promise.race() 方法。Promise.race() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise，当其中一个 Promise 完成时，这个新的 Promise 的状态变为 fulfilled 或 rejected，并返回第一个完成的 Promise 的结果或错误信息。
下面是 Promise.race() 方法的基本用法：
// www.javascriptcn.com code example
const promise1 = new Promise(resolve => {
setTimeout(() => {
resolve('Hello');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Timeout'));
}, 2000);
});
Promise.race([promise1, promise2]).then(result => {
console.log(result); // 'Hello'
}).catch(error => {
console.error(error); // Error: Timeout
});Promise 的优化实践
现在我们来看一个实际的例子，假设我们需要同时获取多个用户的信息，然后将这些信息进行处理。如果使用回调函数来处理这些异步请求，代码可能会长成这样：
// www.javascriptcn.com code example
function getUser(id, callback) {
// 发起异步请求
setTimeout(() => {
const user = {id, name: `User ${id}`};
callback(user);
}, 1000);
}
function getUsers(ids, callback) {
const users = [];
let count = 0;
ids.forEach(id => {
getUser(id, user => {
users.push(user);
count++;
if (count === ids.length) {
callback(users);
}
});
});
}
getUsers([1, 2, 3], users => {
console.log(users); // [{id: 1, name: 'User 1'}, {id: 2, name: 'User 2'}, {id: 3, name: 'User 3'}]
});可以看到，这段代码中嵌套了两层回调函数，可读性和可维护性都非常差。如果使用 Promise 来处理这些异步请求，代码可以变得更加优雅：
// www.javascriptcn.com code example
function getUser(id) {
return new Promise(resolve => {
// 发起异步请求
setTimeout(() => {
const user = {id, name: `User ${id}`};
resolve(user);
}, 1000);
});
}
function getUsers(ids) {
const promises = ids.map(id => getUser(id));
return Promise.all(promises);
}
getUsers([1, 2, 3]).then(users => {
console.log(users); // [{id: 1, name: 'User 1'}, {id: 2, name: 'User 2'}, {id: 3, name: 'User 3'}]
});可以看到，使用 Promise 可以让代码变得更加简洁和易读。同时，我们也可以使用 Promise.race() 方法来处理超时的情况：
// www.javascriptcn.com code example
function getUser(id) {
return new Promise((resolve, reject) => {
// 发起异步请求
setTimeout(() => {
const user = {id, name: `User ${id}`};
resolve(user);
}, 1000);
});
}
function getUsers(ids) {
const promises = ids.map(id => getUser(id));
const timeout = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Timeout'));
}, 2000);
});
return Promise.race([Promise.all(promises), timeout]);
}
getUsers([1, 2, 3]).then(users => {
console.log(users); // [{id: 1, name: 'User 1'}, {id: 2, name: 'User 2'}, {id: 3, name: 'User 3'}]
}).catch(error => {
console.error(error); // Error: Timeout
});结语
Promise 是一种非常强大的异步编程解决方案，它可以让我们更加优雅地处理异步请求。在实际开发中，我们可以使用 Promise.all() 方法和 Promise.race() 方法来优化多个异步请求的回调，让代码变得更加简洁和易读。同时，我们也可以使用 Promise 来处理超时的情况，让我们的应用变得更加健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3afdba941bf71347069a8