用Promise实现传入的函数顺序执行的逻辑

 

一、用Promise实现传入的函数顺序执行的逻辑

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

const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

const mergePromise = ajaxArray => {
    // 在这里实现你的代码

};

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

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

解析： 

因为对于异步函数来说，并不会按顺序执行完一个，再执行后一个。
这道题主要考察用Promise控制异步流程，让这些函数一个执行完，再执行下一个。

答案：

      const timeout = ms =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve()
          }, ms)
        })

      const ajax1 = () =>
        timeout(2000).then(() => {
          console.log('1')
          return 1
        })

      const ajax2 = () =>
        timeout(1000).then(() => {
          console.log('2')
          return 2
        })

      const ajax3 = () =>
        timeout(2000).then(() => {
          console.log('3')
          return 3
        })

      const mergePromise = ajaxArray => {
        // 保存数组中的函数执行后的结果
        var arr = []
        // Promise.resolve方法调用时不带参数，直接返回一个resolved状态的 Promise 对象
        var resolved = Promise.resolve()
        ajaxArray.forEach(item => {
          resolved = resolved.then(item).then(res => {
            // 第一次的 then 方法用来执行数组中的每个函数，
            // 第二次的 then 方法接受数组中的函数执行后返回的结果，
            // 并把结果添加到 data 中，然后把 data 返回。
            arr.push(res)
            return arr
          })
        })
        // 遍历结束后，返回一个 Promise，也就是 resolved, 他的 [[PromiseValue]] 值就是 arr
        // 而 data（保存数组中的函数执行后的结果） 也会作为参数，传入下次调用的 then 方法中。
        return resolved
      }

      mergePromise([ajax1, ajax2, ajax3]).then(data => {
        console.log('done')
        console.log(data)
      })

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

二、 Promise的常见面试题

Promise的常见面试题_小草莓蹦蹦跳的博客-优快云博客