es6-promise

promise是什么

Promise可以理解为一个承诺，如果A调用B，B返回一个承诺给A，然后A就可以在写计划的时候这么写，当B返回结果的时候，A就执行方案1，如果B没有返回A要的结果，A就执行方案2。这样一来，所有的潜在风险就都在A的可控范围之内了。
promise是es6解决异步编程的一种方案
通常使用的promise的有以下方法:
1、promise的构造函数
2、promise的构造函数的原型上边的方法 then catch
3、promise的静态方法 Promise.all Promise.resolve
每一个promise对象都会有三个状态 pending resolve reject 状态一旦改变就不会在变回来

promise的构造函数

新建一个promise 的时候 参数为为一个函数 函数为两个参数（resolve,reject）
这两个参数的具体内容在promise实例上边的then 和catch里边定义着

 const imgs=[
          "22.jpg",
          "111.jpg",
    ]
    var promise=new Promise(function (resolve,reject) {
        const img=new Image();
        img.src=imgs[0];
        img.onload=function () {
            resolve(this)
        }
        img.onerror=function () {
            reject(new Error("加载失败"))
        }
    })
    promise.then(function (img) {
        console.log("加载完成")
        document.body.appendChild(img)
    }).catch(function (error) {   //捕获异常
        console.log(error)
    })

Promise的静态方法 Promise.all方法

会将多个promise组实例对象生成一个新的 promise
当所有的Promise组中的实例的状态都变成resolved Promise.all的状态才会变成resolved 此时返回一个数组 传递给then中的resolve函数
promise组中的实例只要有一个rejected Promise.all的状态就会变成rejected 此时第一个被rejected的实例返回值 会传递给catch的函数

使用Promise的静态方法all来实现 只有当一组图片都加载完之后才向页面中插入 有一个没有加载成功就会 报错

 const imgs=[
          "22.jpg",
          "111.jpg",
    ]
    function loadImg(url) {
        var promise=new Promise(function (resolve,reject) {
            const img=new Image();
            img.src=url;
            img.onload=function () {
                resolve(this)
            }
            img.onerror=function () {
                reject(new Error("加载失败"))
            }
        })
        return promise;
    }
    Promise.all([loadImg(imgs[0]),loadImg(imgs[1])]).then(function (datas) {
          datas.forEach(function (t) {
              document.body.appendChild(t)
          })
    }).catch(function (error) {
        console.log(error)
    })

Promise的静态方法 Promise.resolve方法

将一个对象转化为promise对象
有以下几种使用方法：
1、接受promise的实例对象

 Promise.resolve(loadImg(imgs[0])).then(function (img) {
        document.body.appendChild(img)
    })

和下面的代码实现的功能是相同的

loadImg(imgs[0]).then(function (img) {
      document.body.appendChild(img)
  })

2、接受then-able对象

   Promise.resolve({
       then(resolve,reject){
            var img=new Image();
            img.src=imgs[0];
            img.onload=function () {
                resolve(this);
            }
            img.onerror=function () {
                reject();
            }
       }
   }).then(function (img) {
       document.body.appendChild(img)
   })

3、Promise.resolve接受普通的数据类型
返回一个状态为resolved的promise对象 而且接受

  Promise.resolve("ssasa").then(function (mess) {
       console.log(mess)   //ssasa
   })