promise是什么及其用法

Posted 2021-06-08 syf976561581

首先说一下promise是什么:

     是异步编程的一种解决方案。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息 可以解决回调地狱（回调函数嵌套回调函数）,回调函数(函数的参数是另外一个函数)

js中的异步操作有哪些?
(1)ajax请求

var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){}
xhr.addEventListener('readystatechange',function(){})

(2)浏览器事件

ele.addEventListener('click',function(){})

(3)定时器

setTime(function(){
},1000);

然后写一个案例吧

let p = new Promise(function(resolve,reject){
	//里面通常写异步操作
	setTimeout(function(){
		resolve(‘哈哈’);  //相当于调用函数
	},2000)
		
})
使用then方法配合使用
p.then(function(data){  //相当于声明函数
	状态成功时执行的函数
	console.log(data)   //2秒后出现哈哈
	可以在这里面处理异步操作的结果
},function(){
	状态失败时候执行的函数
})

好处是等promise里面，的异步操作执行完成后，在会执行里面的函数调用，可以在 then方法里面处理异步操作的结果

promise有三个状态:

pending 进行中，当异步操作执行中

fulfilled 已成功 当异步状态执行完成后，同时外面调用了then执行了里面的resolve

rejected 已失败 reject()执行了

最后放上promise解决回调地狱的方法(定时器)

 
    function fn1(){
   return new Promise((resolve,reject)=>{
      setTimeout(()=>{
         console.log('fn1')
         resolve()
      },1000)
   })
}

function fn2(){
   return new Promise((resolve,reject)=>{
    setTimeout(()=>{
         console.log('fn2')
         resolve()
      },1000)
   })
}

function fn3(){
   return new Promise((resolve,reject)=>{
    setTimeout(()=>{
         console.log('fn3')
         resolve()
      },1000)
   })
}

function onerror(){
   console.log('error')
}

fn1().then(fn2).then(fn3).catch(onerror)

    </script>