Promise 是 JavaScript 中用于处理异步操作的对象。new Promise((resolve, reject) => { ... })
是创建 Promise 的基本语法。下面详细介绍其使用方法:
const myPromise = new Promise((resolve, reject) => {
// 异步操作代码
if (/* 操作成功 */) {
resolve(value); // 成功时调用,传递结果值
} else {
reject(error); // 失败时调用,传递错误信息
}
});
const promise = new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
const randomNumber = Math.random();
if (randomNumber > 0.5) {
resolve(`成功,数字是: ${randomNumber}`);
} else {
reject(`失败,数字太小: ${randomNumber}`);
}
}, 1000);
});
promise
.then(result => {
console.log(result); // 成功时执行
})
.catch(error => {
console.error(error); // 失败时执行
})
.finally(() => {
console.log('操作完成'); // 无论成功失败都会执行
});
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`无法加载图片: ${url}`));
img.src = url;
});
}
loadImage('https://example.com/image.jpg')
.then(img => document.body.appendChild(img))
.catch(err => console.error(err));
function fetchData(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error(`请求失败: ${xhr.statusText}`));
}
};
xhr.onerror = () => reject(new Error('网络错误'));
xhr.send();
});
}
fetchData('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error(error));
new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000);
})
.then(result => {
console.log(result); // 1
return result * 2;
})
.then(result => {
console.log(result); // 2
return result * 3;
})
.then(result => {
console.log(result); // 6
})
.catch(error => {
console.error(error);
});
Promise 一旦状态改变(从 pending 变为 fulfilled 或 rejected),就不能再改变
如果不处理 reject(即没有 catch),会导致未捕获的 Promise 错误
resolve 和 reject 只能传递一个参数,多个值需要用对象或数组包装
Promise 构造函数中的代码是同步执行的,只有 then/catch/finally 是异步的
Promise 是现代 JavaScript 异步编程的基础,后续的 async/await 语法也是基于 Promise 实现的。