JavaScript中Promise的用法指南

在现代的JavaScript开发中，Promise已经成为了处理异步操作的重要部分。它提供了一种在将来某个时刻获取异步操作结果的优雅方式，避免了传统的回调地狱（callback hell）问题。

Promise对象代表了一个尚未完成，但预期将来会完成的操作的结果。它有三种状态：

`pending`: 初始状态，既不是成功，也不是失败状态。

`fulfilled`: 意味着操作成功完成。

`rejected`: 意味着操作失败。

Promise的基本用法涉及两个部分：创建Promise和消费Promise。

创建Promise

创建一个新的Promise对象，你可以使用以下构造函数：

new Promise(function(resolve, reject) {
// 异步操作代码
// 成功时，调用resolve(value)
// 失败时，调用reject(error)
});

例子：

function fetchData(url) {
return new Promise(function(resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
};
xhr.onerror = function() {
reject(new Error('Network error'));
};
xhr.send();
});
}

消费Promise

你可以通过`.then()`、`.catch()`和`.finally()`方法来处理Promise的结果。

`.then()`：当Promise成功解决（fulfilled）时调用。

`.catch()`：当Promise被拒绝（rejected）时调用。

`.finally()`：无论Promise是解决还是被拒绝，都会调用。

例子：

fetchData('https://api.example.com/data')
.then(function(data) {
console.log('Data:', data);
})
.catch(function(error) {
console.error('Error:', error);
})
.finally(function() {
console.log('Request complete');
});

链式调用

Promise的一个重要特性是可以通过链式调用`.then()`来按顺序执行多个异步操作。

fetchData('https://api.example.com/data')
.then(function(data) {
return fetchData('https://api.example.com/more-data?data=' + data);
})
.then(function(moreData) {
console.log('Combined data:', moreData);

})
.catch(function(error) {
console.error('Error:', error);
});

Promise.all 和 Promise.race

Promise也提供了几个静态方法来处理多个Promise。

`Promise.all()`：接受一个Promise数组，当所有Promise都成功解决时返回一个结果数组。

`Promise.race()`：接受一个Promise数组，返回第一个解决或拒绝的Promise的结果。

例子：

const promises = [
fetchData('https://api.example.com/data1'),
fetchData('https://api.example.com/data2'),
fetchData('https://api.example.com/data3')
];

Promise.all(promises)
.then(function(results) {
console.log('All data:', results);
})
.catch(function(error) {
console.error('Error:', error);
});

Promise.race(promises)
.then(function(result) {
console.log('First resolved:', result);
})
.catch(function(error) {
console.error('Error:', error);
});