Promise

Promise三种状态：pendng(挂起)、fulfilled(成功)、rejected（出错）

1. 当异步任务执行过程中
   • 整个new Promise()对象处于pending(挂起)状态
2. 当异步任务成功执行完
   • 调用成功的开关函数(resolve())时
   • 整个new Promise()对象切换为fulfilled(成功)状态；
   • new Promise()会自动调用.then()执行下一项任务
3. 当异步任务执行出错
   • 调用失败的开关(reject())函数时
   • 整个new Promise()对象切换为rejected(出错)状态
   • new Promise()会自动调用.catch()执行错误处理代码

基础用法

    function getImage(src) {
      return new Promise((res, rej) => {
        res(src) // 成功回调
      })
    }
    getImage('img/a.jpg').then(function (img) {
        console.log(img)  //img/a.jpg
        return getImage('img/b.jpg') 
      }).then(res => console.log(res)) //img/a.jpg
      .catch(res => console.log(res))

promise.all()

all 并列执行！是几个异步全部完成后，执行的结果！结果是统一返回第一个参数的数组。

    Promise.all([getImage('img/a.jpg'),getImage('img/b.jpg'),getImage('img/c.jpg')])
    .then(function(list){  //  这个list 数组就promise 成功回调返回的函数
	console.log(list)  //[img/a.jpg，img/b.jpg，img/c.jpg]
})

promise.race()

race() 并列执行，谁先执行完就输出谁，别的就不管了！

    Promise.race([getImage('img/a.jpg'),getImage('img/b.jpg'),getImage('img/c.jpg')])
    .then(function(list){  //  这个list 数组就promise 成功回调返回的函数
	console.log(list)  //  img/a.jpg
})

async await 使用

function loadImg(src) {
      var promise = new Promise((res, rej) => {
        res(src)
      })
      return promise
}
const load = async function () {
      const result1 = await loadImg("img/c.jpg")
      console.log(result1) //img/c.jpg
      const result2 = await loadImg("img/d.jpg")
      console.log(result2) //img/d.jpg
}
    load();