理解 Promise 的原理

152 阅读2分钟

Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值
Promise 对象是JavaScript的异步操作解决方案,为异步操作提供统一接口
它起到代理作用,充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口

Promise通过自身的状态来控制异步操作

pending 异步操作未成功
fulfilled 异步操做成功
rejected 异步操作失败
异步操作成功:Promise传回一个值value;异步操作失败:Promise抛出一个错误error

Promise 的想法是,所有异步任务都返回一个Promise实例,Promise实例有一个then方法,用来指定下一步的回调函数

function fn(){
  return new Promise((resovle, reject) =>{
    if('异步操作成功'){
      resolve('成功');
    }else{                    //异步操作失败
      reject(new Error());
    }
  })
}
fn().then(success, fail).then(success2, fail2)

Promise是一个实例对象

Promise由构造函数创建,接收一个函数作为参数,这个函数的参数有2个resolve和reject
resolve:将Promise实例的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果作为参数传递出去
reject:将Promise实例的状态从“未完成”变为“失败”,在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去

Promise.prototype.then(success1,fail1)

then方法用来添加成功和失败回调函数,一旦Promise的状态改变,就调用相应的回调函数
第一个是异步操作成功时的回调函数
第二个是异步操作失败时的回调函数(该参数可以省略)
then可以链式操作,进行多个回调函数

示例:使用Promise加载图片

var preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    var image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

Promise.all(iterable)

Promise.all()返回一个Promise实例,可以处理多个Promise
参数内所有的promise都完成或参数中不包含promise时,回调完成(resolve)
参数中promise有一个失败,此实例回调失败(reject),失败的原因是第一个失败promise的结果

Promise.all([promise1, promise2]).then(success1,fail1)
promise1和promise2都成功才会调用success1,并返回所有promise返回值的数组作为成功回调的返回值
哪个promise失败,则会触发哪个promise的失败作为它的失败错误信息

Promise.race(iterable)

Promise.race()返回一个Promise,它将与第一个传递的promise相同的完成方式被完成
它可以是完成或是失败,取决于最先完成或失败的Promise

Promise.race([promise1, promise2]).then(success1,fail1)
promise1和promise2只要有一个完成或失败就会调用success1或fail1
谁第一个成功或失败,就会认为race的成功或失败
谁成功或失败父promise就调用谁的成功返回值或失败详情作为参数调用父promise,并返回该promise对象

详细资料点击:Promise MDN