在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 {
console.log()
//执行后续处理
},reason => {
console.log(reason)
//提示错误信息
})