首页 > 其他分享> > Promise学习笔记

Promise学习笔记

2021-08-07 11:01:38 作者：互联网

promise对象用来封装一个异步操作并可以获得其结果

在这之前我们先了解一下回调函数的分类

1.同步回调，立即执行，执行完了才结束，像数组遍历/Promise的excutor函数

const arr = [1,3,5];
arr.forEach(item=>{
	console.log(item)
})
console.log('先回打印1,3,5,才轮到我')

2.异步回调，不会立即执行，会放入回调队列中将来执行例如定时器/ajax/Promise的成功失败状态回调，定时器设置0调用也是异步

setTimeout(()=>{
	console.log('timeout');//异步回调函数会放到队列中，等待同步任务执行完成，再调用
},0)
console.log('我会在timeout之前出现');

3.错误的类型

Error：所有错误的父类型
ReferenceError：引用的变量不存在
TypeError：数据类型不正确的错误
RangError：数据值不在其所允许的范围内
SyntaxError：语法错误

 //   常见的内置错误
 // 1) ReferenceError: 引用的变量不存在
 console.log(a);
 console.log('上面出问题了，你是打印不了我的');   // 没有捕获error，下面的代码不会执行
//Uncaught ReferenceError: a is not defined
 
 
 // 2) TypeError：数据类型不正确的错误
 let obj={}; 
 obj.a();//Uncaught TypeError: obj.a is not a function
 
 
 // 3) RangError：数据值不在其所允许的范围内，一般使用递归跳出条件出错就会报这种错误
 //求斐波拉契数列 1,1,2,3,5,8,13,21....从第三项开始，后一项等于前两项的和
 //也就是第n项=第(n-1)项+第(n-2)项 n>2
 //错误的
 {
 	function fn(num){ 
 		if(num == 1){ 
 			return 1
 		}else{ 
 			return fn(num-1)+fn(num-2)
 		} 
 	} 
 	fn(5)
 	//Uncaught RangeError: Maximum call stack size exceeded
    //at fn (<anonymous>:2:4)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
    //at fn (<anonymous>:5:12)
 }
 //正确的
  {
 	function fn(num){ 
 		if(num == 1||num == 2){ //第一项和第二项都为1
 			return 1
 		}else{ 
 			return fn(num-1)+fn(num-2)
 		} 
 	} 
 	fn(5)//5
 }
 // 4) SyntaxError: 语法错误
let obj={
	nameage:1;//对象内不能使用分号
};
//Uncaught SyntaxError: Unexpected token ';'

4.错误处理捕获错误：try…catch

错误对象

message属性: 错误相关信息
stack属性: 函数调用栈记录信息

//捕获错误
try{
	let b;
	console.log(b.xxx);
}catch(error){
	console.log(error.message);//错误相关信
	console.log(error.stack);//函数调用栈记录信息
}
//Cannot read property 'xxx' of undefined
//TypeError: Cannot read property 'xxx' of undefined

抛出错误

//抛出错误
function sth(){
	if(Date.now() % 2 === 1){
		cosnole.log('当前时间为奇数执行')
	}else{
		throw new Error('当前时间为偶数，无法执行,抛出错误')
	}
}
try{
	sth();
}catch(error){
console.log(error.message)
}

Promise基本使用

Promise是JS中进行异步编程的新解决方案(旧的是纯回调)
语法上：Promise是一个构造函数
功能上：promise对象用来封装一个异步操作并可以获取其结果

//1.创建一个新的promise对象
const p = new Promise((resolve,reject)=>{//执行器函数，同步回调
	console.log('执行excutor')
	//2.执行异步操作任务
	setTimeout(()=>{
		const time = Date.now()//获取当前时间判断奇偶性，设置状态
		if(time % 2 == 0 ){
			resolve(`成功的状态，time=${time}`)
		}else{
			reject(`失败的状态，time=${time}`)
		}
	},1000)
})
console.log('我会在上面执行excutor后打印');
console.log(p);//不确定状态可以直接打印实例对象查看,
p.then(
    value => { // 接收得到成功的value数据    onResolved
        console.log('成功的回调', value)
    },
    reason => {// 接收得到失败的reason数据  onRejected
        console.log('失败的回调', reason)
    }
)
//执行excutor
//我会在上面执行excutor后打印
//Promise {<pending>}
//Promise {<pending>}
//失败的回调 失败的状态，time=1628302893857

使用Promise的优点

1.指定回调函数的方式更加灵活，简单，必须在启动异步任务之前指定promise，启动异步任务=>返回 promise对象=>给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
2.支持链式调用，可以解决回调地狱问题
回调地狱中函数层层嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件，不便于阅读，不便于异常处理
使用promise链式调用可以解决，终极解决方案使用async/await

//回调地狱
doSomething(function(result) {
	doSomethingElse(result, function(newResult) {
  		doThirdThing(newResult, function(finalResult) {
    		console.log('Got the final result: ' + finalResult)
  		}, failureCallback)
	}, failureCallback)
}, failureCallback)
//使用promise的链式调用解决回调地狱
doSomething()
  .then(function (result) {
      return doSomethingElse(result)
  })
  .then(function (newResult) {
      return doThirdThing(newResult)
  })
  .then(function (finalResult) {
      console.log('Got the final result: ' + finalResult)
  })
  .catch(failureCallback)  // 任何一个发生异常都传入这里
//async/await: 回调地狱的终极解决方案
async function request() {
  try {
      const result = await doSomething()
      const newResult = await doSomethingElse(result)
      const finalResult = await doThirdThing(newResult)
      console.log('Got the final result: ' + finalResult)
  } catch (error) {
      failureCallback(error)
  }
}

Promise的状态改变

当我们通过new Promise获得一个promise实例对象时，它的状态为pendding状态，
通过我们设置或者异步的结果会改变它的状态
pendding(等待)，resolved(成功)，rejected(失败)
它的状态细分就这三种，一般只记成功失败，它的状态只能改变一次，无论成功还是失败，都会有一个结果数据，一旦确定后面不会改变

Promise的API

Promise构造函数: Promise (excutor) {} excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行
Promise.prototype.then方法: (onResolved, onRejected) => {} onResolved函数: 成功的回调函数 (value) => {} onRejected函数: 失败的回调函数 (reason) => {} 说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象
Promise.prototype.catch方法: (onRejected) => {} onRejected函数: 失败的回调函数 (reason) => {} 说明: then()的语法糖, 相当于: then(undefined, onRejected)
Promise.resolve方法: (value) => {} value: 成功的数据或promise对象说明: 返回一个成功/失败的promise对象
Promise.reject方法: (reason) => {} reason: 失败的原因说明: 返回一个失败的promise对象
Promise.all方法: (promises) => {} promises: 包含n个promise的数组说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
Promise.race方法: (promises) => {} promises: 包含n个promise的数组说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

 new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("成功的数据");
          reject("失败的数据");
        }, 1000);
      })
        .then((value) => {
          console.log("onResolved()1", value);
        })
        .catch((reason) => {
          console.log("onRejected()1", reason);
        }); // 产生一个成功值为1的promise对象
        const p1 = new Promise((resolve, reject) => {    setTimeout(() => {        resolve(1)    }, 100);})
        const p2 = Promise.resolve(2)
        const p3 = Promise.reject(3)
        // p1.then(value => { console.log(value) })
        // p2.then(value => { console.log(value) })
        // p3.catch(reason => { console.log(reason) })
        // const pAll = Promise.all([p1, p2, p3])
        const pAll = Promise.all([p1, p2])
        pAll.then(
        values =>{  
        	console.log('all onResolved()', values)
        },
        reason => {        
        	console.log('all onRejected()', reason)    	
        })
        const pRace = Promise.race([p1, p2, p3])
        pRace.then(    
        value => {        
       		console.log('race onResolved()', value)    
        },    
        reason => {        
        	console.log('race onRejected()', reason)    
        })

如何改变promise的状态?

(1)resolve(value): 如果当前是pending就会变为resolved
(2)reject(reason): 如果当前是pending就会变为rejected
(3)抛出异常: 如果当前是pending就会变为rejected

let p = new Promise((resolve, reject) => {    
resolve('Promise状态会被标记为resolved')  
// reject('Promise状态会被标记为rejected')   
throw new Error('Promise状态会被标记为rejected')});

一个promise指定多个成功/失败回调函数, 都会调用吗?

当promise改变为对应状态时都会调用

let p = new Promise((resolve, reject) => {    
throw 3;});// 两个then都会进行
p.then(    
value => {        
	console.log('value1', value)     
},    
	reason => {        
console.log('reason1', reason)// reason1 3                                                                            })
p.then(    
value => {        
  	console.log('value2', value)    
},    
reason => {        
  	console.log('reason2', reason)  // reason2 3                                                                         })

promise如何串连多个操作任务?

promise的then()返回一个新的promise, 可以开成then()的链式调用
通过then的链式调用串连多个同步/异步任务

new Promise((resolve, reject) => {    
	setTimeout(() => {        
		console.log("执行任务1(异步)")        
		resolve(1)
	}, 1000);
})
.then(    
	value => {        
		console.log('任务1的结果: ', value)        
		console.log('执行任务2(同步)')        
		return 2    
}).then(    
	value => {        
		console.log('任务2的结果:', value)        
		return new Promise((resolve, reject) => {            
// 启动任务3(异步)           
 			setTimeout(() => {                
 				console.log('执行任务3(异步))')                
 				resolve(3)            
 			}, 1000);        
		 })    
 })
 .then(    
	 value => {       
 	console.log('任务3的结果: ', value)    
 })
//执行任务1(异步)
//任务1的结果:  1
//执行任务2(同步)
//任务2的结果: 2
//执行任务3(异步))
//任务3的结果:  3

标签：console,log,value,学习,reason,Promise,笔记,promise
来源： https://blog.csdn.net/aflylong/article/details/119426165