Promise使用,看完你一定会有所收获

本文详细探讨了Promise的使用,包括其初识、状态变化、then方法的特性,以及宏任务和微任务的关系。通过实例展示了如何避免回调地狱,解释了Promise状态的不可变性,并讨论了异常处理的多种方式。
摘要由CSDN通过智能技术生成

测试环境为Node.js/谷歌浏览器,如若没有声明,默认环境为Node.js

Promise语法出现前,我们是这样使用具有依赖关系的异步函数的,以读取文件内容为例:

let fs = require("fs");

fs.readFile('./1.txt','utf-8',(err, result1) => {
   
	console.log(result1);
	fs.readFile('./2.txt','utf-8',(err, result2) => {
   
		console.log(result2);
		fs.readFile('./3.txt','utf-8',(err, result3) => {
   
			console.log(result3);
		});
	});	
});

这就是我们通常所说的回调地狱,在结构上有着极不便于阅读的缺点,为此Promise的出现为我们在结构上做了极大的优化



Promise的初使用

Promise是什么?

对象

promise对象通过new直接创建

//let p = new Promise();  没有参数会报错
let p = new Promise((resolve,reject) => {
   }); //通常传入一个匿名函数,函数参数一般为resolve和reject

试着打印一下这个对象

let p = new Promise((resolve,reject) => {
   }); 
console.log(p);		//=> Promise { <pending> }; 	:Node.js
console.log(p);		//=> Promise {<pending>}; 	:谷歌浏览器

Promise的状态

Promise一共有三种状态,上面打印的是Promise的第一种状态pending(等待)

以下是Promise的三种状态,任何一个Promise对象的状态有且仅有以下一种

  • pending(等待)
  • resolve(成功)
  • reject(拒绝)

打印一个Promise对象
在谷歌浏览器分别实现为

Promise { <pending> }
Promise { <fullfilled>: (参数) }
Promise { <rejected>: (参数) }

在Node.js分别实现为

Promise { <pending> }
Promise { (参数) } 
Promise { <rejected>: (参数) }

在Node.js中分别简单地实现Promise的三种状态

let p1 = new Promise((resolve, reject) => {
   
						  //不做任何处理,默认返回pending状态的Promise
});

console.log(p1);	//=> Promise { <pending> }


let p2 = new Promise((resolve, reject) => {
   
	resolve("second"); 	//用resolve函数返回的都是resolve状态的Promise,参数为second
});

console.log(p2);	//=> Promise { 'second' }


let p3 = new Promise((resolve, reject) => {
   
	reject("thrid"); 	//用reject函数返回的都是reject状态的Promise,参数为thrid
});  //因为抛出了拒绝状态而没有处理,所以这里会报错,可以暂时不用管,不影响我们的结果

console.log(p3);	//=> Promise { <rejected> 'third' }

那么Promise的状态有什么用呢?

传递给后面的then函数处理携带的参数


then()

关于它的使用只需要记住一点:
then方法是跟在Promise对象后面使用的

关于then的特点,需要记住一下几点(最后会做验证)
1.then方法处理上一个Promise的状态,并返回一个新的resolve状态(如果上一个Promise状态不为pending的话,否则返回pendding状态的Promise),参数为undefined

2.then方法默认返回的也是一个Promise对象,因此then是可以链式使用的

2.如果then方法没有处理Promise的状态,那么这个Promise的状态会继续向下传递,给下面的then处理

then方法可以接收一个或者两个函数,一般都是匿名函数

/*接收两个函数,这两个函数可以分别处理上一个Promise的状态*/
new Promise((resolve, reject) => {
   

}).then(value => {
   	//假如Promise的状态为resolve,那么value为对应resolve参数的值
	console.log(value);
},reason => {
   		//假如Promise的状态为reject,那么value为对应reject参数的值
	console.log(reason);
})

/*接收一个函数*/
new Promise((resolve, reject) => {
   

}).then(value => {
   	//假如Promise的状态为resolve,那么value为对应resolve参数的值
	console.log(value);
})
/*或者*/
new Promise((resolve, reject)<
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值