1、promise是用来干什么的?
- 用来处理回调,避免回调地狱
- 用来更好地处理异步行为
- 坏的例子:AJAX多级嵌套
2、用promise写jQuery的AJAX
let promise = $.ajax({ //这是一个异步的过程,发送请求需要时间,在这里做了一个承诺
url: './xxx.json',
method: 'get'
})
promise.then(function(){ //承诺成功时做什么,失败时做什么
console.log('成功了')
},function(){
console.log('失败了')
})
上面的代码可以简写为:
$.get('./xxx.json').then(function(){
console.log('成功了')
},function(){
console.log('失败了')
})
这样就省去了很多代码,即使是用AJAX多级嵌套,也会很看很多:
$.get('./xxx.json').then(function(response){
$.get('./yyy.json?id=' + data.id).then(function(){
console.log('成功')
},onError)
},onError)
function onError(){
console.log('失败了')
}
3、理解promise的几个demo
之前的用jQuery使用的promise本身被jQuery改写和封装过,专门用来发请求的。现在再写一个关于promise更加宽泛的例子。
第一个demo:
function gumble(call){
setTimeout(function(){
console.log('开始')
var number = Math.random()
if(number > 0.5){
call('大')
return '大'
}else{
call('小')
return '小'
}
},1000)
}
var result = gumble(function call(data){ console.log(data) })
注意理解这个demo里回调,起了一个钩子的作用
接下来用promise来改写上面的demo:
这是重点,要背下来
function getBig(){
return new Promise(function(resolve,reject){ //new Promise接收一个函数,参数是resolve,reject
setTimeout(function(){
console.log('开始')
var number = Math.random()
if(number > 0.5){
resolve('大') //成功时候的勾子,不用再像之前那样返回什么了
}else{
reject('小') //失败时候的钩子
}
},1000)
})
}
//下面为上面promise完了以后对应的两种‘后果’
getBig().then(function(data){ //成功时候的后果,对应resolve()钩子,then不要忘了
console.log(data)
},function(data){ //失败时候的后果,对应reject()钩子
console.log(data)
})
上面是通过函数,不通过函数的promise:
var a = new Promise(function(resolve,reject){
setTimeout(function(){
var number = Math.random()
if(number > 0.5){
resolve('大')
}else{
reject('小')
}
},1000)
})
a.then(function(data){
console.log(data)
},function(data){
console.log(data)
})
4、面试题:promise的执行顺序
console.log(1)
function getBig(){
console.log(2)
return new Promise(function(resolve,reject){
console.log(3)
setTimeout(function(){
console.log(4)
console.log('开始')
var number = Math.random()
if(number > 0.5){
resolve('大')
}else{
reject('小')
}
},1000)
})
}
console.log(5)
let aPromise = getBig()
console.log(6)
aPromise.then(function(data){
console.log(7)
console.log(data)
},function(data){
console.log(7)
console.log(data)
})
顺序为:1 5 2 3 6 4 7
再来一题:
var a = new Promise(function(resolve,reject){
console.log(1)
})
console.log(2)
顺序为: 1 2
记住,promise承诺本身会立即执行。
var a = new Promise(function(resolve,reject){
resolve()
console.log(1)
})
a.then(function(){
console.log(2)
})
console.log(3)
顺序为: 1 3 2
注意:promise承诺会立即执行,但是承诺的后果then要下一轮才能执行,承诺的结果需要时间嘛。