背景说明
从同步与异步说起:
JavaScript 中具有同步和异步的概念,最常⻅的异步操作莫过 Ajax,Ajax 是前后端数据交互的桥
梁。
异步操作特点:
同步任务总是顺序执⾏的。与同步任务不同,异步任务执⾏结果与书写顺序⽆关,例如,定时器结束时
间取决于延迟时间;Ajax 的响应成功时间取决于数据量与⽹速。
这就导致,如果要对异步操作的结果进⾏处理,就必须使⽤回调函数(
callback)。
问题出现:
思考:如果有多个请求,每个请求都依赖与前⼀个请求的结果,这时会发⽣什么呢?
这种层层嵌套的回调写法称为“回调地狱”
Promise 的作⽤:
Promise 是 ES2015(
ES6)中标准化的功能,⽤于 给异步编程提供⼀种书写更合理,功能更强的统
⼀的解决⽅案。
Promise 含义为承诺,是⼀个 ES6 提供的类型,使⽤时需要创建⼀个实例对象,指代我们要进⾏的⼀个操作(异步) 创建完毕, 这时 promise 处于⼀个“待定状态”, 最终结果可能为“成功状态”或“失败状态”。
举例增强理解:明天发⼯资,我要给我媳妇买个苹果,如果发⼯资了,就买⼀⽄,如果没发就算了,因为没有私房钱。
特点:结果明确后⽆法更改:例如,发⼯资后买了⼀⽄苹果,买了就是买了,不可能过⼀会⼉⼜变成了没买,这不合逻辑。
回归操作:那么对应操作中,利于⼀个 Ajax 请求,当请求成功或失败时,可以通过相应的“状态”进⾏ 执⾏结果的判断,从⽽进⾏相应的处理。
⼩结:Promise 对象的操作就是通过状态进⾏控制,状态变化会⾃动触发对应的回调。
Promise 使⽤
创建实例⽤于存储异步操作
参数为函数,在创建实例时同步执⾏
函数有两个参数,都是函数,调⽤时可决定 promise 对象的状态
resolve(data) 传递成功时的结果
reject(err) 传递失败时的错误信息
注意,由于promise 对象的结果明确后⽆法更改,所以两个函数在逻辑中只能有⼀个被执⾏。
const promise = new Promise( function () {
resolve(100)
// reject(new Error('error message!'))
})
当 promise 对象的状态确定时,会触发对应的回调函数进⾏处理,我们需要通过 promise 对象的⽅法指定这些回调函数:
then() 成功时的处理函数
catch() 失败时的处理函数
1 const promise = new Promise( function ( resolve , reject ) {
2 resolve ( 100 )
3 // reject(new Error('error message!'))
4 })
5 // 也可以通过 new Promise().then().catch() ⽅式进⾏链式调⽤。
6 promise. then ( function ( value ) {
7 console. log ( ' 成功了,数据为: ' , value )
8 }). catch ( function ( error ) {
9 console. log ( ' 失败了,错误为: ' , error )
10 })