3-2 Promise

对于 ajax 网络请求就没有这么简单了，可能有多个网络请求是关联的，先执行某个请求返回结果后，第一个返回结果作为第二个请求的参数，调用第二个网络请求。如此，如果业务复杂，网络请求太多时，回调也很多，容易出现回调地狱。所以 Promise 出现了，专门解决异步回调地狱问题。

Promise 翻译成中文：承诺、保证。

通俗地讲，Promise 就像一个容器，里面存放着未来才会结束，返回结果的容器，返回的结果只需要在出口处接收就好了。从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息。

• resolve 表示当前操作成功得时候
• reject 表示当前操作失败得时候

let p = new Promise((resolve, reject)=>{
  setTimeout(() => {
    console.log('123')
    // resolve('成功')  // 成功
    // reject('失败')   // 失败
  }, 1000)
}).then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

let p = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
})
console.log(2)
// 1 2
p.then(res => {
  console.log(3)
})
// 1 2 3

• 在new Promise的时候会立即执行

a.json
{
  "a": "我是a"
}
b.json
{
  "b": "我是b"
}
c.json
{
  "c": "我是c"
}
function ajax(url, successCallback, failCallback){
  // 创建XmlHttpRequest对象
  if(window.XmlHttpRequest){
    xmlhttp = new XmlHttpRequest()
  } else {
    xmlhttp = new AxtiveXObject('Microsoft.XMLHTTP')
  }
  2.发送请求
  xmlhttp.open('GET', url, true)
  xmlhttp.send()
  3.服务端响应
  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState === 4 &&& xmlhttp.status === 200){
      var obj = JSON.parse(xmlhttp.responseText)
      successCallback && successCallback(obj)
    }else (xmlhttp.readyState === 4 &&& xmlhttp.status === 404){
      failCallback && failCallback(xmlhttp.statusText)
    }
  }
}
new Promise((resolve, reject)=>{
  ajax('a.json', res => {
    cosnole.log(res)
    resolve()
  })
}).then(res => {
  console.log('a成功')
  return new Promise((resolve, reject){
    ajax('b.json', res => {
      cosnole.log(res)
      resolve()
    })
  })
}).then(res => {
  console.log('b成功')
  resolve()
})

• .then() 是链式操作，

Promise 简写

function getPromise(url){
  return new Promise((resolve, reject) => {
    ajax(url, res =>{
      resolve(res)
    }, err => {
      reject(err)
    })
  })
}
getPromise('a.json')
  .then(res=>{
    console.log(res)
    return getPromise('b.json')
  }).then(res =>{
    console.log(res)
    return getPromise('c.json')
  }).then(res => {
    console.log(res)
  })

当找不到aaa.json 的时候就会走err，并且不影响下面的执行

getPromise('aaaa.json')
  .then(res=>{
    console.log(res)
    return getPromise('b.json')
  },err => {
    console.log(err) // not found
    return getPromise('b.json')
  }).then(res =>{
    console.log(res)
    return getPromise('c.json')
  }).then(res => {
    console.log(res)
  })