promise 用法
时间: 2024-02-11 08:01:19 浏览: 36
Promise是一种异步编程的解决方案,它可以避免回调地狱,使得异步操作更加清晰和易于维护。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当Promise处于pending状态时,可以转换为fulfilled或rejected状态,一旦转换为其中一种状态,就不可再转换为其他状态。
Promise的基本用法如下:
```javascript
const promise = new Promise((resolve, reject) => {
// 异步操作
if (/* 异步操作成功 */) {
resolve(value); // 将Promise状态设置为fulfilled,并将异步操作的结果传递给回调函数
} else {
reject(error); // 将Promise状态设置为rejected,并将错误信息传递给回调函数
}
});
promise.then((value) => {
// 异步操作成功时的回调函数
}, (error) => {
// 异步操作失败时的回调函数
});
```
另外,Promise还提供了一些静态方法,如Promise.resolve和Promise.reject,可以方便地创建已经处于fulfilled或rejected状态的Promise对象,以及Promise.all和Promise.race等方法,可以处理多个Promise对象的状态。
下面是一个使用Promise的例子,通过异步加载图片并在加载完成后显示图片:
```javascript
function loadImageAsync(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = function() {
resolve(img);
};
img.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
img.src = url;
});
}
loadImageAsync('https://example.com/image.jpg')
.then((img) => {
document.body.appendChild(img);
})
.catch((error) => {
console.error(error);
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)