面试题 - 图1面试题 - 图2

任务队列机制：

  1. 先知道是否执行的微任务，能够更早执行 ```javascript new Promise(resolve => { console.log(‘promise1’);
    resolve(); // 1. 修改了promise1状态为成功， 没有then可执行 }).then(() => { // 2. 添加到微任务队列 微任务1 同步结束就开始执行 console.log(‘then11’); // 4. 开始执行微任务1，输出 then11 // return new Promise(resolve => { // 没有renturn，不返回promise console.log(‘promise2’); // 输出 promise2 resolve(); // 5. 修改了promise2状态为成功， 没有then可执行 }).then(() => { // 6. 添加到微任务队列 微任务3 这里由于已经知道成功了，就一定会主线程空闲时马上执行，比 微任务2先知道能够执行 console.log(‘then21’); }).then(() => { // 7. 添加到微任务队列 微任务4 执行完3后， loop又从最上面开始看，而不是直接往下执行 console.log(‘then22’); }); }).then(() => { // 3. 添加到微任务队列 微任务2 还未知道微任务1 代码执行情况，他要等到知道执行情况后才执行 console.log(‘then12’); });

// 加return new Promise(resolve => { console.log(‘promise1’);
resolve(); // 1. 修改了promise1状态为成功， 没有then可执行 }).then(() => { // 2. 添加到微任务队列 微任务1 同步结束就开始执行 console.log(‘then11’); // 4. 开始执行微任务1，输出 then11 return new Promise(resolve => { // 有renturn ，任务2最后才执行 console.log(‘promise2’);
resolve();
}).then(() => {
console.log(‘then21’); }).then(() => {
console.log(‘then22’); }); }).then(() => { // 3. 添加到微任务队列 微任务2 还未知道微任务1 代码执行情况，他要等到知道执行情况后才执行 console.log(‘then12’); });

  1. 两个
  3. 1. **Promise.**resolve() ：直接返回一个成功的
  4. 1. **Promise.**reject()  :直接返回一个失败的
  5. 1. **Promise.all**([promise数组:{要求数组中的每一项尽可能都是promise实例}])：返回一个新的promise实例AA，AA成功还是失败，取决于数组中的每一个promise实例是成功还是失败，只要有一个是失败，AA就是失败的，只有都成功AA才是成功的
  6. 1. **Promise.race**：最先知道状态的promise实例，是成功还是失败，决定了AA是成功还是失败 （  api1 / api2 / api3 哪一个接口返回的最快 就最先处理谁   （用处比较少））
  7. ```javascript
  8. // 需求 页面加载前同时发送 多个请求 并且请求都成功后再渲染页面
  9. function fn(interval) {
  10.     return new Promise((resolve, reject) => {
  11.         setTimeout(() => {
  12.             resolve(interval);
  13.         }, interval);
  14.     });
  15. }
  16. let p1 = fn(3000);
  17. let p2 = fn(1000);
  18. // let p3 = Promise.resolve(0);
  19. let p3 = Promise.reject(0);
  20. // promise数组最慢的执行完才执行这里
  21. Promise.all([p1, p2, p3]).then(results => {
  22.     // 不论谁先知道状态，最后结果的顺序和传递数组的顺序要保持一致  如果都是成功的答案是：[3000, 1000, 0]
  23.     console.log(results);
  24. }).catch(reason => {
  25.   // 处理过程中，遇到一个失败，则All立即为失败，结果就是当前实例失败的原因
  26.   console.log(reason); 如果有个失败则返回失败的：0
  27. });
  1. // 需求
  2. //  串行  api1 / api2 / api3 
  4. // 回调函数方式
  5. const api1 = () => {
  6.   return new Promise(resolve => {
  7.     $.ajax({
  8.       url: '/api1',
  9.       success(result1) {
  10.         resolve(result1);
  11.       }
  12.     });
  13.   });
  14. };
  15. const api2 = () => {
  16.   return new Promise(resolve => {
  17.     $.ajax({
  18.       url: '/api2',
  19.       success(result2) {
  20.         resolve(result2);
  21.       }
  22.     });
  23.   });
  24. };
  25. const api3 = () => {
  26.   return new Promise(resolve => {
  27.     $.ajax({
  28.       url: '/api3',
  29.       success(result3) {
  30.         resolve(result3);
  31.       }
  32.     });
  33.   });
  34. };
  36. // 串行
  37. api1().then(result1 => {
  38.   return api2();
  39. }).then(result2 => {
  40.   return api3();
  41. }).then(result3 => {
  43. });
  45. // 并行
  46. Promise.all([api1(), api2(), api3()]).then(results => {
  48. });