「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
今天的两位主角【 map、promise 】，想必日常搬砖的小伙伴们都是非常的熟悉。
map：对数组数据进行处理
const arr = [1,2,3]
const arrMap = arr.map(item => item * 2)
console.log('arrMap', arrMap)
promise: 通常会被用来对异步数据进行处理
new Promise((resolve, reject) => {
const data = []
resolve(data)
})
以上就是我们在代码中经常用的一种场景，小伙伴们肯定都很疑惑，这么简单的用法，还值得拿出来特别说明一下吗？有什么意义呢？
别急，我们继续往下看 👀
- 处理数组中，我们常用的有
【 map、for 等 】 - 处理异步函数通常会首选
【 Promise 】 - 当我们需要让异步函数也能像同步函数那样按照代码的顺序 从上往下 依次执行的话，就需要请 Promise 的小伙伴
【 async / await 】来协助完成了
Promise + async + await
- 函数中 return new Promise()，返回一个新创建的 promise 的实例
- 在另一个函数中，想对一个数组格式的数据进行循环遍历，并且每一次的循环中，都需要调用上面 👆 返回 promise 实例的函数
- 当然啦，我们的小伙伴一定会给调用实例的地方加上 await ，同时在 map 的参数前面加上 async
- 结果呢。。。并不如我们所想的那样，会如同同步操作那样，执行完一次循环再去执行下一次的循环，而是不等待，直接去到下一次的循环中。。。
- 你说它这么急干嘛呢，为啥不能等一等呢。。。等一等又能如何呢？？？
Promise 的三个状态
- 这里不得不提的就是 Promise 有三个状态
【 pending、fulfilled、rejected 】 - pending 等待中
- fulfilled
【 即 resolve（）】操作成功 - rejected
【 reject（）】操作失败 - map 循环中的 promise 实例返回的是 pending 状态的，也就是在等待中的，并不是已经操作成功之后的返回值，即使加上了 async / await 返回的也是 pending 状态的
- map 和 promise 的相遇还真是的让人莫名滴 🔥 火 🔥 大呀
能够扑灭 map 与 promise 之间的熊熊大 🔥 火 🔥 的一汪清泉（解决方案）
- 在 map 的外层，再套一层 promise.all
- 最简单的，抛弃 map ，改用 for 来处理循环数据【 不纠结，简单粗暴 】
往往希望的就在一念之间，无论是只为解决当前的业务，还是乐于深究技术点的，都可以从自己的发展路线中找到那一抹亮光。
