JS学习笔记 - Promise

一、概念

Promise对象

ECMAScript 6 中提供了Promise对象,用来传递异步操作的消息,它代表了一个异步操作的最终完成或者失败。

状态

Promise对象代表一个异步操作,具有以下三种状态:

状态含义
pending初始状态
fulfilled操作成功完成
rejected操作失败

状态不变性

一旦Promise对象的状态改变,就不会再改变。

只要Promise对象的状态从Pending变为Resolved或Rejected,状态就不会再改变了。

二、使用

使用Promise对象

Promise的构造函数接收一个函数作为参数,该函数具有两个参数:resolve,reject,分别表示异步操作执行成功(resolved)或失败(rejected)后的回调函数。

var example = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Resolved")
    },2000)
})
console.log("Promise对象创建后的操作")
example.then(value=>{
    console.log(value)
})
/* 输出内容
Promise对象创建后的操作
Resolved
*/

由示例代码可见,Promise对象执行的是异步操作,并不会阻塞程序继续运行。

链式操作- Promise.prototype.then()

Promise.prototype.then() 方法返回一个新的Promise对象,因此可以进行链式操作。

后一个回调函数会以前一个回调函数的返回值作为参数。

var example = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(1)
    },2000)
})
example.then(value=>{
    console.log(value)
    return value
}).then(value=>{
    value *= 2
    console.log(value)
    return value
}).then(value=>{
    value *= 2
    console.log()
})
/* 输出内容
1
2
4
*/

Reject处理

Promise.prototype.then() 方法可以传入两个回调函数作为参数,第一个回调函数为成功(Resolved)时调用的函数,第二个回调函数为失败(Rejected)时调用的函数。

//num将在两次运行中分别定义为10和3
var example = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        if(num > 5)
            resolve(num)
        else
            reject(num)
    })
})
example.then(value=>{
    console.log("Resolved ",num)
},reason=>{
    console.log("Rejected ",num)
})
/*
输出内容1:Resolved 10
输出内容2:Rejected 3
*/

语法糖 - Promise.prototype.catch()

Promise.prototype.catch() 方法是一个语法糖,用于指定发生错误时(rejected)的回调函数。

var example = new Promise((resolve,reject)=>{
    reject("Rejected")
})
example.then(value=>{
    console.log(value)
}, error=>{
    console.log(value)
})
/* 输出内容
Rejected
*/
example.then(value=>{
    console.log(value)
}).catch(error=>{
    console.log(error)
})
/* 输出内容
Rejected
*/

由示例可见,两种方法都可用于指定Promise的状态变为Rejected时的回调函数。

Promise.prototype.finally()

Promise.prototype.finally() 方法返回一个Promise,它为Promise指定了状态产生任意变化后执行的回调函数。

var example = new Promise((resolve,reject)=>{
    reject("Rejected")
})
example.catch(error=>{
    console.log(error)
}).finally(()=>{
    console.log("完成")
})
/* 输出内容
Rejected
完成
*/

无论Promise的状态变为fulfilled还是rejected,都会执行该方法定义的回调函数

Promise.all()

Promise.all() 方法用于将多个Promise实例包装成一个新的Promise实例。

Promise.all()方法的参数必须具有Iterator接口,且返回的每个成员都是Promise实例

Promise.all() 方法返回一个Promise实例,此实例返回的数组中的每个成员都是一个Promise实例

该方法包装的数组中的所有Promise实例的状态都变味fulfilled时,Promise.all返回一个结果数组

当Promise数组中的任意一个实例状态变为rejected时,Promise.all立刻返回最先变为rejected状态的Promise的值

var promise1 = new Promise((resolve,reject)=>{
    resolve("1成功")
})
var promise2 = new Promise((resolve,reject)=>{
    reject("2失败")
})
var promise3 = new Promise((resolve,reject)=>{
    resolve("3成功")
})
Promise.all([promise1,promise2,promise3]).then(value=>{
    console.log(value)
}).catch(err=>{
    console.log(err)
})

/* 输出内容
2失败
*/

Promise.race()

Promise.race() 方法与Promise.all() 方法类似,都是将多个Promise实例包装成一个新的Promise

该方法包装的Promise数组中,只要有一个Promise的状态变为fulfilled或rejected,这个Promise的状态就立刻变为率先改变状态的Promise的状态

var promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("1成功")
    },1000)
})
var promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("2成功")
    },800)
})
var promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		reject("3失败")
    },1200)
})
Promise.race([promise1,promise2,promise3]).then(value=>{
    console.log(value)
})

/* 输出内容
2成功
*/

Promise.any()

该方法与Promise.allPromise.race() 有相似之处,都接收一个Promise数组座位参数

但在某些方面,它和上述二者又不相同。Promise.any() 返回的是第一个状态变为fulfilled的Promise的值,如果一个都没有成功,则返回一个AggregateError类型的实例

var promise1 = new Promise((resolve,reject)=>{
    resolve("1成功")
})
var promise2 = new Promise((resolve,reject)=>{
    resolve("2成功")
})
var promise3 = new Promise((resolve,reject)=>{
    resolve("3成功")
})
Promise.any([promise1,promise2,promise3]).then(value=>{
    console.log(value)
})

/* 输出内容
1成功
*/

var promise1 = new Promise((resolve,reject)=>{
    reject("1失败")
})
var promise2 = new Promise((resolve,reject)=>{
    reject("2失败")
})
var promise3 = new Promise((resolve,reject)=>{
    reject("3失败")
})
Promise.any([promise1,promise2,promise3]).catch(err=>{
    console.log(err)
})

/* 输出内容
AggregateError: No Promise in Promise.any was resolved
*/

Promise.allSettled()

Promise.allSettled 方法接收一个Promise数组,当数组中的所有Promise的状态都变为fulfilled或rejected时,这个Promise返回一个对象数组,每个对象表示对应的Promise的结果

var promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("1成功")
    },1000)
})
var promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("2成功")
    },800)
})
var promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		reject("3失败")
    },1200)
})
Promise.allSettled([promise1,promise2,promise3]).then(value=>{
    console.log(value)
})

/* 输出内容
0: {status: "fulfilled", value: "1成功"}
1: {status: "fulfilled", value: "2成功"}
2: {status: "rejected", reason: "3失败"}
*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值