lgwebdream / FE-Interview

🔥🔥🔥 前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
https://lgwebdream.github.io/FE-Interview/
Other
6.87k stars 895 forks source link

按要求完成代码 #728

Open lgwebdream opened 4 years ago

lgwebdream commented 4 years ago
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) => {
  // 1,2,3 done [1,2,3] 此处写代码 请写出ES6、ES3 2中解法
};
mergePromise([ajax1, ajax2, ajax3]).then((data) => {
  console.log("done");
  console.log(data); // data 为[1,2,3]
});
// 执行结果为:1 2 3 done [1,2,3]
lgwebdream commented 4 years ago

扫描下方二维码,获取答案以及详细解析,同时可解锁800+道前端面试题。

GolderBrother commented 4 years ago

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;
  });
// ES3
const mergePromise = (ajaxArray) => {
  return new Promise((resolve, reject) => {
    const result = [];
    function next(){
      if(ajaxArray.length === 0) return resolve(result);
      const fn = ajaxArray.shift();
      if(typeof fn === 'function') {
        fn().then(res => {
          result.push(res);
          next();
        }).catch(reject);
      }
    }
    next();
  });
};

// ES6-1
/* const mergePromise = (ajaxArray) => {
  // 1,2,3 done [1,2,3] 此处写代码 请写出ES6、ES3 2中解法
  const asyncFn = async () => {
    let result = [];
    if (Array.isArray(ajaxArray)) {
      while (ajaxArray.length) {
        const fn = ajaxArray.shift();
        if (typeof fn === "function") {
          const data = await fn();
          result.push(data);
        }
      }
    }
    return result;
  };
  return asyncFn();
}; */
// ES6-2
/* const mergePromise = async (ajaxArray) => {
  // 1,2,3 done [1,2,3] 此处写代码 请写出ES6、ES3 2中解法
  let promises = [];
  if (Array.isArray(ajaxArray)) {
    for (let i = 0; i < ajaxArray.length; i++) {
      promises[i] = await ajaxArray[i]();
    }
  }
  return Promise.all(promises);
}; */
mergePromise([ajax1, ajax2, ajax3]).then((data) => {
  console.log("done");
  console.log(data); 
});
// 执行结果为:1 2 3 done [1,2,3]
GolderBrother commented 4 years ago
// 按要求完成代码
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) => {
  // 1,2,3 done [1,2,3] 此处写代码 请写出ES6、ES3 2中解法
  // ES3解法
  /* return new Promise((resolve, reject) => {
    function next(result = []){
      if(Array.isArray(ajaxArray)) {
        if(ajaxArray.length <= 0) resolve(result);
        const fn = ajaxArray.shift();
        if(typeof fn === "function") {
          fn().then(res => {
            result.push(res);
            next(result);
          }).catch(reject);
        }
      }
    };
    next([]);
  }); */

  // ES6解法一
  /* const res = [];
  return new Promise(async (resolve, reject) => {
    try {
      for (let i = 0; i < ajaxArray.length; i++) {
        const fn = ajaxArray[i];
        res[i] = await fn();
      }
      resolve(res);
    } catch (error) {
      reject(error);
    }
  }); */

  // ES6解法二
  /* const result = [];
  const helper = async () => {
    if (Array.isArray(ajaxArray)) {
      let asyncFn;
      while ((asyncFn = ajaxArray.shift())) {
        if (typeof asyncFn === "function") {
          result.push(await asyncFn());
        } else {
          result.push(await asyncFn);
        }
      }
      return result;
    }
  };
  return helper();
   */
  // ES6解法三
  /* async function helper(arrFn) {
    const promises = [];
    for (const fn of arrFn) {
      promises.push(await fn());
    }
    return promises;
  }
  return helper(ajaxArray); */

  // ES6解法四
  async function helper(arrFn) {
    const promises = [];
    for (const fn of arrFn) {
      promises.push(await fn());
    }
    return Promise.all(promises);
  }
  return helper(ajaxArray);
};

mergePromise([ajax1, ajax2, ajax3]).then((data) => {
  console.log("done");
  console.log(data); // data 为[1,2,3]
});
// 执行结果为:1 2 3 done [1,2,3]
gaohan1994 commented 6 months ago

ES6写法

const mergePromise = async ajaxArray => {
  const result = [];

  const createTask = async executer => {
    const currentResult = await executer();
    result.push(currentResult);
  };

  for (let index = 0; index < ajaxArray.length; index++) {
    const executer = ajaxArray[index];
    await createTask(executer);
  }

  return result;
};

ES5写法


const mergePromise = ajaxArray => {
  const result = [];

  return new Promise(resolveAllPromises => {
    const runTask = () => {
      if (ajaxArray.length === 0) {
        return resolveAllPromises(result);
      }

      const executer = ajaxArray.shift();
      executer().then(currentResult => {
        result.push(currentResult);
        runTask();
      });
    };

    runTask();
  });
};
Alicca-miao commented 1 month ago

const mergePromise = (ajaxArray) => { // 1,2,3 done [1,2,3] 此处写代码 请写出ES6、ES3 2中解法 Promise.all(ajaxArray.map((item)=>item())) };

ZhangDaZongWei commented 1 month ago
const mergePromise = (ajaxArray) => {
  const queue = [...ajaxArray];
  const max = 1;
  const result = [];
  let pending = 0;

  return new Promise((resolve) => {
    const run = () => {
      while(queue.length && pending < max) {
        pending++;
        const promise = queue.shift();

        promise().then(val => {
          pending--;
          result.push(val);
          if (result.length === ajaxArray.length) {
            resolve(result);
          } else {
            run();
          }
        })
      }
    }

    run();
  })
}