在Javascript的异步编程中,经常可见promise对象,它是在EAMCScript6(2015)中才出现的新元素,也是异步编程中的一种解决方案或者规范。
它的出现,主要是为了避免回调地狱,也就是多层调用嵌套问题,使得异步编程代码更加简洁而易于阅读。
const p=new Promise((resole,reject)=>{ //执行任务...... //根据任务执行情况,成功则执行resole函数,失败则执行reject函数 }).then((value)=>( //执行了resolve函数则执行 ),(reason)=>{ //执行了reject函数则执行 }).catch((error)=>{ //捕捉错误并进行处理 }).finally(()=>{ //最后的处理 })
1、promise实例有三种状态,分别是pending(准备中)、fulfilled(完成/成功)、rejected(失败/拒绝)。
2、promise只有执行了resolve函数或者reject函数,promise状态才可以改变,后续的then方法才可以继续执行。
3、promise中对应关系
resolve函数 => (value)=>{} => (value)=>{}
reject函数 => (reason)=>{} => (reason)=>{}
4、promise的状态只能改变一次
5、promise支持链式操作
const p=new Promise((resolve,reject)=>{ console.log("执行任务") resolve("成功的结果") }).then((value)=>{ console.log("p1.then:"+value) return "OK1" },(reason)=>{ console.log(reason) return reason }).then((value)=>{ console.log("p2.then:"+value) return "OK2" },(reason)=>{ console.log("错误提示:"+reason) return reason })
6、为了代码清晰,最好使用catch进行错误捕捉,去掉(reason)=>{}部分。
比如,上面的代码可以改写:
const p=new Promise((resolve,reject)=>{ console.log("执行任务") resolve("成功的结果") }).then((value)=>{ console.log("p1.then:"+value) return "OK1" }).then((value)=>{ console.log("p2.then:"+value) return "OK2" }).catch((error)=>{ console.log("错误提示:"+error) }) console.log(p)
7、执行reject函数、执行体代码出错、抛出错误异常都会被catch捕捉到。
8、Promise.all方法:(promises) => {},返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败则直接失败。
let p1 = new Promise((resolve, reject) => { resolve('执行成功1') }) let p2 = new Promise((resolve, reject) => { resolve('执行成功2') }) let p3 = new Promise((resolve, reject) => { reject('执行失败') }) Promise.all([p1, p2]).then((value) => { console.log(value) }).catch((error) => { console.log(error) }) Promise.all([p1,p2,p3]).then((value) => { console.log(value) }).catch((error) => { console.log(error) })
输出结果:
9、Promise.race方法:(promises) => {},返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态。
10、使用promise封装使用XMLHttpRequest对象来完成Ajax请求。
function promiseAjax(url,para){ const p=new Promise((resolve,reject) => { let xhr = newXMLHttpRequest() xhr.setRequestHeader('content-type','application/x-www-form-urlencoded') xhr.onreadystatechange = function(){ if(xhr.readystate===4){ if(xhr.status>=200 && xhr.status<300){ resolve(xhr.responseText) }else{ reject(xhr.status) } } xhr.open('Post',url,true); xhr.send(para) }) return p }
调用:
promiseAjax("http://127.0.0.1/ES6_Base/ASD.php","Name=ASD&Password=123").then(value => { console.log() //执行后续处理 },reason => { console.log(reason) //提示错误信息 })