「星辰大海」你可能需要知道的 promise 知识的总结（内附思维导图）

前言

接上一期 「高频面试题」女友：消息队列 和 事件循环系统终于弄明白了！（内附思维导图） 文章出炉后，微信好友也多了不少，还挺好的~

最近又重新整理一下 Promise 相关知识，一方面和上一期文章有个接应，另一方面，方便自己日后复盘回顾。

本篇文章参考视频学习而来，都是自己一个字一个字敲出来的，也加了自己的理解，视频就在参考处，建议大家先看视频，后续回顾的话通过本文几个例题就好了。✿✿ヽ(°▽°)ノ✿

学完本篇文章，你将会明白如下几大模块知识：

• 迭代器
• 生成器
• promise
• async、await

（手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【promise知识】

迭代器是什么

提出问题

在了解迭代器之前，我们先来提出一个问题：

遍历和迭代有什么区别？

如下代码，对于数组、字符串、对象等我们可以按照如下方式进行遍历。

var arr = [1, 2, 3, 4];
var str = '123';
var obj = { a: 1, b: 2 };
// 遍历数组
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 遍历字符串
for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}
// 遍历数组
arr.forEach(function (item) {
  console.log(item);
})
// 遍历对象
for (let key in obj) {
  console.log(key, obj[key]);
}

function test() {
  console.log([...arguments]);
}
test(1, 2, 3);
复制代码

但对于这些数据类型的不同，我们可能需要不同的遍历方式，比如对象我们需要通过 for...in，函数也不一样，那么我们想着是否对于不同数据类型可以用同一种遍历方式呢？

没错，当然可以，这就是迭代，到此你应该明白了上文提出的问题：遍历和迭代有什么区别？

迭代就是从目标源依次按逐个抽取的方式来提取数据，其中目标源满足：1、有序的 2、连续的 而遍历就没有这些要求，对于不同数据类型会有不同遍历方式。

迭代引入

而对于数据类型呢，在这里先提前告知大家，有哪些可以直接迭代出来的：

Array、Map、Set、String、TypeArray、arguments、NodeList

上述都是可以通过 for..of 来迭代出来。可能此时你会有疑问了，对象不可以么？（那我们不妨来试试）

let arr = [1, 2, 3, 4]
let str = '123'
let obj = { a: 1, b: 2 }
console.log(arr)
console.log(str)
console.log(obj)
for(let item of arr){
  console.log(item);
}
for(let item of str){
  console.log(item);
}
for(let item of obj){
  console.log(item);
}
复制代码

通过打印之后，我们发现当我们遍历 obj 对象的时候会抛出错误：Uncaught TypeError: obj is not iterable

通过打印，我们发现，如果一个数据类型能迭代的话，会在原型上存在 Symbol(Symbol.iterator)方法，我们不妨来试着用一用这个方法，如下代码所示：

let arr = [1, 2, 3, 4]
let str = '123'
let obj = { a: 1, b: 2 }

let iter = arr[Symbol.iterator]();
console.log(iter.next()); //  {value: 1, done: false}
复制代码

此时会打印 {value: 1, done: false}，发现 done 为 false，这意味着还没有完成迭代，即可以继续迭代。对于这个数组而言，有4个元素，那我们可以通过迭代5次来完成对数组的迭代，如下代码所示：

let arr = [1, 2, 3, 4]
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: undefined, done: true}
复制代码

总结：调用Symbol(Symbol.iterator)方法将会返回一个 迭代器对象，而这个迭代器对象具备 next() 方法，通过这个方法来实现逐步调用，同时每次调用的时候会返回一个对象，包括 value 和 done 两个属性，当value为 undefined，done 为 true 时迭代完成。

自己动手实现 Symbol.iterator

实现代码如下，我们依然可以获得与上文一样的结果。

let arr = [1, 2, 3, 4]

function makeIterator(arr){
  let index=0;
  return{
    next(){
      if(index<arr.length){
        return{
          value: arr[index++], done: false
        }
      }
      return {value: undefined, done: true};
    }
  }
}
let iter = makeIterator(arr);
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: undefined, done: true}
复制代码

实现对象的自定义迭代器对象

上文我们知道了对象是没办法进行迭代的，因为它的原型上没有 Symbol(Symbol.iterator) 方法，那么有了上文自己动手实现 Symbol.iterator 前置知识后，我们现在来实现对象的自定义迭代器对象。

var obj = { 
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator](){
    let index = 0;
    let map = new Map([['a',1],['b',2],['c',3]]);
    return{
      next(){
        // 获取键值对
        let mapEntries = [...map.entries()];
        if(index < map.size){
          return{
            value: mapEntries[index++], done: false
          }
        }
        return {value: undefined, done: true};
      }
    }
  }
};
let iter = obj[Symbol.iterator]();
console.log(iter.next()); // {value: (2) ["a", 1], done: false}
console.log(iter.next()); // {value: (2) ["b", 2], done: false}
console.log(iter.next()); // {value: (2) ["c", 3], done: false}
console.log(iter.next()); // {value: undefined, done: true}
复制代码

从上文我们知道，我们可以通过 for...of 的方式来迭代，因此，对于上述代码我们可以换一种方式，如下：

for(let item of obj){
  console.log(item);
}
复制代码

结果也是能迭代打印对象数据，那么也就是说 for...of 就是调用 [Symbol.iterator]() 方法来实现迭代，它能一次性迭代出对象中所有属性和属性值。

生成器的使用

生成器初识

上文我们介绍了迭代器是什么，发现对象没办法使用迭代，然后我们自己动手实现了对对象的自定义迭代器，然后也发现了说 for...of 就是调用 [Symbol.iterator]() 方法来实现迭代，它能一次性迭代出对象中所有属性和属性值。

接下来，我们来讲解生成器了。首先，生成器它能像迭代一样返回一个迭代器对象，然后调用 next 方法进行抽取，下面结合一个例子就能明白了：

function* test(){
  yield 1;
  yield 2;
  yield 3;
  yield 4;
}

let iter = test();
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: undefined, done: true}
复制代码

同样，我们也可以通过 for...of 方式实现，这里就不再演示了。

探讨生成器

我们不妨来看一下下面这段代码，看看会有怎样的结果：

function* test(){
  console.log(0);
  yield 1;
  yield 2;
  yield 3;
  yield 4;
}

let iter = test();
复制代码

结果显示是 没有打印结果，你是否以为会执行了 test 函数之后会默认输出 0 呢，答案不是，这很奇怪！ 那么我们不妨执行一下：

console.log(iter.next()); 
// 0
// {value: 1, done: false}
复制代码

从结果上来看，当我们调用一下 next 方法之后，打印 0 的那行代码被执行了，而没有调用的时候就没执行。

那么总结一下，yeild 实际上能够中断函数，这里就有 return 的味道了，不妨看看下面几个例子：

function* test(){
  console.log(0);
  return 1;
}

let iter = test();
console.log(iter); // 打印迭代器对象
复制代码

function* test(){
  console.log(0);
  return 1;
}

let iter = test();
console.log(iter.next());
// 0
// {value: 1, done: true}
复制代码

这里因为在抽取的时候没有遇到 yield 因此全部抽取完，然后 done 设置为 true，此时代表迭代完成。因此，生成器函数一般不会 return 一个值。

function* test(){
  console.log(0);
  yield 1;
}

let iter = test();
console.log(iter.next());
// 0
// {value: 1, done: false}
复制代码

探究生成器传参

上文我们介绍了生成器抽取相关问题，也提及了一般不会使用 return 返回一个值，下面我们来探究一下生成器传参是怎样的情况，例如如下代码：

function* test(){
  let value1 = yield 1;
  console.log(value1);
  let value2 = yield 2;
  console.log(value2);
  let value3 = yield 3;
  console.log(value3);
  let value4 = yield 4;
  console.log(value4);
}

let iter = test();
console.log(iter.next('one'));
console.log(iter.next('two'));
console.log(iter.next('three'));
console.log(iter.next('four'));
console.log(iter.next());
复制代码

打印结果如下：

从上述打印结果来看，我们发现，第一个 yield 的返回值是在调用第二个 next 方法时的传参。

然而上述传参其实不太符合我们想象中的逻辑，可以有解决办法嘛？

当然有办法，因此之后推出了 async/await。

Promise

关于 Promise 讲解的话，网上也是一大堆，但本篇还是以简单便捷的方式给大家呈现 promise 知识点，因此，可能需要你起初对 promise 有一定了解，本文不会从零去讲 promise，比如它的来源，为什么要使用 promise 这些问题，本文不会过多涉及，更多内容小狮子们可以参考文末提供的学习视频，通过系统学习过后，如若后续还想继续复盘的话，就可以参考本文，而无需再看一遍视频了，我想读者应该明白我这些话的意思了哈，下面我们正式进入 promise 章节。

Promise的特性

1、promise 状态不受外界影响

2、promise 的固化（一旦 promise 状态发生变化后就不能再更改）

下面来看一个例子，看看会输出什么，这也就是 promise 的执行方式，通过 微任务 的方式来执行 promise 注册的回调函数，不管是成功还是失败。

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

setTimeout(function () {
  console.log('timeout');
}, 0);

promise.then(function (data) {
  console.log(data);
})

console.log('Chocolate');
复制代码

打印结果如下：

promise
Chocolate
resolve
timeout
复制代码

这道题主要还是与事件循环相关，小狮子们可以阅读我的上一篇文章，看完我想你对事件循环的理解会更加深入一些：

「高频面试题」女友：消息队列 和 事件循环系统终于弄明白了！（内附思维导图）

thenable 对象

直接看下面例子，你觉得会输出什么呢？

let obj = {
  then(resolve, reject) {
    resolve(11);
  }
}

let p1 = Promise.resolve(obj);

p1.then(function (data) {
  console.log(data);
})
复制代码

答案是输出 11，解释一波，当绑定一个对象参数为 thenable 的时候，那么会默认调用对象的 then 方法，之后then 方法里面 resolve 传递的值，就会成为之后 then 回调传入的值，即上述代码中的 data。

（如果then 方法是 resolve 则为成为状态，如果是 reject 则成为失败状态）

上一句话怎么理解呢，我们不妨修改一下上文代码，如下：

let obj = {
  then(resolve, reject) {
    // resolve(11);
    reject(10);
  }
}

let p1 = Promise.resolve(obj);

p1.then(function (data) {
  console.log(data);
}, function (err) {
  console.log('err' + err);
})
复制代码

输出结果是 err10，也就是说当我们Promise 执行 reslove 方法时，传入参数为对象并且包含 then 方法，那么就会改变当前 promise 的状态。

但是，我们再试试改变一下上述代表，将 Promise执行 reject 方法，会有什么变化呢？

let obj = {
  then(resolve, reject) {
    // resolve(11);
    reject(10);
  }
}

let p1 = Promise.reject(obj);

p1.then(function (data) {
  console.log(data);
}, function (err) {
  console.log(err);
})
复制代码

打印结果是 { then: [Function: then] }，发现并没有执行 thenable 对象，因为此时 Promise 执行的是 reject。

总结：当 Promise 是 reslove 状态时，我们可以通过传入对象并且对象包含 then 方法，那么可以通过这个 then 方法来改变 promise 状态，并且进行传参。

在此，穿插一道 promise 相关题目，看看输出结果是什么？

Promise.resolve().then(function () {
  console.log('promise1');
  setTimeout(() => {
    console.log('setTimeout2');
  }, 0)
})

setTimeout(() => {
  console.log('setTimeout1');
  Promise.resolve().then(function () {
    console.log('promise2');
  })
}, 0)
复制代码

输出结果如下：

promise1
setTimeout1
promise2
setTimeout2
复制代码

这里要注意的是首先执行上面微任务，是整个微任务底下的代码加入微任务队列，因此第一个定时器宏任务会在微任务执行的时候才会加入延迟队列（或者叫做 Web APIs）而第二个定时器宏任务在预编译代码的时候就在微任务之后加入了延迟队列，而它们都是设置的延时 0 秒，那么在下一次事件循环的时候显然第二个定时器会优先拿出来调用。

promise 的链式调用

对于链式调用这一块，我想小狮子们应该或多或少的听说过，或许你听说过返回普通值，或者返回 promise 对象啥的，但应该对于这个链式调用理解的还是很模糊，接下来我们在这一章节一起来探讨一下：

首先，还是由浅入深，看一下简单例子：

let p1 = new Promise((resolve, reject) => {
  resolve(1);
})

p1.then(res => console.log(res));
复制代码

显然改变了 promise 状态为 resolve 成功态，会输出 1。

上面代码应该很容易就看出来了，下面我们对上文代码进行新增，尝试进行链式调用，如下：

let p1 = new Promise((resolve, reject) => {
  resolve(1);
})

p1.then(res => console.log(res))
  .then(res => console.log(res + 1))
  .then(res => console.log(res + 2));
复制代码

输出结果如下：

1
NaN
NaN
复制代码

这里来解释一下，首先我们想一想，为什么能进行链式调用呢？第一个 then 是因为 promise 状态变为了成功态，就可以执行回调，那么第二个 then 为什么能执行呢？带着这个问题，我们不妨打印一下第一个 then 的返回结果：

console.log(p1.then(res => console.log(res))) // Promise { <pending> }
复制代码

发现，执行 then 回调之后返回的也是 promise，那么为什么能进行链式调用也就解释的清了。如果我们接着执行 then 方法，那么 p1.then 会包装返回 Promise.resolve(undefined)，因为 console.log 函数默认返回值就是 undefined，因此第二个 then 回调打印的其实就是 undefined+1，显然结果就是 NaN。

对于第三个 then 回调，得到的是第二个 then包装返回的Promise.resolve(undefined)，而 console.log 函数默认返回值就是 undefined，因此第三个 then 回调打印的其实就是 undefined+2，显然结果就是 NaN。

我们继续修改一下代码，看看返回 promise 对象这种情况，如下：

let p1 = new Promise((resolve, reject) => {
  resolve(1);
})

p1.then(res => new Promise((resolve, reject) => {
  reject(2);
}))
  .then(function (res) {
    console.log(res);
  }, function (err) {
    console.log('error:' + err);
  })
复制代码

打印结果如下，这里就不解释了，可以参考上文讲述哈~

error:2
复制代码

接着，我们看看如下代码，直接看它们区别，这对于你理解链式调用会有一定帮助。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(10);
  }, 1000)
})

p1.then(res => { console.log(res); return res + 1 }); // 10
p1.then(res => { console.log(res); return res + 1 }); // 10
p1.then(res => { console.log(res); return res + 1 }); // 10

p1.then(res => { console.log(res); return res + 1 }) // 10
  .then(res => { console.log(res); return res + 1 }) // 11
  .then(res => { console.log(res); return res + 1 }); // 12
复制代码

对于第一种情况，它都是看的 p1的状态，为 resolve，那么执行结果都一样。

对于第二种情况它会有三个 promise 状态，并且是链式调用的，那么下一个回调需要上一个回调的返回值。

promise 的固化 | 多层嵌套

let p1 = new Promise((resolve, reject) => {
  resolve(1);
  reject(2);
})

p1.then(res => console.log(res))
  .then()
  .then()
  .then(res => console.log(res))
  .catch(err => console.log(err));
复制代码

打印结果如下：

1
undefined
复制代码

解释一波，对于中间那两行 .then()，可能有的小狮子们会疑惑这到底是有啥用，我的回答是确实没用，会默认忽略掉！

而 promise 固化即一旦状态发生变化后就不能再更改。

promise 状态依赖

直接看下面这段代码，看看会输出什么？

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('400');
  }, 3000)
});

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(p1);
  }, 1000)
})

p2.then(res => console.log(res))
  .catch(err => console.log('error:'+err));
复制代码

输出结果为3s之后打印 error:400，或许你会疑惑，我 p2明明是resolve状态，为什么会走到catch那里捕获错误呢，这里要解释一下了：

当 promise 状态存在依赖时，它的状态与自身无关了，由依赖来决定，对于上述代码，就是 p2 的状态由依赖 p1 来决定，而p1是 reject，所以会走 catch。

Promise.all | Promise.race

有了上文 promise 的介绍，这两个方法就比较简单了，下文就直接给出例子啦~

Promise.all 使用

传递一个异步请求数组，只有当请求状态全都是成功态，才能调用成功回调函数，同时，它会受 reject 的影响，只要有 reject，那么就不会调用 then 的回调。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(10);
  }, 1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(20);
  }, 2000)
})

let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(30);
  }, 3000)
})

let p4 = Promise.all([p1, p2, p3]);

p4.then(res => console.log(res));
复制代码

输出结果如下：

[ 10, 20, 30 ]
复制代码

Promise.race使用

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(10);
  }, 1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(20);
  }, 2000)
})

let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(30);
  }, 3000)
})

let p4 = Promise.race([p1, p2, p3]);

p4.then(res => console.log(res));
复制代码

输出结果是 10，Promise.race 传参也是一个 promise 相关的数组，但是它不会受 reject 的影响，谁跑的最快就返回谁。

async | await

如果要细说的话，那么本文篇幅就会很多了，但本文文末会提供参考文献，或者大家留下关于 async、await 写的不错的文章链接。

async await和generator的写法很像，就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成await

但async 函数对 Generator 函数做了改进：

1、内置执行器：Generator函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器.也就是说，async 函数的执行，与普通函数一模一样。

2、更好的语义：async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。

3、更广的适用性： co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）

Promise 自测面试题（由易到难 | 满分100分）

第一题（5分）

Promise.resolve()
  .then(() => {
    return new Error('error!!!');
  })
  .then(res => {
    console.log('then:' + res);
  })
  .catch(err => {
    console.log('catch:' + err);
  })
复制代码

then:Error: error!!!
复制代码

第二题（5分）

let promise = new Promise((resolve, reject) => {
  resolve('success1');
  reject('error');
  resolve('success2');
})

promise
  .then((res) => {
    console.log('then:' + res);
  })
  .catch((err) => {
    console.log('catch:' + err);
  });
复制代码

then:success1
复制代码

第三题（10分）

let promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
})

promise.then(() => {
  console.log(3);
})
console.log(4);
复制代码

1
2
4
3
复制代码

第四题（10分）

let p1 = new Promise((resolve, reject) => {
  reject(42);
});

p1.catch((function (value) {
  console.log(value);
  return value + 1;
})).then(function (value) {
  console.log(value);
});
复制代码

42
43
复制代码

第五题（10分）

let p1 = new Promise((resolve, reject) => {
  resolve(42);
});

let p2 = new Promise((resolve, reject) => {
  reject(new Error('TypeError!!!'));
});

p1.then(function (value) {
  console.log(value);
  return p2;
}).then(function (value) {
  console.log(value);
}, function (err) {
  console.log(err);
})
复制代码

42
Error: TypeError!!!
复制代码

第六题（10分）

setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(() => {
    console.log('promise1');
  })
})

Promise.resolve().then(() => {
  console.log('promise2');
  setTimeout(() => {
    console.log('timer2');
  })
})
复制代码

promise2
timer1
promise1
timer2
复制代码

第七题（10分）

Promise.resolve()
  .then(() => { // 外层第一个then
    Promise.resolve().then(() => {
      console.log(1);
    }).then(() => {
      console.log(2);
    })
  })
  .then(() => { // 外层第二个then
    console.log(3);
  })
复制代码

1
3
2
复制代码

第八题（10分）

async function async1() {
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2 end');
}
async1();
console.log(10);
复制代码

async2 end
10
async1 end
复制代码

下面，我们还可以对上述代码进行一个变形，如下代码所示：

async function async1() {
  try {
    await async2();
  } catch (err) {
    console.log('async1 end');
    console.log(err);
  }
}

async function async2() {
  console.log('async2 end');
  return Promise.reject(new Error('error!!!'));
}
async1();
console.log(10);
复制代码

async2 end
10
async1 end
Error: error!!!
复制代码

第九题（15分）

下面这道题是特别特别经典的一道题了！

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');
复制代码

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
复制代码

第十题（15分）

let a;

const b = new Promise((resolve, reject) => {
  console.log('promise1');
  resolve();
}).then(() => {
  console.log('promise2');
}).then(() => {
  console.log('promise3');
}).then(() => {
  console.log('promise4');
});

a = new Promise(async (resolve, reject) => {
  console.log(a);
  await b;
  console.log(a);
  console.log('after1');
  await a;
  resolve(true);
  console.log('after2');
})

console.log('end');
复制代码

promise1
undefined
end
promise2
promise3
promise4
Promise { <pending> }
after1
复制代码

到此，自测面试题就结束了，满分100分，你得到多少分了呢？来评论区留下你的分数吧，你也可以提出疑问，让大伙一起解决~

本文参考

• 【全网首发更新完】迭代器 | 生成器 | promise | async | await
• Async +Await
• Generator用法详解+co

建议大家伙先观看小夏老师的视频再来阅读本文~

最后

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

leetcode-javascript：LeetCode 力扣的 JavaScript 解题仓库，前端刷题路线（思维导图）

小伙伴们可以在Issues中提交自己的解题代码，🤝 欢迎Contributing，可打卡刷题，Give a ⭐️ if this project helped you!

访问超逸の博客，方便小伙伴阅读玩耍~

学如逆水行舟，不进则退
复制代码