Promise的用法及案列

TechFrontRunner

于 2024-10-06 16:09:55 发布

阅读量585

点赞数 3

文章标签： es6

本文链接：https://blog.csdn.net/qq_63447955/article/details/142728221

版权

Promise：异步编程的优雅解决方案

在JavaScript中，异步编程是处理耗时操作（如网络请求、文件读取等）的重要手段。传统的异步编程方式（如回调函数）往往会导致“回调地狱”问题，使得代码结构混乱、难以维护。为了解决这一问题，ES6引入了Promise对象，提供了一种更加优雅、可读性更高的异步编程模式。

一、Promise的基本概念

Promise是一个构造函数，用于创建表示异步操作的对象。Promise对象有三种状态：Pending（进行中）、Resolved（已完成）、Rejected（已失败）。当Promise被创建时，它处于Pending状态。通过调用resolve方法，可以将Promise的状态更改为Resolved，并传递一个结果值；通过调用reject方法，可以将Promise的状态更改为Rejected，并传递一个错误信息。

二、Promise的用法

创建Promise对象

使用new Promise(executor)语法创建Promise对象，其中executor是一个接受两个参数的函数：resolve和reject。这两个参数也是函数，分别用于将Promise的状态更改为Resolved和Rejected。

const promise = new Promise((resolve, reject) => {
    // 异步操作
    if (/* 操作成功 */) {
        resolve('成功的结果');
    } else {
        reject('失败的原因');
    }
});

处理Promise结果

Promise对象提供了then和catch方法，用于处理成功和失败的情况。then方法接受两个参数：onFulfilled（成功时的回调函数）和onRejected（失败时的回调函数）。catch方法用于捕获Promise链中的错误。

promise.then(
    (value) => {
        console.log('成功：', value);
    },
    (reason) => {
        console.error('失败：', reason);
    }
).catch((error) => {
    console.error('捕获到的错误：', error);
});

Promise链式调用

Promise支持链式调用，即一个Promise对象的then方法可以返回一个新的Promise对象，从而可以继续调用then方法。这允许我们将多个异步操作串联起来，形成一个清晰的异步流程。

const firstPromise = new Promise((resolve) => {
    setTimeout(() => resolve('第一个操作成功'), 1000);
});

const secondPromise = firstPromise.then((value) => {
    console.log(value);
    return new Promise((resolve) => {
        setTimeout(() => resolve('第二个操作成功'), 1000);
    });
});

secondPromise.then((value) => {
    console.log(value);
});

Promise静态方法

Promise还提供了几个静态方法，用于创建和处理Promise对象：
- Promise.all(iterable)：接受一个可迭代对象（如数组），返回一个新的Promise对象，该对象在所有给定的Promise对象都成功时才会成功，任何一个失败都会导致整个Promise对象失败。
- Promise.race(iterable)：接受一个可迭代对象，返回一个新的Promise对象，该对象的状态由第一个完成的Promise对象决定（无论是成功还是失败）。
- Promise.resolve(value)：返回一个以给定值解析的Promise对象。
- Promise.reject(reason)：返回一个以给定原因拒绝的Promise对象。

三、Promise的创作流程

定义Promise构造函数

创建一个类（或构造函数），用于生成Promise对象。在该构造函数中，定义状态（Pending、Resolved、Rejected）和存储结果或错误信息的变量。同时，定义resolve和reject方法，用于更改状态和存储结果或错误信息。

class MyPromise {
    constructor(fn) {
        this._status = 'pending';
        this._value = undefined;
        const resolve = (value) => {
            if (this._status === 'pending') {
                this._status = 'fulfilled';
                this._value = value;
            }
        };
        const reject = (reason) => {
            if (this._status === 'pending') {
                this._status = 'rejected';
                this._value = reason;
            }
        };
        try {
            fn(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }

    then(onFulfilled, onRejected) {
        if (this._status === 'fulfilled' && onFulfilled) {
            onFulfilled(this._value);
        }
        if (this._status === 'rejected' && onRejected) {
            onRejected(this._value);
        }
    }
}

实现then方法

在Promise类中实现then方法，该方法接受两个参数：成功时的回调函数和失败时的回调函数。根据Promise的当前状态，调用相应的回调函数，并传递结果或错误信息。
```
// 在MyPromise类中实现的then方法（见上）
```

使用Promise对象

使用new MyPromise(executor)语法创建MyPromise对象，并在executor函数中执行异步操作。通过调用then方法处理成功和失败的情况。

const myPromise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        const success = true; // 模拟异步操作的成功或失败
        if (success) {
            resolve('异步操作成功');
        } else {
            reject('异步操作失败');
        }
    }, 1000);
});

myPromise.then(
    (value) => {
        console.log('成功：', value);
    },
    (reason) => {
        console.error('失败：', reason);
    }
);

以下是一些关于Promise的实际案例，涵盖了JavaScript中Promise的不同使用场景：

四、基本使用案例

异步请求的链式处理

场景描述：在处理网络请求时，经常需要按照特定的顺序执行多个异步操作。
示例代码：

function fetchData(url) {
	return new Promise((resolve, reject) => {
		// 模拟网络请求
		setTimeout(() => {
			resolve("数据加载完成");
			// 或者 reject("请求失败");
		}, 1000);
	});
}

fetchData("http://example.com/data")
	.then(response => {
		console.log(response);
		return fetchData("http://example.com/more-data");
	})
	.then(moreResponse => {
		console.log(moreResponse);
	})
	.catch(error => {
		console.error("请求出错:", error);
	});

文件读取

场景描述：在Node.js环境中，读取文件是一个常见的异步操作。
示例代码（假设使用fs模块）：

const fs = require('fs').promises;

fs.readFile('example.txt', 'utf-8')
	.then(data => {
		console.log("文件内容:", data);
	})
	.catch(error => {
		console.error("读取文件出错:", error);
	});

五、高级使用案例

Promise.race实现请求超时处理

场景描述：在发送请求时，如果请求在一定时间内没有响应，则视为请求超时。
示例代码：

const p1 = fetchData("http://example.com/slow-data");
const p2 = new Promise((_, reject) => {
	setTimeout(() => reject(new Error("请求超时")), 3000);
});

Promise.race([p1, p2])
	.then(response => {
		console.log(response);
	})
	.catch(error => {
		console.error("请求出错或超时:", error);
	});

Promise.all用于并行处理多个请求

场景描述：有时需要同时发送多个请求，并等待所有请求都完成后才进行下一步操作。
示例代码：

const requests = [
	fetchData("http://example.com/data1"),
	fetchData("http://example.com/data2"),
	fetchData("http://example.com/data3")
];

Promise.all(requests)
	.then(responses => {
		responses.forEach(response => {
			console.log(response);
		});
	})
	.catch(error => {
		console.error("其中一个请求出错:", error);
	});

Promise的重试机制

场景描述：在某些情况下，如果请求失败，可能需要进行重试。
示例代码：

function retryFetchData(url, times = 3, delay = 1000) {
	return new Promise((resolve, reject) => {
		function attempt() {
			fetchData(url)
				.then(resolve)
				.catch(error => {
					if (times > 1) {
						console.log(`还有${times - 1}次尝试`);
						setTimeout(attempt, delay);
					} else {
						reject(error);
					}
				});
		}

		attempt();
	});
}

retryFetchData("http://example.com/unreliable-data")
	.then(response => {
		console.log(response);
	})
	.catch(error => {
		console.error("请求失败，重试后仍然出错:", error);
	});