任务队列

Promise 的作用

Promise 就是为了解决“回调地狱”问题的，它可以将异步操作的处理变得很优雅。回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象 Promise 可以支持多个并发的请求，获取并发请求中的数据这个 Promise 可以解决异步的问题，本身不能说 Promise 是异步的。

Promise 状态：pending - [待定]初始状态、fulfilled - [实现]操作成功、rejected - [被否决]操作失败

Promise 会根据状态来确定执行哪个方法

Promise 实例化时状态默认为 pending 的，如异步状态异常rejected，反之fulfilled

注意：状态转化是单向的，不可逆转，已经确定的状态（fulfilled/rejected）无法转回初始状态（pending），而且只能是从 pending 到 fulfilled 或者 rejected

Promise 的基本用法

{
  // 基本定义
  let ajax = function (callback) {
    console.log('执行') // 执行
    setTimeout(function () {
      callback && callback.call()
    }, 1000)
  }
  ajax(function () {
    console.log('timeout1') // timeout1
  })
}

{
  let ajax = function () {
    console.log('执行2')
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve()
      }, 1000)
    })
  }
  ajax().then(function () {
    console.log('Promise', 'timeout2') // Promise  timeout2
  })
}

{
  let ajax = function () {
    console.log('执行3') // 执行3
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve()
      }, 1000)
    })
  }
  ajax()
    .then(function () {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve()
        }, 2000)
      })
    })
    .then(function () {
      console.log('timeout3') // timeout3
    })
}

{
  let ajax = function (num) {
    console.log('执行4') // 执行4 执行4
    return new Promise(function (resolve, reject) {
      if (num > 5) {
        resolve()
      } else {
        throw new Error('出错了')
      }
    })
  }
  ajax(6)
    .then(function () {
      console.log('log', 6) // log 6
    })
    .catch(function (err) {
      console.log('catch', err)
    })

  ajax(3)
    .then(function () {
      console.log('log', 3)
    })
    .catch(function (err) {
      console.log('catch', err) // catch [Error: 出错了]
    })
}

Promise.all() 批量执行

Promise.all([a1, a2, a3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise 它接收一个数组作为参数 数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变

当所有的子Promise都完成，该Promise完成，返回值是全部值得数组

有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

{
  // 所有图片加载完在添加到页面
  function loadImg(src) {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img')
      img.src = src
      img.onload = function () {
        resolve(img)
      }
      img.onerror = function (err) {
        reject(err)
      }
    })
  }

  function showImgs(imgs) {
    imgs.forEach(function (img) {
      document.body.appendChild(img)
    })
  }

  Promise.all([
    loadImg('https://gitee.com/uploads/85/1803985_WuChenDi.png?1525674217'),
    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png'),
  ]).then(showImgs)
}

Promise.race()

类似于Promise.all() ，区别在于它有任意一个完成就算完成

{
  // 有一个图片加载完就添加到页面
  function loadImg(src) {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img')
      img.src = src
      img.onload = function () {
        resolve(img)
      }
      img.onerror = function (err) {
        reject(err)
      }
    })
  }

  function showImgs(img) {
    let p = document.createElement('p')
    p.appendChild(img)
    document.body.appendChild(p)
  }
  Promise.race([
    loadImg('https://gitee.com/uploads/85/1803985_WuChenDi.png?1525674217'),
    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png'),
  ]).then(showImgs)
}

promise问题

1. 一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来
2. 错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
3. Promise内部如何执行，监测起来很难，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）