Promise

概念

1、Promise是一种异步编程解决方案
2、将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
3、Promise对象提供了统一的接口，使得控制异步操作更加容易

Promise的三种状态

pending（进行中）
fulfilled（已成功）
rejected（以失败）
只有异步操作的结果，可以决定是当前是哪一种状态，其他任何操作都无法改变这个状态。
一旦状态改变，就不会在变。
Promise的状态改变只可能有两种情况
从pending变为fulfilled
从pending变为rejected
在当前文件中添加img文件夹，里面存放一个1.jpg文件

  let loadImg = (url,success,fail)=>{
    let img = new Image();
    img.onload = ()=>{
        success();
    };
    img.onerror = ()=>{
        fail();
    };
    img.src = url;
}
loadImg('img/i.jpg',()=>{
    console.log('成功')
},()=>{
    console.log('失败')
})

这是一个简单的异步请求。咱们把它改为Promise

     let getImagePromise = (url)=>{
          let promise = new Promise((resolve,reject)=>{ //Promise必须带一个方法，这个方法接受两个参数resolve成功回调，reject失败回调
                  let img = new Image();
                  img.onload = ()=>{
                      resolve();
                  };
                  img.onerror = ()=>{
                      reject();
                  };
                  img.src = url;
          });
          return promise;
      }
      let promise = getImagePromise('img/1.jpg');
      console.log(promise);   //Promise {<pending>}
      promise.then(()=>{
          console.log('成功');
          console.log(promise);  //Promise {<resolved>: undefined}
      },()=>{
          console.log('失败')
      })

Promise对象的方法

then

resolved,rejected的状态回调
then方法返回的是一个新的Promise实例

catch（回调）

如果异步操作抛出错误状态就会变成rejected,当then中没有制定rejected状态的时候，会执行catch方法指定的回调函数
如果运行中抛出错误，也会被catch方法捕获

    promise.then(()=>{
          console.log('成功');
          throw new Error('抛出错误');//主动抛出错误，catch也会捕获到
      }).catch((err)=>{   //当then方法没有指定reject方法时会执行then
          console.log('错误信息--',err)
      })

finally

不管Promise对象结果是什么都会执行
finally回调函数不接收任何参数

   promise.then(()=>{
          console.log('成功');
      },()=>{
          console.log('失败')
      }).catch((err)=>{
          console.log('错误信息--',err)
      }).finally(()=>{
          console.log('finally')
      })

Promise的静态方法

Promise.resolve()

如果参数是Promise的实例，不做修改直接返回这个实例对象
如果参数是一个具有then方法的对象，对先转换成Promise对象，然后立即执行该对象的then方法
如果参数不是具有then方法的对象，或者不是一个对象，返回一个新的Promise对象状态为resolved
不带任何对象，就返回状态为resolved的Promise对象

     let p = Promise.resolve()
    // console.log(p)  //返回一个状态为resolved的Promise对象
    let p2 = Promise.resolve(p)
    //console.log(p2 == p)   //  返回true  正面刚p跟p2是一个对象
    let thenObj = {
        then:()=>{
            console.log('then....')
        }
    }
    let p3 = Promise.resolve(thenObj) //会立即执行对象中的then方法
    //console.log(p3)
    let p4 = Promise.resolve('p4');
    console.log(p4);    //传入一个字符串，起到描述作用，没有实际意思

Promise.reject()

返回一个新的Promise实例。该实例的状态为rejected

Promise.all()

接收一个Promise实例的数组或者具有Iterator接口的对象;
如果元素不是Promise对象,则使用Promise.resolve转成Promise对象;
如果全部成功,状态变成resolved,返回值将组成一个数组传给回调;
只要有一个失败,状态就变为rejected,返回值将直接传递给回调;
all()的返回值也是新的Promise对象;

  let getImagePromise = (url)=>{
    let promise = new Promise((resolve,reject)=>{
            let img = new Image();
            img.onload = ()=>{
                resolve(url);
            };
            img.onerror = ()=>{
                reject(url);
            };
            img.src = url;
    });
    return promise;
}
let allPromise = ['./img/1.jpg','./img/1.jpg','./img/1.jpg','./img/1.jpg'].map((url)=>{
    return getImagePromise(url)
})
console.log(allPromise);
let promises = Promise.all(allPromise);
promises.then((url)=>{
    console.log('成功',url)；  //成功会返回所有的返回值
},()=>{
    console.log('失败',url)；//失败会返回第一个失败的返回值
  })

Promise.race()

同上,区别是只要有一个Promise实例率先发生变化(无论状态变成resolved还是rejected)都将触发then中的回调,返回值将传递给回调

es6总结完