ES6-Promise ---Halo

番茄锅特浓加番茄
192 阅读10分钟

Es6学习之路（阮一峰老师的ECMAScript 6）

由于看的时候发现其中的知识都是穿插的而且当中的细节十分之多，我第一遍按顺序看，感觉效率有点低，有不少内容都没耐心看完了。具体细节还是得看阮一峰老师的，本文完全针对个人的总结，省略了很多定义部分。

这次我直接从比较不喜欢的内容看起： Promise

Promise 有两个特点：

  • 对象的状态不受外界影响。
  • 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 三个缺点：
  • 无法取消Promise。
  • 如果不设置回调函数，Promise内部抛出的错误，就不会反映到外部。
  • pending状态时，不知道是刚开始还是快结束。
const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise对象是一个构造函数，用来生成实例，Promise 构造函数接受一个函数作为参数 resolve和reject是两个函数，作为Promise构造函数的参数的参数。 现在我们就获得promise实例了。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在 异步操作成功 时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

我很奇怪什么叫异步操作成功，什么叫异步操作失败。并把结果作为参数传递出去。 在我练习的时候发现：new出来的实例，会执行一遍构造函数，翻开红宝书查看new的过程：

  • 创建一个新对象
  • 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
  • 执行构造函数中的代码（为这个新对象添加属性）
  • 返回新对象
const promise = new Promise(function(resolve, reject) {
  console.log('Promise')
  let value = 10
  error = 20
  if (true){
    resolve(value);
  } else {
    reject(error);
  }
});

此时只会打印一个 Promise 。 true 意味着异步成功，是我让Promise异步成功，实际上如何判断，应该由大家自己编写。也就是说会执行resolve(value)，那这又是什么玩意呢？也没看到什么呀。看看前面说的：并将异步操作的结果，作为参数传递出去，也就是说这（resoleve）就是一个传递过程。那传递完了在哪里接收呢？

答案就是调用实例的then()方法:

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

此时第一个参数中的参数value就是resolve传过来的数据，对应的error便是reject传过来的参数。也就是异步函数的调用成功与失败都是在then当中进行操作的。 那么之前的catch是什么时候使用的呢？

看一下阮一峰老师给的例子：

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

我感觉这个代码挺抽象的，首先是这个done我都不知道是什么，查了一下setTimeout的第三个参数及往后的参数都是传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。也就是说在ms之后会执行resolve('done')在then里可以拿到这个done。事实上也是如此。

教程当中指出：then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

虽然Hi的打印写在then以前，但是却在回调以前执行了，说明确实是在当前脚本所有同步任务执行完才执行的。注意是同步脚本。

  • 封装ajax
  • Promise.prototype.then() 先跳过，下一个是Promise.prototype.then()是.then(null, rejection)或.then(undefined, rejection)的别名,好家伙，我就说怎么记得catch和reject是有关系的嘛。
p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

看看配上Promise的代码

// 写法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error('test');
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);
});

// 写法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

Promise中有一段try catch这个语句没用过，意思是：允许try中的代码出错，如果出错了，就执行catch里面的语句。

那显然try当中的语句抛出了一个错误（强行出错，太稳啦），那他就会执行catch当中的reject(e)，那么我们就可以在then()的第二个参数回调使用，或者直接使用.catch（）回调。阮一峰老师建议我们使用catch来进行reject的操作。

推荐写法：

promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

Promise中出现的错误都需要通过catch来传递

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123

上面代码中，someAsyncThing()函数产生的 Promise 对象，内部有语法错误。浏览器运行到这一行，会打印出错误提示ReferenceError: x is not defined，但是不会退出进程、终止脚本执行，2 秒之后还是会输出123。这就是说，Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”。

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

const promise = new Promise(function(resolve, reject) {
  console.log('Promise')
  let value = 10
  let error = 20
    reject(error);
});
promise
.then( res => {
  console.log(res)
})
.catch(err => {
  xb
  console.log('catch1:',err)
})
.then(res => {
  console.log(res)
})
.catch(err =>{
  console.log('catch2:',err)
})
// Promise
// catch2: ReferenceError: xb is not defined

上面是我自己写的一个例子，首先这个promise是reject的，所以要用catch来捕获错误。但是第一个catch一进去就报错了，根本不会执行到console.log('catch1:',err),在遇到xb的时候就停止了，跳转到下一个catch当中了。很明显两个过程都是reject的，因此then一次都不会调用。

Promise.prototype.finally() 这个很简单，就是不论resolve还是reject都会调用。

往后还有很多Promise的API：

  • Promise.all
  • Promise.race
  • Promise.allSettled
  • Promise.any
  • Promise.resolve
  • Promise.reject

先看Promise.resolve以及Promise.reject因为前面的几个Api会用到这两个api。

Promise.resolve会将现有对象转化为Promise对象，老师的例子

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

参数的四种情况

  • Prmoise实例 Promise.resolve将不做任何修改、原封不动地返回这个实例。
  • 参数是一个可以使用then方法的对象 Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法 （当然，你也得使用了才可以。）。所以先出现了then1。
let thenable = {
  then: function(resolve, reject) {
  	console.log('then1')
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
//then1

p1.then(function (value) {
  console.log('then2')
  console.log(value);
});
//then2
//42
  • 参数不是具有then()方法的对象，或根本就不是对象 如果参数是一个原始值，或者是一个不具有then()方法的对象，则Promise.resolve()方法返回一个新的 Promise 对象，状态为resolve。
const p = Promise.resolve('Hello');

p.then(function (s) {
  console.log(s)
});
// Hello

你resolve里面放什么在then里面就会拿到什么。

  • 不带有任何参数

变量p就是一个 Promise 对象

const p = Promise.resolve();

p.then(function () {
  // ...
});
---------------------------------------
setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行，因此最先输出。

再看Promise.reject()就会简单很多，Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

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

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

如果定义了实例却不使用catch进行捕获，那么就会直接报错（红字）。使用catch就是console的错误。

解决了这两个api，接下来看看其他的几个api

  • Promise.all
  • Promise.race
  • Promise.allSettled
  • Promise.any Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
const 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，此时第一个被reject的实例的返回值，会传递给p的回调函数。

注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。因为实例catch之后会返回一个新的状态为resolved的promise，此时的promise是可以调用then的，因此all就不会执行catch了。

Promise.race()参数形式是一样的，就是执行的逻辑不一样，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。 与Promise.all()方法一样，如果不是 Promise 实例，就会先调Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。(race:赛跑 , 这样就明白为什么race方法的执行逻辑了吧)

Promise.allSettled()：有等到 所有 这些参数实例都返回结果，不管是fulfilled还是rejected ，包装实例才会结束。该方法由 ES2020 引入。

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

上面代码中，Promise.allSettled()的返回值allSettledPromise，状态只可能变成fulfilled。它的监听函数接收到的参数是数组results。该数组的每个成员都是一个对象，对应传入Promise.allSettled()的两个 Promise 实例。每个对象都有status属性，该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时，对象有value属性，rejected时有reason属性，对应两种状态的返回值。

Promise.any():ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。Promise.any()跟Promise.race()方法很像，只有一点不同，就是不会因为某个 Promise 变成rejected状态而结束。 有个例子：

var resolved = Promise.resolve(42);
var rejected = Promise.reject(-1);
var alsoRejected = Promise.reject(Infinity);

Promise.any([resolved, rejected, alsoRejected]).then(function (result) {
  console.log(result); // 42
});

Promise.any([rejected, alsoRejected]).catch(function (results) {
  console.log(results); // [-1, Infinity]
});

后面还有Promise.try 以及 async 的相关知识，看完这篇Promise，发现自己对事件循环、async、Interator、generator都不熟悉，下一篇就决定学习async了

avatar
文章
阅读
粉丝