彻底弄懂Promise！！！

前端小卡拉米

已于 2024-01-12 21:11:09 修改

阅读量1.1k

点赞数 40

文章标签：前端 javascript 开发语言 es6 typescript

于 2024-01-12 21:10:37 首次发布

本文链接：https://blog.csdn.net/weixin_52645312/article/details/135557665

版权

一、什么是Promise

二、为什么使用Promise

三、Promise的基本用法

四、Promise.resolve()与Promise.reject()

五、Promise.then与Promise.catch

六、Promise.all(iterable)与Promise.race(iterable)

七、使用场景

补充

一、什么是Promise

Promise是一种用于处理异步操作的JavaScript对象。它代表了一个尚未完成但最终会完成的操作，并可以返回操作的结果或错误信息。Promise对象有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。当操作完成时，Promise对象可以从pending状态转变为fulfilled状态，表示操作成功完成；或者从pending状态转变为rejected状态，表示操作失败。

二、为什么使用Promise

使用Promise可以更好地处理异步操作，避免了回调地狱（callback hell）的问题。通过使用Promise，可以将异步操作的结果以更直观、可读性更高的方式进行处理，而不需要嵌套多层回调函数。

说到的地狱回调又是什么呢？用一个例子来看看吧。

// 假设有三个异步操作：operation1、operation2、operation3
//地狱回调就是这样子~
operation1(function(result1) {
    operation2(result1, function(result2) {
        operation3(result2, function(result3) {
            // 处理最终结果
        });
    });
});
//使用Promise写法：
operation1()
  .then(result1 => {
    // 在第一个操作完成后执行第二个操作
    return operation2(result1);
  })
  .then(result2 => {
    // 在第二个操作完成后执行第三个操作
    return operation3(result2);
  })
  .then(result3 => {
    // 所有操作完成后的处理
    console.log(result3);
  })
  .catch(error => {
    // 错误处理
    console.error(error);
  });
//你觉得哪一种写法的可读性更好？后期更好维护呢？

三、Promise的基本用法

Promise通过new Promise()将构造函数实例化，Promise构造函数接收一个函数作为参数，这个函数有两个参数resolve，reject，这两个参数也是方法，成功调用resolve()，失败调用reject()，实例创建完成后，可以使用then方法指定成功或者失败的回调函数，也可以用catch捕获失败，then和catch最后也是返回promise对象，所以可以链式调用。

以下是一个使用Promise的简单示例：

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber);
    } else {
      reject(new Error('Random number is less than 0.5'));
    }
  }, 1000);
});

promise.then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

在上面的示例中，我们创建了一个Promise对象，模拟了一个异步操作。如果生成的随机数大于0.5，Promise对象的状态会变为resolved，然后调用promise.then中的回调函数；如果生成的随机数小于等于0.5，Promise对象的状态会变为rejected，然后调用promise.catch中的回调函数。

四、Promise.resolve()与Promise.reject()

Promise.resolve()方法用于将现有对象转为Promise对象。它有四种参数情况：

1. 参数是一个Promise实例：

//参数是一个Promise实例，resolve()将不做任何修改，直接返回这个实例。
let p = new Promise((resolve, reject) => {
  resolve('foo');
});
let p1 = Promise.resolve(p);
p1.then(function(value) {
  console.log(value); // 输出：foo
});

2. 参数是一个thenable对象（具有then方法的对象）：

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
let p2 = Promise.resolve(thenable);
p2.then(function(value) {
  console.log(value); // 输出：42
});

3. 参数是一个原始值或普通对象：

let p3 = Promise.resolve('bar');
p3.then(function(value) {
  console.log(value); // 输出：bar
});
let p4 = Promise.resolve({ name: 'Alice' });
p4.then(function(value) {
  console.log(value); // 输出：{ name: 'Alice' }
});

4. 参数没有任何值：

let p5 = Promise.resolve();
p5.then(function() {
  console.log('resolved');
});

Promise.reject()方法返回一个带有拒绝原因的Promise对象。它可以用于在Promise链中显式地拒绝一个Promise，并将拒绝原因传递给后续的catch()方法进行处理。

Promise.reject(new Error("BOOM!")).catch(error => { console.error(error); })
 // 输出：Error: BOOM!

上述例子创建了一个被拒绝的Promise对象，并传递了一个Error对象作为拒绝原因。然后使用catch()方法来捕获并处理拒绝的Promise，

五、Promise.then与Promise.catch

Promise.then()方法接受两个参数，分别是onFulfilled和onRejected。这两个参数都是函数，用于处理Promise对象的状态变为fulfilled（已完成）或rejected（已拒绝）时的回调函数。

onFulfilled是当Promise对象的状态变为fulfilled时调用的函数。它接收Promise对象的解决值作为参数，并返回一个新的Promise对象或一个值。如果返回一个新的Promise对象，则后续的then()方法将等待该Promise对象的状态变为fulfilled或rejected，并将其解决值传递给下一个then()方法。如果返回一个值，则后续的then()方法将立即被调用，并将该值作为解决值传递给下一个then()方法。

onRejected是当Promise对象的状态变为rejected时调用的函数。它接收Promise对象的拒绝原作为参数，并返回一个新的Promise对象或一个值。如果返回一个新的Promise对象，则后续的then()方法将等待该Promise对象的状态变为fulfilled或rejected，并将其解决值或拒绝原因传递给下一个then()方法。如果返回一个值，则后续的then()方法将立即被调用，并将该值作为解决值传递给下一个then()方法。

promise.then((value) => {
  // 处理解决值
}, (reason) => {
  // 处理拒绝原因
}).catch((error) => {
  // 处理错误
});

与catch()方法相比，第二个参数onRejected和catch()方法的区别在于，onRejected只会处理当前Promise对象的拒绝原因，而catch()方法可以处理当前Promise对象及其后续Promise对象的拒绝原因。此外，catch()方法还可以在链式调用中更方便地捕获错误。

Promise.then(null,onOejected)用于指定当Promise对象的状态变为rejected时的回调函数。第一个参数为null，表示不处理Promise对象状态变为fulfilled的情况，第二个参数为一个回调函数，用于处理Promise对象状态变为rejected的情况。

let promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    reject('Error occurred');
  }, 2000);
});
promise.then(null, (error) => {
  console.log(error); // 输出：Error occurred
});
// .catch()是.then(null, 参数)的别名，结果都是一样的
promise .catch(reason => {
  console.log(reason); // 输出：Error occurred
});
/*这个例子表示promise对象的状态在2秒后变为rejected，并且传递了一个错误信息。
then方法的第一个参数为null，表示不处理状态变为fulfilled的情况，
第二个参数为一个回调函数，用于处理状态变为rejected的情况。*/

同理当promise.then()只有一个参数时，用于处理promise对象的成功状态。

六、Promise.all(iterable)与Promise.race(iterable)

两个方法的区别：

promise.all(iterable)：iterable是由多个promise实例组成的可迭代对象（如Array, Map, Set)，即将多个 Promise 对象包装成一个新的 Promise 实例。

当iterable中的promise实例都完成，所有实例都变为 fulfilled 状态时，该新的 Promise 实例才会变为 fulfilled 状态，返回所有成功的结果组成的数组，当任意一个 Promise 对象变为 rejected 状态时，该新的 Promise 实例就会变为 rejected 状态。只要有一个回调执行失败，then是不会执行的，则在catch中回调第一个失败的结果。

下面是 Promise.all 方法的用法和示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 2000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 3000);
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 3 rejected');
  }, 4000);
});
Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 输出：['Promise 1 resolved', 'Promise 2 resolved']
  })
  .catch((error) => {
    console.log(error); // 输出：'Promise 3 rejected'
  });

在上面的示例中，我们创建了三个 Promise 对象，分别是 promise1、promise2 和 promise3。promise1 和 promise2 分别在 2 秒和 3 秒后变为 fulfilled 状态，而 promise3 在 4 秒后变为 rejected 状态。

然后，我们使用 Promise.all 方法将这三个 Promise 对象包装成一个新的 Promise 实例，并通过 then 方法和 catch 方法分别处理 fulfilled 状态和 rejected 状态。

在 then 方法中，我们可以获取到所有 Promise 对象的结果值，以数组的形式返回。在 catch 方法中，我们可以获取到第一个变为 rejected 状态的 Promise 对象的错误信息。

promise.race(iterable)：Promise.race(iterable)方法也接收一个可迭代对象作为参数，返回一个新的Promise对象。只要iterable中的任意一个promise实例resolved或者rejected，返回的promise就会resolved或者rejected。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
});
// 输出：'two'

七、使用场景

例子：后端接口进阶写法，使用promise 、asyn/await同时返回两个数据给前端。

// 获取产品类别和总价
exports.getCategoryAndNumber = (req, res) => {
	// 获取产品类别数组
	const CategoryArr = () => {
		return new Promise(resolve => {
			const sql = 'select set_value from setting where set_name = "产品设置"'
			db.query(sql, (err, result) => {
				let str = result[0].set_value
				// eval() JSON格式字符串转化为 JSON对象
				const arr = eval('(' + str + ')')
				resolve(arr)
			})
		})
	}
	// 获取价格
	const getNumber = product_category => {
		return new Promise(resolve => {
			const sql = 'select product_all_price from product where product_category= ?'
			db.query(sql,product_category,(err,result)=>{
				let total = 0
				for(let i =0;i<result.length;i++){
					total += result[i]['product_all_price']
				}
				resolve(total)
			})
		})
	}
	// 通过循环类别数组里面每一个类别获取对应的价格
	async function getAll(){
		const category= await CategoryArr()	 
		const price = []
		for(let i =0 ;i <category.length;i++){
			price[i] = await getNumber(category[i])
		}
		res.send({
			category:category,
			price:price
		})
	}
	getAll()
}

补充

Promise.finally()：用于指定Promise对象的回调函数，无论Promise对象的状态是成功还是失败，该回调函数都会执行。
Promise.allSettled()：接收一个Promise对象的数组作为参数，当这个数组中的所有Promise对象都变为fulfilled或rejected状态时，allSettled()返回一个新的Promise对象。
Promise.any()：接收一个Promise对象的数组作为参数，当这个数组中的任意一个Promise对象变为resolved状态时，any()返回一个新的Promise对象。