promise知识

头像
梓萱
    阅读 24 分钟

    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

    promise的特点：

    1. 对象的状态不会受到外界所影响，Promise对象代表一次异步操作，只会有三种状态Pending（进行中），Fulfilled（已成功），Rejected（失败）。只有异步操作的结果可以决定Promise对象的状态，任何其他操作都无法改变这个状态。
    2. Promise对象的状态变化只会有两种可能：（1）Pending变成Fulfilled（2）Pending变成Rejected。只要这两种情况任意一个发生，Promise的状态就会固定，不会再发生变化了。
    3. 如果状态已经发生的改变，再给给期添加回调函数，依然可以得到结果。这与event不同，事件一旦错过就没有了。
    4. 缺点： a. Promise一旦创建就会立即执行，无法中途取消。b. 如果不设置回调函数，Promise内部发生的错误，不会反应到外部。c. Pending状态时，无法得知当前进展到哪一状态。

    基本用法

    1. 创建一个Promise实例;
    var promise = new Promise(function (resolve, reject) {
  if(/*成功*/) {
    resolve(value);
  } else {
    reject(error);
  }
})

    Promise实例创建完毕，我们需要通过then方法分别指定Resolved和Rejected状态的回调函数。

    promise.then(function () {
  // success code
}, function () {
  // failure code
})

    then 方法可以接受两个参数，第一个参数对应成功的回调函数，第二个对应的是失败的回调函数，并且第二个参数的可选的，不一定需要传递。

    1. Promise新建以后就会立即执行。
    var promise = new Promise(function (resolve, reject) {
  resolve();
  console.log('promise')
})
promise.then(function () {
  console.log('resolved')
})
console.log('hi');
// 执行结果：
// promise
// hi
// resolved

    then 方法指定的回调函数，将在当前脚本所同步任务执行完成才会执行，所以resolved最后输出。

    Promise.prototype.then()

    Promise实例具有then方法，也就是then方法是定义在Promise的原型对象上的，他的作用就是添加状态改变时的回调函数。
    注意：then方法返回的是一新的Promise实例（不是原来的那个Promise实例）,因此可以链式调用。

    var getJSON = function (url) {
  var promise = new Promise(function (resolve, reject) {
    var client = new XMLHttpRequest();
    client.open('GET', url);
    client.onreadystatechange = handler;
    client.responseType = 'json';
    client.setRequestHeader('Accept', 'application/json');
    client.send();
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
  })
  return promise;
}
getJSON('/posts.json').then(function (json) {
  return json.post;
}).then(function(post){
  //post 是上一个回调函数传过来的
})

    上面的代码使用then方法，依次指定了两个回调函数，第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

    getJSON('/post/1.json').then(function(post){
  return getJSON('/post/2.json')
}).then(function(post){
    console.log('resloved')
}, function(err){
    console.log('rejected')
})

    上面的代码，第一个then方法返回了Promise对象，这时，第二个then指定的回调函数，要等到这个Promise对象状态改变时才会触发。

    Promise.prototype.catch()

    Promise.prototype.catch方法是.then(null, fn)的别名，用于指定发生错误的回调函数。

    getJSON('/post.json').then(function(){
  // code
}).catch(function(err){
  console.log(err)
})

    getJSON返回一个Promise对象，如果是成功状态就会走then里面设置的回调函数，如果失败了就会走catch设置的回调函数，如果then指定的回调函数里面出错了，也会被catch所捕获，调用catch设置的回调函数处理。

    p.then(function(){
  //code
}).catch(function(){
  //code
})
// 等同于
p.then(function(){
  // code
}).then(null, function(){
  //code
})
    // 第一种写法
var promise = new Promise(function(resolve, reject){
  try {
    throw new Error('test')
  } catch (e) {
    reject(e)
  }
})
promise.catch(function(err){
  console.log(err)
})
// 第二种写法
var promise = new Promise(function(resolve, reject){
  reject(new Error('test'))
})
promise.catch(function(error){
  console.log(error)
})

    上面两种写法是等价的，可以看出reject方法作用，等同于抛出错误。

    var promise = new Promise(function(resolve, reject){
  resolve('ok');
  throw new Error('test')
})
promise.then(function(value){
  console.log(value)
}).catch(function(err){
  console.log(err)
})
// ok

    Promise在resolve语句后面再抛出错误，是不会被catch捕获的，等于没有抛出。

    getJSON('/post/1.json').then(function(post){
  return getJSON('/post/2.json')
}).then(function(json2){
  // code
}).catch(function(e){
  console.log(e)
  // 捕获前面三个promise对象的错误
})

    Promise对象的错误具有“冒泡”的性质，会向后面一直传递，直到被捕获为止。

    //不推荐的写法
promise.then(function(data){
  //success
}, function(err){
  // failure
})
// 推荐写法
promise.then(function(data){
  //success
}).catch(function(err){
  console.log(err)
})

    第二种方法优于第一种写法，理由是第二种可以捕获前面then 里面的错误，语法页更贴近（try/catch）。

    var someAsyncThing = function() {
  return new Promise(function() {
    resolve(x + 2)
  })
}
someAsyncThing().then(function() {
  console.log('..')
})

    上面的代码中，someAsynicThing函数产生的Promise对象会报错，但是没有指定catch方法这个错误是不会被捕获的，也不会被传递到外层的。

    var promise = new Promise(function(resolve, reject) {
  resolve('ok');
  setTimeout(function(){
    throw new Error('test')
  }, 0)
})
promise.then(function(value) {
  console.log(value);
}).catch(function(err) {
  console.log(err);
})
// ok
// VM672:4 Uncaught Error: test

    Promise指定在下轮的事件循环里面在抛出一个错误，到那个时候Promise的运行已经结束，所以这个错误会在函数体外抛出，冒泡到最外层成为未捕获的错误。

    var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    // 将报错，x没有申明
    resolve(x + 2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
  return '123'
}).then(function(str){
  console.log('ok', str)
})
// err: ReferenceError: x is not defined
//    at <anonymous>:4:13
//    at Promise (<anonymous>)
//    at someAsyncthing (<anonymous>:2:10)
//    at <anonymous>:7:1
//ok 123

    catch方法返回的还是一个Promise对象，因此后面还是可以接着调用then方法。

    var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    resolve(2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
  return '123'
}).then(function(str){
  console.log('ok', str)
  // x 未定义会报错
  return x;
})
//ok 2
//ReferenceError: x is not defined
//    at <anonymous>:12:3
//    at <anonymous>

    上面代码，Promise里面没有错误，就会跳过catch的方法，直接执行下面的then方法，then里面在出错就与前面的catch无关了，错误也不会被捕获。

    var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    resolve(2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
// x 未定义
  return x
}).then(function(str){
  console.log('ok', str)
})
// ok 2

    catch里面出了错误，因为后面没有catch了，导致这个错误不会被捕获，也不会被传递到最外层。

    总结： 为了尽可能多的捕获到错误，应该将catch写在所有then的最后面，这样不仅可以捕获到promise的错误，也能捕获到前面then里面错误.

    Promise.all()

    Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

    var p = Promise.all([p1, p2, p3])

    Promise.all接受一个数组作为参数，p1，p2，p3都是Promise实例，如果不是，就会先调用Promise.resolve方法，将其转为Promise实例。（Promise.all的参数可以不一定是数组，但一定是要实现Iterator接口的，且返回的每个成员都是Promise实例）
    p的状态是由p1,p2,p3决定的：

    1. 只有p1,p2,p3的状态都变成fulfilled，p的状态就变成fulfilled，此时p1,p2,p3的返回组成一个数组，传递给p的回调函数。
    2. 只有p1,p2,p3中有一个的状态都变成rejected，p的状态就变成rejected，此时第一个变成rejected的实例的返回值，传递给p的回调函数。
    var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            resolve(t)
        },t)
    })
}
var p1 = a(); var p2 = a();
Promise.all([p1,p2]).then(([p1,p2])=>{console.log(123, p1,p2)})
// 562 
// 879 
// 123 879 562

    上面p1和p2是两个异步的操作，只有等到两个结果都返回了才会触发Promise.all的then的方法

    // 由于是随机数要多试几次
var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            if(t < 500){
                reject(new Error('<500'))
            }
            resolve(t)
        },t)
    })
}
// 如果出错，p1将不是a函数返回的Promise，而是catch返回的promise
var p1 = a().catch((err) => {console.log('err:', err)});
var p2 = a().catch((err) => {console.log('err:', err)});
Promise.all([p1,p2]).then(([p1,p2])=>{console.log(123, p1,p2)}).catch((err) => {console.log('all',err)})
//7 a 里面的输出
//err: Error: <500 p1 的catch的输出
//    at <anonymous>:7:12
// 687 a 里面的输出
//123 undefined 687 Promise.all的then输出

    上面p1和p2都有可能会Rejected，一旦Rejected就会被他们的catch所捕获，然后就会返回一个全新的Promise对象不再是原来的那个，全新的实例执行完catch以后也会变成Resolved， 导致Promise.all方法里面的两个实例都是Resolved，则会走Promise.all的then方法，而不会是catch方法。

    Promise.race()

    Promise.race方法同样是将多个Promise的实例，包装成一个新的Promise实例。

    var p = Promise.race([p1,p2,p3])

    上面代码，只要p1,p2,p3之中有一个实例率先改变了状态，p的状态就会跟着改变，那个率先改变的Promise实例的返回值，就传递给p的回调函数。
    他处理参数的方法的原则和Promise.all是一样的。

    var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            resolve(t)
        },t)
    })
}
var p1 = a()
var p2 = a()
Promise.race([p1,p2]).then(t =>{console.log(123, t)})
// 87 a 函数输出
// 123 87 Promise.race的then输出
// 591 a 函数输出

    Promise.resolve()

    有时需要将现有的对象转化成Promise对象，Promise.resolve方法就起到这个作用。

    var  jqPromise = Promise.resolve($.ajax('/1.json'))

    上面的代码将jQuery生成的deferred对象，转成一个新的Promise对象。

    Promise.resolve('foo')
// 等价于
new Promise(function(resolve, reject){
  resolve('foo')
})

    Promise.resolve方法的参数分为四种情况
    a. 参数是一个Promise实例
    如果参数是一个Promise实例，那么Promise.resolve将不做任何修改，原封不动的返回这个实例。
    b. 参数是一个thenable对象
    thenable对象是指具有then方法的对象，例如：

     // thenable 对象
 let thenable = {
   then: function(resolve, reject){
     resolve(42)
   }
 }
 let p1 = Promise.resolve(thenable);
 p1.then(function(value){
   console.log(value) // 42
 })

    thenable对象的then方法执行以后，对象p1的状态就会变成resolved，从而立即执行最后的那个then方法指定的函数，输出42
    c. 参数不是具有then方法的对象，或根本就不是对象
    如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved.

    var p = Promise.resolve('hello')
p.then(function(s){
  console.log(s)
})
// hello

    上面的代码生成一个新的Promise对象的实例p，由于字符串hello不属于异步操作（判断方法字符串不具有then方法），返回的Promise实例的状态从一生成就是Resolved，所以回调函数立即执行。Promise.resolve方法的参数，会同时传回给回调函数。
    d. 不带任何参数
    Promise.resolve方法允许调用时不带任何参数，直接返回一个Resolved状态的Promise对象。
    注意： 立即resolve的Promise对象，实在本轮事件循环的结束时，而不是在下一轮事件循环的开始时

    setTimeout(function(){
    console.log('setTimeout')
}, 0)
Promise.resolve().then(function(){
    console.log('Promise.resolve')
})
console.log('console.log()')
// console.log() 顺序执行
// Promise.resolve 本轮事件循环的尾部
// setTimeout 下轮事件循环的开始

    setTimeout(fn, 0)实在下一轮事件循环的开始的时候执行的，Promise.resolve()实在本轮事件循环的结束时执行，console.log()立即执行，所以最先输出。

    Promise.reject()

    跟Promise.resolve方法类似，生成相对的状态为Rejected的Promise实例。

    var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

    生成的p的状态为Rejected的，回调函数立马执行。
    注意： Promise.reject()方法的参数，会原封不动的作为reject的理由，比那成后续方法的参数，这一点与Promise.resolve方法不一致

    const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

    两个有用的附加方法

    ES6的Promise API提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在ES6之中、但很有用的方法。

    Done()

    Promise对象的回调链，无论是以then方法或者catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

    asyncFunc()
  .then()
  .then()
  .catch()
  .done()

    他的实现页很简单

    Promise.prototype.done = function (onFulfilled, onRejected) {
  this.then(onFulfilled, onRejected)
    .catch(function (reason) {
        // 抛出全局错误
        setTimeout(() => {throw reason}, 0)
    })
}

    done方法的使用，可以像then方法那样用，提供Fulfilled和Rejected状态的回调函数，也可以不提供任何参数。但不管怎样，done都会捕捉到任何可能出现的错误，并向全局抛出。

    finally()

    finally方法不管状态是成功还是失败，都会执行的的操作，他与done的最大的区别，是他接受一个回调函数作为参数，该函数不管怎样都必须执行。

    server.listen(0)
  .then(function () {
    // run test
  })
  .finally(server.stop);

    实现

    Promise.prototype.finally = function (callback) {
  let P = this.cunstructor;
  return this.then(function(value){
    P.resolve(callback()).then(function(){
      return value;
    })
  }, function(reason){
    P.reject(callback()).then(function(){
      throw reason;
    })
  })
}

    作者：Oldboyyyy
    链接：https://www.jianshu.com/p/058...
    来源：简书
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。> Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

    promise的特点：

    1. 对象的状态不会受到外界所影响，Promise对象代表一次异步操作，只会有三种状态Pending（进行中），Fulfilled（已成功），Rejected（失败）。只有异步操作的结果可以决定Promise对象的状态，任何其他操作都无法改变这个状态。
    2. Promise对象的状态变化只会有两种可能：（1）Pending变成Fulfilled（2）Pending变成Rejected。只要这两种情况任意一个发生，Promise的状态就会固定，不会再发生变化了。
    3. 如果状态已经发生的改变，再给给期添加回调函数，依然可以得到结果。这与event不同，事件一旦错过就没有了。
    4. 缺点： a. Promise一旦创建就会立即执行，无法中途取消。b. 如果不设置回调函数，Promise内部发生的错误，不会反应到外部。c. Pending状态时，无法得知当前进展到哪一状态。

    基本用法

    1. 创建一个Promise实例;
    var promise = new Promise(function (resolve, reject) {
  if(/*成功*/) {
    resolve(value);
  } else {
    reject(error);
  }
})

    Promise实例创建完毕，我们需要通过then方法分别指定Resolved和Rejected状态的回调函数。

    promise.then(function () {
  // success code
}, function () {
  // failure code
})

    then 方法可以接受两个参数，第一个参数对应成功的回调函数，第二个对应的是失败的回调函数，并且第二个参数的可选的，不一定需要传递。

    1. Promise新建以后就会立即执行。
    var promise = new Promise(function (resolve, reject) {
  resolve();
  console.log('promise')
})
promise.then(function () {
  console.log('resolved')
})
console.log('hi');
// 执行结果：
// promise
// hi
// resolved

    then 方法指定的回调函数，将在当前脚本所同步任务执行完成才会执行，所以resolved最后输出。

    Promise.prototype.then()

    Promise实例具有then方法，也就是then方法是定义在Promise的原型对象上的，他的作用就是添加状态改变时的回调函数。
    注意：then方法返回的是一新的Promise实例（不是原来的那个Promise实例）,因此可以链式调用。

    var getJSON = function (url) {
  var promise = new Promise(function (resolve, reject) {
    var client = new XMLHttpRequest();
    client.open('GET', url);
    client.onreadystatechange = handler;
    client.responseType = 'json';
    client.setRequestHeader('Accept', 'application/json');
    client.send();
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
  })
  return promise;
}
getJSON('/posts.json').then(function (json) {
  return json.post;
}).then(function(post){
  //post 是上一个回调函数传过来的
})

    上面的代码使用then方法，依次指定了两个回调函数，第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

    getJSON('/post/1.json').then(function(post){
  return getJSON('/post/2.json')
}).then(function(post){
    console.log('resloved')
}, function(err){
    console.log('rejected')
})

    上面的代码，第一个then方法返回了Promise对象，这时，第二个then指定的回调函数，要等到这个Promise对象状态改变时才会触发。

    Promise.prototype.catch()

    Promise.prototype.catch方法是.then(null, fn)的别名，用于指定发生错误的回调函数。

    getJSON('/post.json').then(function(){
  // code
}).catch(function(err){
  console.log(err)
})

    getJSON返回一个Promise对象，如果是成功状态就会走then里面设置的回调函数，如果失败了就会走catch设置的回调函数，如果then指定的回调函数里面出错了，也会被catch所捕获，调用catch设置的回调函数处理。

    p.then(function(){
  //code
}).catch(function(){
  //code
})
// 等同于
p.then(function(){
  // code
}).then(null, function(){
  //code
})
    // 第一种写法
var promise = new Promise(function(resolve, reject){
  try {
    throw new Error('test')
  } catch (e) {
    reject(e)
  }
})
promise.catch(function(err){
  console.log(err)
})
// 第二种写法
var promise = new Promise(function(resolve, reject){
  reject(new Error('test'))
})
promise.catch(function(error){
  console.log(error)
})

    上面两种写法是等价的，可以看出reject方法作用，等同于抛出错误。

    var promise = new Promise(function(resolve, reject){
  resolve('ok');
  throw new Error('test')
})
promise.then(function(value){
  console.log(value)
}).catch(function(err){
  console.log(err)
})
// ok

    Promise在resolve语句后面再抛出错误，是不会被catch捕获的，等于没有抛出。

    getJSON('/post/1.json').then(function(post){
  return getJSON('/post/2.json')
}).then(function(json2){
  // code
}).catch(function(e){
  console.log(e)
  // 捕获前面三个promise对象的错误
})

    Promise对象的错误具有“冒泡”的性质，会向后面一直传递，直到被捕获为止。

    //不推荐的写法
promise.then(function(data){
  //success
}, function(err){
  // failure
})
// 推荐写法
promise.then(function(data){
  //success
}).catch(function(err){
  console.log(err)
})

    第二种方法优于第一种写法，理由是第二种可以捕获前面then 里面的错误，语法页更贴近（try/catch）。

    var someAsyncThing = function() {
  return new Promise(function() {
    resolve(x + 2)
  })
}
someAsyncThing().then(function() {
  console.log('..')
})

    上面的代码中，someAsynicThing函数产生的Promise对象会报错，但是没有指定catch方法这个错误是不会被捕获的，也不会被传递到外层的。

    var promise = new Promise(function(resolve, reject) {
  resolve('ok');
  setTimeout(function(){
    throw new Error('test')
  }, 0)
})
promise.then(function(value) {
  console.log(value);
}).catch(function(err) {
  console.log(err);
})
// ok
// VM672:4 Uncaught Error: test

    Promise指定在下轮的事件循环里面在抛出一个错误，到那个时候Promise的运行已经结束，所以这个错误会在函数体外抛出，冒泡到最外层成为未捕获的错误。

    var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    // 将报错，x没有申明
    resolve(x + 2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
  return '123'
}).then(function(str){
  console.log('ok', str)
})
// err: ReferenceError: x is not defined
//    at <anonymous>:4:13
//    at Promise (<anonymous>)
//    at someAsyncthing (<anonymous>:2:10)
//    at <anonymous>:7:1
//ok 123

    catch方法返回的还是一个Promise对象，因此后面还是可以接着调用then方法。

    var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    resolve(2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
  return '123'
}).then(function(str){
  console.log('ok', str)
  // x 未定义会报错
  return x;
})
//ok 2
//ReferenceError: x is not defined
//    at <anonymous>:12:3
//    at <anonymous>

    上面代码，Promise里面没有错误，就会跳过catch的方法，直接执行下面的then方法，then里面在出错就与前面的catch无关了，错误也不会被捕获。

    var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    resolve(2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
// x 未定义
  return x
}).then(function(str){
  console.log('ok', str)
})
// ok 2

    catch里面出了错误，因为后面没有catch了，导致这个错误不会被捕获，也不会被传递到最外层。

    总结： 为了尽可能多的捕获到错误，应该将catch写在所有then的最后面，这样不仅可以捕获到promise的错误，也能捕获到前面then里面错误.

    Promise.all()

    Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

    var p = Promise.all([p1, p2, p3])

    Promise.all接受一个数组作为参数，p1，p2，p3都是Promise实例，如果不是，就会先调用Promise.resolve方法，将其转为Promise实例。（Promise.all的参数可以不一定是数组，但一定是要实现Iterator接口的，且返回的每个成员都是Promise实例）
    p的状态是由p1,p2,p3决定的：

    1. 只有p1,p2,p3的状态都变成fulfilled，p的状态就变成fulfilled，此时p1,p2,p3的返回组成一个数组，传递给p的回调函数。
    2. 只有p1,p2,p3中有一个的状态都变成rejected，p的状态就变成rejected，此时第一个变成rejected的实例的返回值，传递给p的回调函数。
    var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            resolve(t)
        },t)
    })
}
var p1 = a(); var p2 = a();
Promise.all([p1,p2]).then(([p1,p2])=>{console.log(123, p1,p2)})
// 562 
// 879 
// 123 879 562

    上面p1和p2是两个异步的操作，只有等到两个结果都返回了才会触发Promise.all的then的方法

    // 由于是随机数要多试几次
var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            if(t < 500){
                reject(new Error('<500'))
            }
            resolve(t)
        },t)
    })
}
// 如果出错，p1将不是a函数返回的Promise，而是catch返回的promise
var p1 = a().catch((err) => {console.log('err:', err)});
var p2 = a().catch((err) => {console.log('err:', err)});
Promise.all([p1,p2]).then(([p1,p2])=>{console.log(123, p1,p2)}).catch((err) => {console.log('all',err)})
//7 a 里面的输出
//err: Error: <500 p1 的catch的输出
//    at <anonymous>:7:12
// 687 a 里面的输出
//123 undefined 687 Promise.all的then输出

    上面p1和p2都有可能会Rejected，一旦Rejected就会被他们的catch所捕获，然后就会返回一个全新的Promise对象不再是原来的那个，全新的实例执行完catch以后也会变成Resolved， 导致Promise.all方法里面的两个实例都是Resolved，则会走Promise.all的then方法，而不会是catch方法。

    Promise.race()

    Promise.race方法同样是将多个Promise的实例，包装成一个新的Promise实例。

    var p = Promise.race([p1,p2,p3])

    上面代码，只要p1,p2,p3之中有一个实例率先改变了状态，p的状态就会跟着改变，那个率先改变的Promise实例的返回值，就传递给p的回调函数。
    他处理参数的方法的原则和Promise.all是一样的。

    var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            resolve(t)
        },t)
    })
}
var p1 = a()
var p2 = a()
Promise.race([p1,p2]).then(t =>{console.log(123, t)})
// 87 a 函数输出
// 123 87 Promise.race的then输出
// 591 a 函数输出

    Promise.resolve()

    有时需要将现有的对象转化成Promise对象，Promise.resolve方法就起到这个作用。

    var  jqPromise = Promise.resolve($.ajax('/1.json'))

    上面的代码将jQuery生成的deferred对象，转成一个新的Promise对象。

    Promise.resolve('foo')
// 等价于
new Promise(function(resolve, reject){
  resolve('foo')
})

    Promise.resolve方法的参数分为四种情况
    a. 参数是一个Promise实例
    如果参数是一个Promise实例，那么Promise.resolve将不做任何修改，原封不动的返回这个实例。
    b. 参数是一个thenable对象
    thenable对象是指具有then方法的对象，例如：

     // thenable 对象
 let thenable = {
   then: function(resolve, reject){
     resolve(42)
   }
 }
 let p1 = Promise.resolve(thenable);
 p1.then(function(value){
   console.log(value) // 42
 })

    thenable对象的then方法执行以后，对象p1的状态就会变成resolved，从而立即执行最后的那个then方法指定的函数，输出42
    c. 参数不是具有then方法的对象，或根本就不是对象
    如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved.

    var p = Promise.resolve('hello')
p.then(function(s){
  console.log(s)
})
// hello

    上面的代码生成一个新的Promise对象的实例p，由于字符串hello不属于异步操作（判断方法字符串不具有then方法），返回的Promise实例的状态从一生成就是Resolved，所以回调函数立即执行。Promise.resolve方法的参数，会同时传回给回调函数。
    d. 不带任何参数
    Promise.resolve方法允许调用时不带任何参数，直接返回一个Resolved状态的Promise对象。
    注意： 立即resolve的Promise对象，实在本轮事件循环的结束时，而不是在下一轮事件循环的开始时

    setTimeout(function(){
    console.log('setTimeout')
}, 0)
Promise.resolve().then(function(){
    console.log('Promise.resolve')
})
console.log('console.log()')
// console.log() 顺序执行
// Promise.resolve 本轮事件循环的尾部
// setTimeout 下轮事件循环的开始

    setTimeout(fn, 0)实在下一轮事件循环的开始的时候执行的，Promise.resolve()实在本轮事件循环的结束时执行，console.log()立即执行，所以最先输出。

    Promise.reject()

    跟Promise.resolve方法类似，生成相对的状态为Rejected的Promise实例。

    var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

    生成的p的状态为Rejected的，回调函数立马执行。
    注意： Promise.reject()方法的参数，会原封不动的作为reject的理由，比那成后续方法的参数，这一点与Promise.resolve方法不一致

    const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

    两个有用的附加方法

    ES6的Promise API提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在ES6之中、但很有用的方法。

    Done()

    Promise对象的回调链，无论是以then方法或者catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

    asyncFunc()
  .then()
  .then()
  .catch()
  .done()

    他的实现页很简单

    Promise.prototype.done = function (onFulfilled, onRejected) {
  this.then(onFulfilled, onRejected)
    .catch(function (reason) {
        // 抛出全局错误
        setTimeout(() => {throw reason}, 0)
    })
}

    done方法的使用，可以像then方法那样用，提供Fulfilled和Rejected状态的回调函数，也可以不提供任何参数。但不管怎样，done都会捕捉到任何可能出现的错误，并向全局抛出。

    finally()

    finally方法不管状态是成功还是失败，都会执行的的操作，他与done的最大的区别，是他接受一个回调函数作为参数，该函数不管怎样都必须执行。

    server.listen(0)
  .then(function () {
    // run test
  })
  .finally(server.stop);

    实现

    Promise.prototype.finally = function (callback) {
  let P = this.cunstructor;
  return this.then(function(value){
    P.resolve(callback()).then(function(){
      return value;
    })
  }, function(reason){
    P.reject(callback()).then(function(){
      throw reason;
    })
  })
}
Promise是什么？(承诺)
Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。 什么时候会用到过一段时间？答案是异步操作，异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等。

Promise的三种状态
pending是对象创建后的初始状态，当对象fulfill（成功）时变为fulfilled，当对象reject（失败）时变为rejected。且只能从pengding变为fulfilled或rejected ，而不能逆向或从fulfilled变为rejected 、从rejected变为fulfilled。如图所示：

Promise是一种异步流程的控制手段;
回调地狱，代码难以维护，第一个的输入是第二个的输入。比如常用的ajax调用，代码如下：
$.ajax(
    success(){
        $.ajax(
            success(){
                
            }
        )
    }
)

promise链式调用
可以支持多个并发的请求，获取并发请求中的数据;
a().b()//比如这个a执行完了，执行b
ajax()//1
ajax()//2
复制代码
可以解决异步的问题，本身不能说promise是异步的(then方法是异步的)
promise（承诺）关键词 resolve成功 reject失败 pending 等待
如果一旦promise成功了就不能失败，相反也是一样的； 只有状态是等待的状态时才可以转化状态；每一个promise的实例上都有一个then方法,then方法中有两个参数，一个参数叫成功的函数，一个是失败的函数；promise中发生错误 就会执行失败态。
let p = new Promise((resolve,reject)=>{//默认promise中的excutor是同步执行的。
    resolve('承诺');//resolev走成功
    reject('没承诺');//reject 走失败
});
p.then((value)=>{//value成功的原因
    console.log('success');
},(err)=>{//err失败的原因
    console.log('faile');
})

用Promise链式调用读取文件解决金字塔demo
金字塔demo:

let fs = require('fs');
fs.readFile('1.txt','utf8',function(err,data){
    if(err)return console.log(err);
    
    fs.readFile(data,'utf8',function(err,data){
        if(err)return console.log(err);
        console.log(data);
        
        fs.readFile(data,'utf8',function(err,data){
        if(err)return console.log(err);
        console.log(data);
    })
    })
})

promise 链式调用

如果返回的是promise那么会取这个promise的结果，如过成功会走外层的promise的下一个then的成功，将数据传递到成功里；
promise 实现链式调用返回的并不是this而是一个新的promise。
function read(url) {
  return new Promise((resolve,reject)=>{
    fs.readFile(url, 'utf8', function (err, data) {
      if(err) reject(err);
      resolve(data);
    })
  })
}
// 链式调用--前提新建两个文本文档，分别是1.txt和2.txt; 1.txt里面写的2.txt,2.txt里面写的222
read('1.txt').then((data)=>{
  return read(data);//如果返回了一个新的promise
  //return 100;//如果返回的是一个普通值就会走到写一个then中的成功回调
  //throw new Error();//假如成功里面抛出个异常，会走下一个then的失败
}).then(data=>{
  console.log(data);//222 输出的2.txt里面的内容
},err=>{
  console.log(err);
}).then(data=>{
  console.log(data,'000');//undefined '000'
});//失败之后还可以再then,依然会走到成功这里的then

Promise.all和Promise.race以及Promise.resole Promise.reject
Promise.all 例子：

Promise.all方法调用会返回一个新的promise
let fs = require('fs');
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf8', function (err, data) {
      if (err) reject(err);
      resolve(data);
    })
  })
}
//第一种
// Promise.all([read('1.txt'),read('2.txt')]).then((data)=>{
//   console.log(data);
// })
//第二种
Promise.all([read('1.txt'),read('2.txt')]).then((r1,r2)=>{
  console.log(r1,r2);
},err=>{
  console.log(err);
});

Promise.race 例子：

Promise.race赛跑 顺序执行不一定,处理多个请求只取最快的
let fs = require('fs');
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf8', function (err, data) {
      if (err) reject(err);
      resolve(data);
    })
  })
}
//如果读取的文件不存在，就直接走失败了
Promise.race([read('1.txt'),read('2.txt')]).then((data)=>{
  console.log(data);
},err=>{
  console.log(err);
});

Promise成功失败的例子：

Promise.resolve()返回一个成功的promise
Promise.reject()返回一个失败的promise
Promise.resolve('success').then(data=>{
    console.log('data')//success
})
Promise.reject('fail').then(null,data=>{//希望第一个参数不传，此处的null可以忽略掉
    console.log(data);//fail
})

Promise源码分解
根据Promises/A（Promise的官方标准）咱家实现一个160行左右代码的Promise。
 1、构造器
class Promise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = (data) => {
      if (this.status === 'pending') {
        this.value = data;
        this.status = 'resolved';
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    }
    let reject = (reason) => {
      if (this.status === 'pending') {
        this.reason = reason;
        this.status = 'rejected';
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    }
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulFilled, onRejected) {
    onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
    let promise2;
    if (this.status === 'resolved') {
      promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onFulFilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
    if (this.status === 'rejected') {
      promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
    if (this.status === 'pending') {
      promise2 = new Promise((resolve, reject) => {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulFilled(this.value);
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
        // 存放失败的回调
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      })
    }
    return promise2; // 调用then后返回一个新的promise
  }
  // catch接收的参数 只用错误
  catch(onRejected) {
    // catch就是then的没有成功的简写
    return this.then(null, onRejected);
  }
}

2、官方给出了一个叫做resolvePromise的函数

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('循环引用'));
  }
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    let called;
    try { // 防止取then是出现异常 Object.defineProperty
      let then = x.then; // 取x的then方法 {then:{}}
      if (typeof then === 'function') { // 如果then是函数我就认为它是promise
        // call 第一个参数是this ，后面的是成功的回调和失败的回调
        then.call(x, y => { // 如果y是promise就继续递归解析promise
          if (called) return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, r => { // 只要失败了就失败了
          if (called) return;
          called = true;
          reject(r);
        });
      } else { // then是一个普通对象，就直接成功即可1
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else { // x = 123
    resolve(x); // x就是一个普通值
  }
}

3、Promise的常用方法

Promise.resolve
Promise.reject
Promise.race
    前端javascript
    梓萱
    1 声望0 粉丝
    下一篇 »
    class语法

    引用和评论

    推荐阅读
    头像
    class语法

    梓萱阅读 829

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.7k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 7阅读 5.3k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 4.2k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 5阅读 849

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.3k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    0 条评论
    得票最新