一、Promise是一种异步编程的解决方案,用来解决异步回调地狱的问题(俗称套娃),它保存着未来将要结束的事件。
二、Promise它有三种状态进行中,已成功,已失败,只有异步返回的结果才知道当前是哪一种状态。 一旦状态改变就不会在改变了,Promise状态改变只有两种可能,从进行中到已成功,出进行中到已失败。
三、Promise什么时候使用,有异步操作的时候都可以使用,根据需求。 比如 封装ajax请求,比如做一个抽奖优惠券的功能。
四、基本用法,如果异步操作成功就调用resolve,如果失败就调用reject。 然后通过then方法调用,then方法里面接收2个回调函数,一个是成功时,一个失败时间。 或者用then 和 catch
注意:new Promise 这个构造函数里面是立即执行函数。
var p1 = new Promise((resolve,reject)=>{ resolve("ok") //reject("失败") }) p1.then((el)=>{ console.log(el) },(err)=>{ console.log(err) })
五、Promise封装JQ ajax (简单版)
function ajax(url){ return new Promise((resolve,reject)=>{ $.ajax({ url:url, type:"get", success:function(data){ resolve(data.data) }, error(error){ reject(error); } }) }) } ajax(URLs) .then((el)=>{ console.log(el) }) .catch((err)=>{ console.log(err) })
六、封装一个抽奖功能,每次点击时生成随机数并且乘100取整。 通过判断来进行返回
var btn = document.getElementById("btn") btn.addEventListener('click',function(){ const pp = new Promise((resolve,reject)=>{ var n = parseInt(Math.random()*100) if(n<=30){ resolve(n) }else{ reject(n) } }) pp.then((el)=>{ alert("中奖了,号码是"+el) }).catch((err)=>{ alert("没有中奖,号码是"+err) }) })
七、Promise 多个异步任务
Promise.all 并发多个异步任务,全部成功了才返回then
Promise.race 并发多个任务,有一个异步任务完成就返回then,赛跑
var a1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log("我是第一个A1") resolve('okA1') },2000) }) var a2 = new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log("我是第二个A2") resolve('OKA2') },5000) }) var a3 = new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log("我是第三个A3") resolve('okA3') },1000) }) //并发处理多个异步任务,所有的任务完成了才可以得到结果。或者有一项是 reject就直接返回 catch Promise.all([a1,a2]).then((el)=>{ console.log(el) }).catch((err)=>{ console.log(err) }) //并发处理多个异步任务,只要完成了一个任务就可以得到结果 Promise.race([a3,a2,a1]).then(el=>{ console.log(el+"我是race") })
以上就是工作中继承用的到的promise的一些操作