JS——Promise题目

最新推荐文章于 2025-04-10 17:10:54 发布

GoodLuck_wu5

最新推荐文章于 2025-04-10 17:10:54 发布

阅读量733

点赞数 2

文章标签： js

本文链接：https://blog.youkuaiyun.com/GoodLuck_wu5/article/details/107816740

版权

本文详细解析了JavaScript中的Promise基础、与setTimeout的结合、then、catch、finally的使用，以及all、race的原理。通过多个题目，深入探讨了async/await的运用和错误处理，并给出了大厂面试中关于Promise的常见问题及其解决方案，帮助读者全面掌握Promise的使用技巧和面试要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

了解event loop

event loop的执行顺序：
①一开始整个脚本作为一个宏任务执行
②执行过程中，同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
③当宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
④执行浏览器UI线程的渲染工作
⑤检查是否有Web Worker任务，有则执行
⑥执行完本轮的宏任务，回到②，依此循环，直到宏任务和微任务队列都为空

微任务包括：MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。
宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。

注意： 在所有任务开始的时候，由于宏任务中包括了script，所以浏览器会先执行一个宏任务，在这个过程中你看到的延迟任务(例如setTimeout)将被放到下一轮宏任务中来执行。

执行顺序最主要的是抓住宏任务和微任务的执行顺序。
在这里插入图片描述

1、Promise基础题

1.1 题目一

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve('success')
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

结果：
1 2 4 3

过程分析：

从上至下，先遇到new Promise，执行其中的同步代码1
再遇到resolve(‘success’)，将promise的状态改为了fulfilled并且将值保存下来
继续执行同步代码2
跳出promise，往下执行，碰到promise.then这个微任务，将其加入微任务队列
执行同步代码4
本轮宏任务全部执行完毕，检查微任务队列，发现promise.then这个微任务且状态为resolved，执行它。

1.2 题目二

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1)
console.log('2', promise2)

结果：
promise1
1 Promise{<fulfilled>: "resolve1"}
2 Promise{<pending>}
resolve1

过程分析：

从上至下，先遇到new Promise，执行该构造函数中的代码promise1
碰到resolve函数, 将promise1的状态改变为fulfilled, 并将结果保存下来
碰到promise1.then这个微任务，将它放入微任务队列
promise2是一个新的状态为pending的Promise
执行同步代码1，同时打印出promise1的状态是fulfilled
执行同步代码2，同时打印出promise2的状态是pending
宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为fulfilled，执行它。

1.3 题目三

const fn = () => (new Promise((resolve, reject) => {
  console.log(1)
  resolve('success')
}))
fn().then(res => {
  console.log(res)
})
console.log('start')

结果：
1
start
success

过程分析：

fn()是直接返回了一个new Promise的，而且fn函数的调用是在start之前，所以它里面的内容应该会先执行。
执行同步代码1
碰到resolve函数，将fn()的状态改变为fulfilled，并将结果保存下来
碰到fn().then这个微任务，将它放入微任务队列
执行同步代码start
宏任务执行完毕，查找微任务队列，发现fn().then这个微任务且状态为fulfilled，执行它。

2、Promise结合setTimeout

2.1 题目一

console.log('start')
setTimeout(() => {
  console.log('time')
})
Promise.resolve().then(() => {
  console.log('resolve')
})
console.log('end')

结果：
start
end
resolve
time

过程分析：

刚开始整个脚本作为一个宏任务来执行，对于同步代码直接压入执行栈进行执行，因此先打印出start和end。
setTimout作为一个宏任务被放入宏任务队列(下一个)
Promise.then作为一个微任务被放入微任务队列
本次宏任务执行完，检查微任务，发现Promise.then，执行它
接下来进入下一个宏任务，发现setTimeout，执行。

2.2 题目二

const promise = new Promise((resolve, reject) => {
  console.log(1)
  setTimeout(() => {
    console.log("timerStart")
    resolve("success")
    console.log("timerEnd")
  }, 0)
  console.log(2)
})
promise.then((res) => {
  console.log(res)
})
console.log(4)

结果：
1
2
4
timeStart
timerEnd
success

过程分析：

从上至下，先遇到new Promise，执行该构造函数中的代码1
然后碰到了定时器，将这个定时器中的函数放到下一个宏任务的延迟队列中等待执行
执行同步代码2
跳出promise函数，遇到promise.then，但其状态还是为pending，不执行
执行同步代码4
一轮循环过后，进入第二次宏任务，发现延迟队列中有setTimeout定时器，执行它
首先执行timerStart，然后遇到了resolve，将promise的状态改为fulfilled且保存结果，并将之前的promise.then推入微任务队列
继续执行同步代码timerEnd
宏任务全部执行完毕，查找微任务队列，发现promise.then这个微任务，执行它。

2.3 题目三

Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('start');

结果：
start
promise1
timer1
promise2
timer2

在这里插入图片描述

2.4 题目四

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

结果：
promise1 Promise{<pending>}
promise2 Promise{<pending>}
Error: error!!!
promise1 Promise{<fulfilled>: "success"}
promise2 Promise{<rejected>: Error: error!!!}

3、Promise中的then、catch、finally

总结：

Promise的状态一经改变就不能再改变。
catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
Promise 的 .then 或者 .catch 可以被调用多次, 但如果Promise内部的状态一经改变，并且有了一个值，那么后续每次调用.then或者.catch的时候都会直接拿到该值。
.then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。
.then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。
.then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。
.then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为catch是.then第二个参数的简便写法。
.finally方法也是返回一个Promise，他在Promise结束的时候，无论结果为resolved还是rejected，都会执行里面的回调函数。

3.1 题目一

const 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

构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用。
Promise的状态一经改变就不能再改变。

3.2 题目二

const promise = new Promise((resolve, reject) => {
  reject("error")
  resolve("success2")
})
promise.then(res => {
  console.log("then1: ", res)
}).then(res => {
  console.log("then2: ", res)
}).catch(err => {
  console.log("catch: ", err)
}).then(res => {
  console.log("then3: ", res)
})

结果：
catch: error
then3: undefined

catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
then3也会被执行，那是因为catch()也会返回一个Promise，但由于这个Promise没有返回值，所以打印出来的是undefined。

3.3 题目三

Promise.resolve(1).then(res => {
  console.log(res)
  return 2
}).catch(err => {
  return 3
}).then(res => {
  console.log(res)
})

结果：
1
2

promise 每次调用 .then 或者 .catch 都会返回一个新的 promise，而且return 2会被包装成return Promise.resolve(2)。

先执行resolve(1)，执行第一个then，打印1
return Promise.resolve(2)，不执行catch，执行第二个then，打印2

3.4 题目四

Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

结果：
then: Error: error!!!

返回任意一个非 promise 的值都会被包裹成 promise 对象，因此这里的return new Error('error!!!')也被包裹成了return Promise.resolve(new Error('error!!!'))。

若想抛出错误：

throw new Error('error!!!')
// or
return Promise.reject(new Error('error!!!'))

3.5 题目五

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

结果：
1

.then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。
第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了透传，将resolve(1) 的值直接传到最后一个then里。

3.6 题目六

.finally()，这个功能一般不太用在面试中，但还是应该知道该如何处理。
记住它三个很重要的知识点：

.finally()方法不管Promise对象最后的状态如何都会执行
.finally()方法的回调函数不接受任何的参数，也就是说你在.finally()函数中是没法知道Promise最终的状态是resolved还是rejected的
它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的Promise对象。

function promise1 () {
  let p = new Promise((resolve) => {
    console.log('promise1')
    resolve('1')
  })
  return p
}
function promise2 () {
  return new Promise((resolve, reject) => {
    reject('error')
  })
}
promise1()
  .then(res => console.log(res))
  .catch(err => console.log(err))
  .finally(() => console.log('finally1'))

promise2()
  .then(res => console.log(res))
  .catch(err => console.log(err))
  .finally(() => console.log('finally2'))

结果：
promise1
1
error
finally1
finally2

执行过程：

首先定义了两个函数promise1()和promise2()，先不管接着往下看。
promise1()先被调用了，然后执行里面new Promise的同步代码打印出promise1
之后遇到了resolve(1)，将p的状态改为了fulfilled并将结果保存下来
此时promise1()内的内容已经执行完了，跳出该函数
碰到了promise1().then()，由于promise1的状态已经发生了改变且为resolved因此将promise1().then()这条微任务加入本轮的微任务列表 (这是第一个微任务)
这时候要注意了，代码并不会接着往链式调用的下面走，也就是不会先将.finally加入微任务列表，那是因为.then本身就是一个微任务，它链式后面的内容必须得等当前这个微任务执行完才会执行，因此这里我们先不管.finally()
再往下走碰到了promise2()，其中返回的new Promise中并没有同步代码需要执行，所以执行reject(‘error’)的时候将promise2()中的Promise的状态变为了rejected
跳出promise2()，遇到了promise2().catch()，将其加入当前的微任务队列 (这是第二个微任务)，且链式调用后面的内容得等该任务执行完后才执行，和.then()一样。
本轮的宏任务全部执行完了，来看看微任务列表，存在promise1().then()和promise2().catch()，执行promise1().then()，打印出1，然后遇到了.finally()这个微任务将它加入微任务列表 (这是第三个微任务)
再执行promise2().catch()打印出error，执行完后将.finally2加入微任务加入微任务列表**(这是第四个微任务)**
本轮又全部执行完了，但是微任务列表还有两个新的微任务没有执行完，因此依次执行.finally1和.finally2。

链式调用后面的内容需要等前一个调用执行完才会执行。
就像是这里的.finally()会等promise1().then()执行完才会将.finally()加入微任务队列

4、Promise中的all和race

.all()的作用是接收一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调。
.race()的作用也是接收一组异步任务，然后并行执行异步任务，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。

.all()后面的.then()里的回调函数接收的就是所有异步操作的结果。而且这个结果中数组的顺序和Promise.all()接收到的数组顺序一致！

有一个场景是很适合用all的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

4.1 题目一

function runAsync (x) {
  const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
function runReject (x) {
  const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x))
  return p
}
Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
  .then(res => console.log('res:', res))
  .catch(err => console.log('err:', err))

结果：
// 1s后输出
1
3
// 2s后输出
2
err: Error: 2  (这个是catch获取到的)
// 4s后输出
4

.catch是会捕获最先的那个异常，在这道题目中最先的异常就是runReject(2)的结果。如果一组异步操作中有一个异常都不会进入.then()的第一个回调函数参数中。

4.2 题目二

使用.race()方法，它只会获取最先执行完成的那个结果，其它的异步任务虽然也会继续进行下去，不过race已经不管那些任务的结果了。

function runAsync (x) {
  const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
Promise.race([runAsync(1), runAsync(2), runAsync(3)])
  .then(res => console.log('result: ', res))
  .catch(err => console.log(err))

结果：
// 1s后输出
resule: 1    （这是then获取到的）
// 2s后输出
2
// 3s后输出
3

race使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作

5、async/await

await会阻塞原宏任务后面代码的执行，在本轮宏任务全部执行完之后，再来执行刚刚 await后面的内容

5.1 题目一

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

结果：
async1 start
async2
start
async1 end

过程分析：

首先是创建了两个函数的，我们先不看函数的创建位置，而是看它的调用位置
发现async1()被调用了，先去看看调用的内容
执行函数中的同步代码console.log("async1 start")，之后碰到了await，它会阻塞async1后面代码的执行，因此会先去执行async2()中的同步代码console.log("async2")，然后跳出async1()
跳出async1函数后，执行同步代码console.log('start')
在一轮宏任务全部执行完之后，再来执行await后面的内容console.log("async1 end")。

await和Promise的区别： new Promise()并不会阻塞后面代码的执行。

注意： await后面代码也是在本轮宏任务中执行，只不过是最后执行罢了，但还是同一轮。

5.2 题目二

async function async1 () {
  console.log('async1 start')
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 success')
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

结果：
script start
async1 start
promise1
script end

在async1()中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，因此相当于一直在await，await，await却始终没有响应，所以在await之后的内容是不会执行的，也包括async1后面的 .then。

5.3 题目三

async function testSometing() {
  console.log("执行testSometing")
  return "testSometing"
}

async function testAsync() {
  console.log("执行testAsync")
  return Promise.resolve("hello async")
}

async function test() {
  console.log("test start...")
  const v1 = await testSometing()
  console.log(v1)
  const v2 = await testAsync()
  console.log('v2:', v2)
}

test()

var promise = new Promise(resolve => {
  console.log("promise start...")
  resolve("promise")
})
promise.then(val => console.log('val:', val))

console.log("test end...")

结果：
test start...
执行testSometing
promise start...
test end...
testSometing
执行testAsync
val: promise
v2: hello async

6、async处理错误

如果在async函数中抛出了错误，则终止错误结果，不会继续向下执行。

如果想要使得错误的地方不影响async函数后续的执行的话，可以使用try catch
也可以直接在Promise.reject后面跟着一个catch()方法

6.1 题目一

async function async1 () {
  try {
    await Promise.reject('error!!!')
  } catch(e) {
    console.log(e)
  }
  console.log('async1');
  return Promise.resolve('async1 success')
}
async1().then(res => console.log(res))
console.log('script start')

结果：
script start
error!!!
async1
async1 success

6.2 题目二

async function async1 () {
  // try {
  //   await Promise.reject('error!!!')
  // } catch(e) {
  //   console.log(e)
  // }
  await Promise.reject('error!!!')
    .catch(e => console.log(e))
    
  console.log('async1');
  return Promise.resolve('async1 success')
}
async1().then(res => console.log(res))
console.log('script start')

结果与上一个一样：
script start
error!!!
async1
async1 success

这里的执行顺序有点不明白

7、综合题

7.1 题目一

const first = () => (new Promise((resolve, reject) => {
  console.log(3)
  let p = new Promise((resolve, reject) => {
    console.log(7)
    setTimeout(() => {
      console.log(5)
      resolve(6)
      console.log(p)
    }, 0)
    resolve(1)
  })
  resolve(2)
  p.then((arg) => {
    console.log(arg)
  })
}))
first().then((arg) => {
  console.log(arg)
})
console.log(4)

结果：
3
7
4
1
2
5
Promise{<fulfilled>: 1}

过程分析：

first()返回的是一个new Promise()，因此先执行里面的同步代码3
接着又遇到了一个p = new Promise()，直接执行里面的同步代码7
在p中，遇到了一个定时器，先将它放到下一个宏任务队列里不管它，接着向下走
碰到了resolve(1)，这里就把p的状态改为fulfilled，且保存返回值1
跳出p，碰到了resolve(2)，这里的resolve(2)，表示的是把first()返回的那个Promise的状态改为fulfilled，且保存返回值2
然后碰到了p.then()，将它加入本次循环的微任务队列，等待执行
跳出first()，遇到了first().then()，将它加入本次循环的微任务队列
然后执行同步代码4
本轮的同步代码全部执行完毕，查找微任务队列，发现p.then()和first().then()，依次执行，打印出1和2
本轮任务执行完毕了，执行下一个宏任务，即执行定时器里的内容，先执行同步代码5
然后又遇到了一个resolve(6)，它是放在p里的，但是p的状态在之前已经发生过改变了，因此这里就不会再改变，也就是说resolve(6)相当于没任何用处，因此打印出来的p为Promise{<fulfilled>: 1}。

7.2 题目二

const async1 = async () => {
  console.log('async1');
  setTimeout(() => {
    console.log('timer1')
  }, 2000)
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 end')
  return 'async1 success'
} 
console.log('script start');
async1().then(res => console.log(res));
console.log('script end');
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .catch(4)
  .then(res => console.log(res))
setTimeout(() => {
  console.log('timer2')
}, 1000)

结果：
script start
async1
promise1
script end
1
timer2
timer1

async()中await的new Promise要是没有返回值的话则不执行后面的内容
.then函数中的参数期待的是函数，如果不是函数的话会发生值透传

7.3 题目三

const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('resolve3');
    console.log('timer1')
  }, 0)
  resolve('resovle1');
  resolve('resolve2');
}).then(res => {
  console.log(res)
  setTimeout(() => {
    console.log(p1)
  }, 1000)
}).finally(res => {
  console.log('finally：', res)
})

结果：
resolve1
finally: undefined
timer1
Promise{<fulfilled>: undefined}

Promise的状态一旦改变就无法改变
finally不管Promise的状态是resolved还是rejected都会执行，且它的回调函数是接收不到Promise的结果的，所以finally()中的res是一个迷惑项
最后一个定时器打印出的p1其实是.finally的返回值，我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值，而这道题中.finally上一个Promise是.then()，但是这个.then()并没有返回值，所以p1打印出来的Promise的值会是undefined，如果你在定时器的下面加上一个return 1，则值就会变成1

8、大厂面试题

8.1 使用Promise实现每隔1秒输出1,2,3

可以用Promise配合着reduce不停的在promise后面叠加.then

const arr = [1, 2, 3]
arr.reduce((p, x) => {
  return p.then(() => {
    return new Promise(r => {
      setTimeout(() => r(console.log(x)), 1000)
    })
  })
}, Promise.resolve())

简便写法：

const arr = [1, 2, 3]
arr.reduce((p, x) => p.then(() => new Promise(r => setTimeout(() => r(console.log(x)), 1000))), Promise.resolve())

方便理解，转换成一段伪代码：

Promise.resolve()
  .then(() => {
    return new Promise(r => {
      setTimeout(() => {
        r(console.log(1))
      }, 1000)
    })
  })
  .then(() => {
    return new Promise(r => {
      setTimeout(() => {
        r(console.log(2))
      }, 1000)
    })
  })
  .then(() => {
    return new Promise(r => {
      setTimeout(() => {
        r(console.log(3))
      }, 1000)
    })
  })

拓展题
与上面的写法只改变了p.then(() => {}) 少了箭头函数

const arr = [1, 2, 3];
arr.reduce((p, x) => p.then(new Promise(r => setTimeout(() => r(console.log(x)), 1000))), Promise.resolve());

但是结果变了，是一秒后同时输出1、2、3。

方便理解，转换成一段伪代码：

Promise.resolve()
  .then(new Promise(r => {
    setTimeout(() => {
      r(console.log(1))
    }, 1000)
  }))
  .then(new Promise(r => {
    setTimeout(() => {
      r(console.log(2))
    }, 1000)
  }))
  .then(new Promise(r => {
    setTimeout(() => {
      r(console.log(3))
    }, 1000)
  }))

.then() 第一个参数不是函数，会造成什么后果呢？值透析。
发生值透析，p.then()的代码依旧会执行，只是不会保存返回值，也不会改变状态。
所以在这里，三个then()后面都是值透析，所以直接进行同步任务操作，因为有定时器，所以讲三个定时器放进宏任务队列，又因为都是定时1000，因此基本同时打印。

8.2 使用Promise实现红绿灯交替重复亮

红灯3秒亮一次，黄灯2秒亮一次，绿灯1秒亮一次；如何让三个灯不断交替重复亮灯？（用Promise实现）三个亮灯函数已经存在：

function red() {
  console.log('red')
}
function green() {
  console.log('green')
}
function yellow() {
  console.log('yellow')
}

答案：

function red() {
  console.log('red')
}
function green() {
  console.log('green')
}
function yellow() {
  console.log('yellow')
}

function light(timer, color) {
  return new Promise(resolve => {
    setTimeout(() => {
      color()
      resolve()
    }, timer)
  })
}

function step() {
  Promise.resolve().then(() => {
    return light(3000, red)
  })
  .then(() => {
    return light(2000, green)
  })
  .then(() => {
    return light(1000, yellow)
  })
  .then(() => {
	return step()
  })
}

step()

8.3 实现mergePromise函数，把传进去的数组按顺序先后执行，并且把返回的数据先后放到数组data中

题目代码：

const time = (timer) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, timer)
  })
}
const ajax1 = () => time(2000).then(() => {
  console.log(1)
  return 1
})
const ajax2 = () => time(1000).then(() => {
  console.log(2)
  return 2
})
const ajax3 = () => time(1000).then(() => {
  console.log(3)
  return 3
})

function mergePromise () {
  // 在这里写代码
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
  console.log("done")
  console.log(data) // data 为 [1, 2, 3]
})

// 要求分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

答案：

function mergePromise (ajaxArray) {
  // 存放每个ajax的结果
  const data = []
  let promise = Promise.resolve()
  ajaxArray.forEach(ajax => {
  	// 第一次的then为了用来调用ajax，利用值透析
  	// 第二次的then是为了获取ajax的结果
    promise = promise.then(ajax).then(res => {
      data.push(res)
      return data // 把每次的结果返回
    })
  })
  // 最后得到的promise它的值就是data
  return promise
}

解题思路：

有点类似于.all()，但.all()是并行执行，而这里需要的是一个执行完毕再执行下一个
定义一个数组data用于保存所有异步操作的结果
初始化一个const promise = Promise.resolve()，然后循环遍历数组，在promise后面添加执行ajax任务，同时要将添加的结果重新赋值到promise上。
利用值透析，调用ajax

8.4 封装一个异步加载图片的方法

只需要在图片的onload函数中，使用resolve返回一下就可以了。

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = function() {
      console.log("一张图片加载完成")
      resolve(img)
    }
    img.onerror = function() {
    	reject(new Error('Could not load image at' + url))
    }
    img.src = url
  })
}

8.5 限制异步操作的并发个数并尽可能快的完成全部

题目：
有8个图片资源的url，已经存储在数组urls中。而且已经有一个函数function loadImg，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。
但有一个要求，任何时刻同时下载的链接数量不可以超过3个。

请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。
题目代码：

var urls = [
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting1.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting2.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting3.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting4.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting5.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn6.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn7.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn8.png",
]
function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = function() {
      console.log("一张图片加载完成")
      resolve(img)
    }
    img.onerror = function() {
    	reject(new Error('Could not load image at' + url))
    }
    img.src = url
  })
}

答案：

function limitLoad(urls, handler, limit) {
  let sequence = [].concat(urls) // 复制urls
  // 这一步是为了初始化 promises 这个"容器"
  let promises = sequence.splice(0, limit).map((url, index) => {
    return handler(url).then(() => {
      // 返回下标是为了知道数组中是哪一项最先完成
      return index
    })
  })
  // 注意这里要将整个变量过程返回，这样得到的就是一个Promise，可以在外面链式调用
  // .reduce((pCollect, url) => {...}, Promise.resolve())
  return sequence
    .reduce((pCollect, url) => {
      return pCollect
        .then(() => {
          return Promise.race(promises) // 返回已经完成的下标
        })
        .then(fastestIndex => { // 获取到已经完成的下标
        	// 将"容器"内已经完成的那一项替换
          promises[fastestIndex] = handler(url).then(
            () => {
              return fastestIndex // 要继续将这个下标返回，以便下一次变量
            }
          )
        })
        .catch(err => {
          console.error(err)
        })
    }, Promise.resolve()) // 初始化传入
    .then(() => { // 最后三个用.all来调用
      return Promise.all(promises)
    })
}
limitLoad(urls, loadImg, 3)
  .then(res => {
    console.log("图片全部加载完毕")
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

解题思路：

要求保证每次并发请求的数量为3，那么我们可以先请求urls中的前面三个(下标为0,1,2)，并且请求的时候使用Promise.race()来同时请求，三个中有一个先完成了(例如下标为1的图片)，我们就把这个当前数组中已经完成的那一项(第1项)换成还没有请求的那一项(urls中下标为3)。
直到urls已经遍历完了，然后将最后三个没有完成的请求(也就是状态没有改变的Promise)用Promise.all()来加载它们。

流程图：
在这里插入图片描述
替换那里看不懂