用promise封装ajax_第3部分-异步使用4：Promise(then/catch)

是什么，怎么做，如何实现

一、setTimeout函数依次执行的传统方法

function fn1() {
  setTimeout(()=>{
    console.log('fn1')
  }, 1000)
}

function fn2() {
  setTimeout(()=>{
    console.log('fn2')
  }, 1000)
}

function fn3() {
  setTimeout(()=>{
    console.log('fn3')
  }, 1000)
}

二、实现异步函数的顺序执行

对上面的代码进行封装，形成一种回调地域

<script>
function fn1(callback) {
  setTimeout(()=>{
    console.log('fn1')
    callback()
  }, 1000)
}

function fn2(callback) {
  setTimeout(()=>{
    console.log('fn2')
    callback()
  }, 1000)
}

function fn3() {
  setTimeout(()=>{
    console.log('fn3')
  }, 1000)
}


fn1(function(){
  fn2(function(){
    fn3()
  })
})

</script>

分别在每1s之后执行fn1,fn2,fn3，如图：

用promise改装之后，传统的依次执行也能一次性获取

注：直接采用return出一个new的函数，减少代码量

function fn1() {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      console.log('fn1...')
      resolve()
    }, 1000)    
  })
}

function fn2() {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      console.log('fn2...')
      resolve()
    }, 1000)    
  })
}

function fn3() {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      console.log('fn3...')
      resolve()
    }, 1000)    
  })
}

function onerror() {
  console.log('error')
}

fn1().then(fn2).then(fn3).catch(onerror)

三、（ES6）Promise

文档：阮一峰、MDN

1、promise是什么

promise实质是一个函数，通过这个函数创建一个promise对象。

这个promise对象里存储一个状态，可以随着内部执行而转化，是三者之一的状态，分别为：

等待态/初始态(Pending)、完成态(Fulfilled)、拒绝态(Rejected)

先设置这样一条预案：设置好等状态从 pending 变成 fulfilled 和 rejected 的预案（当成功后我们做什么，失败时我们做什么），具体如下：

当Promise 启动之后，当满足成功的条件时我们让状态从 pending 变成 fullfilled （执行 resolve）；当满足失败的条件，我们让状态从 pending 变成 rejected（执行 reject）

2、promise的使用

第1种方式：动态调用

promise链式调用：Promise.prototype.then / Promise.prototype.catch

//采用ajax异步回调的方式改装成promise

function getIp() {
  var promise = new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getIp', true) //设置一个ajax的参数
    xhr.onload = function(){
      var retJson = JSON.parse(xhr.responseText)  // {"ip":"58.100.211.137"} 数据到来对数据进行解析
      resolve(retJson.ip) //初始化-完成状态——变为成功状态
    }
    xhr.onerror = function(){
      reject('获取IP失败')  //初始化-拒绝状态——变为失败状态
    }
    xhr.send()
  })
  return promise
}

function getCityFromIp(ip) {
  var promise = new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getCityFromIp?ip='+ip, true)
    xhr.onload = function(){
      var retJson = JSON.parse(xhr.responseText)  // {"city": "hangzhou","ip": "23.45.12.34"}
      resolve(retJson.city)
    }
    xhr.onerror = function(){
      reject('获取city失败')
    }
    xhr.send()
  })
  return promise
}
function getWeatherFromCity(city) {
  var promise = new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getWeatherFromCity?city='+city, true)
    xhr.onload = function(){
      var retJson = JSON.parse(xhr.responseText)   //{"weather": "晴天","city": "beijing"}
      resolve(retJson)
    }
    xhr.onerror = function(){
      reject('获取天气失败')
    }
    xhr.send()
  })
  return promise
}

//getIP获取IP——IP获取城市——城市获取天气
getIp().then(function(ip){
  return getCityFromIp(ip) //得到ip
}).then(function(city){
  return getWeatherFromCity(city)  //得到城市
}).then(function(data){
  console.log(data)   //得到具体的城市其他状况（如天气、人口数等等）
}).catch(function(e){
  console.log('出现了错误', e)
})

执行结果如图：

面向对象时，我们new一个构造函数，就会创建一个对象(实例）

当我们调用getIP时，我们会得到当时创建的这个promise对象

启动promise时，就预设resolve和reject的方案，在then函数中进行预案的配置

假如，一旦在promise启动resolve的方案，那么在then函数中就执行对应的成功预案。同时，将resolve的参数放在then对应成功预案中进行执行获取；如果是失败状态就会执行reject方案，相对应会执行then里面的catch(相对应会有失败的参数)

第2种方式：promise的静态方式

（1）promise.all

all, 语义化理解，当全部对象执行完成状态后再进行结果的输出

function getCityFromIp(ip) {
  var promise = new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getCityFromIp?ip='+ip, true)
    xhr.onload = function(){
      var retJson = JSON.parse(xhr.responseText)  // {"city": "hangzhou","ip": "23.45.12.34"}
      resolve(retJson)
    }
    xhr.onerror = function(){
      reject('获取city失败')
    }
    xhr.send()
  })
  return promise
}

//以下对应的是三个promise对象
var p1 = getCityFromIp('10.10.10.1')
var p2 = getCityFromIp('10.10.10.2')
var p3 = getCityFromIp('10.10.10.3')

//Promise.all, 当所有的 Promise 对象都完成后再执行
Promise.all([p1, p2, p3]).then(data=>{
  console.log(data)
})

如图：

可以看到发3个请求，同时获取数据，获得一个拼装好的数组，可以处理多个功能请求。

（2）promise.race

race, 从语义化的角度来说，具有“竞赛”的意味。即所请求的数据谁先获取，那输出结果就是谁

function getCityFromIp(ip) {
  var promise = new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://easy-mock.com/mock/5ac2f80c3d211137b3f2843a/promise/getCityFromIp?ip='+ip, true)
    xhr.onload = function(){
      var retJson = JSON.parse(xhr.responseText)  // {"city": "hangzhou","ip": "23.45.12.34"}
      resolve(retJson)
    }
    xhr.onerror = function(){
      reject('获取city失败')
    }
    setTimeout(()=>{
      xhr.send()
    }, Math.random()*1000)

  })
  return promise
}

var p1 = getCityFromIp('10.10.10.1')
var p2 = getCityFromIp('10.10.10.2')
var p3 = getCityFromIp('10.10.10.3')

//Promise.all, 当所有的 Promise 对象都完成后再执行
Promise.race([p1, p2, p3]).then(data=>{
  console.log(data)
})

执行结果如图：