promise是什么及其用法

首先说一下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>

你可能感兴趣的:(es6,Promise,javascript,es6,javascript,前端)