promise的使用

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要下一轮才能执行，承诺的结果需要时间嘛。