前端开发2025遇到问题总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34507902/article/details/146350425

如何使Promise.all返回数组中结果异常也都能从then正常返回

问题背景

在JavaScript中，Promise.all()方法用于并行执行多个Promise，并等待所有Promise都完成。然而，如果其中一个Promise被拒绝（即抛出错误），Promise.all()方法会立即拒绝，并返回第一个被拒绝的Promise的错误。这可能会导致后续的Promise无法正常执行。

为了解决这个问题，我们需要对每个Promise进行处理，使其在成功时返回一个包含success和item的对象，在失败时返回一个包含success和error的对象。这样，即使其中一个Promise被拒绝，我们也可以在Promise.all()的then方法中正常处理结果。

解决方案

定义一个空数组arr，用于存储处理后的Promise。
定义一个包含三个Promise的数组pro。
定义一个函数safepromise，用于处理Promise。如果Promise成功，则返回一个包含success和item的对象；如果Promise失败，则返回一个包含success和error的对象。
使用map方法，将pro数组中的每个Promise都处理一遍，并将结果存入arr数组中。
使用Promise.all()方法，等待arr数组中的所有Promise都完成。在then方法中，打印所有Promise的结果。

代码示例

// 定义一个空数组
let arr = [];

// 定义一个包含三个Promise的数组
let pro = [
   Promise.resolve("Success 1"),
    Promise.reject("Error 1"),
    Promise.resolve("Success 2"),
];

// 定义一个函数，用于处理Promise
function safepromise(promise) {
  // 如果Promise成功，则返回一个包含success和item的对象
  return promise.then(item => ({ success: true, item })).catch(error => ({ success: false, error }));
}

// 将pro数组中的每个Promise都处理一遍，并将结果存入arr数组中
arr = pro.map(safepromise);

// 打印arr数组
console.log(arr, '===arr');

// 使用Promise.all()方法，等待arr数组中的所有Promise都完成
Promise.all(arr).then(res => {
// 输出所有结果
      console.log("All results:", results);
      // 输出:
      // [
      //   { success: true, result: "Success 1" },
      //   { success: false, error: "Error 1" },
      //   { success: true, result: "Success 2" }
      // ]});

根据代码得到输出结果


```javascript
//for循环，从0开始，循环5次
for(var i=0;i<5;i++){
  //设置一个定时器，延迟1秒后执行
  setTimeout(()=>{
    //输出i的值，并自增1
    console.log(i++)//5 6 7 8 9
  },1000)
}

这段代码的输出结果是：5 6 7 8 9。

解释如下：

首先，我们定义了一个for循环，从0开始，循环5次。
在每次循环中，我们设置了一个定时器，延迟1秒后执行。
在定时器的回调函数中，我们输出i的值，并自增1。
由于定时器是异步执行的，所以每次循环中的定时器都会在1秒后执行。
由于i是全局变量，所以每次循环中的i都会被修改。
当定时器执行时，i的值已经自增了，所以输出的结果是5 6 7 8 9。

面试题,两次输出内容和原因

var length = 10;

function fn() {
  console.log(this.length);
}

let arr = [fn, 1, 3];
arr[0]();

let funcB = arr[0];
funcB();

this 的指向：

在 arr0 中，this 指向 arr，因此 this.length 是 arr.length，值为 3。

在 funcB() 中，this 指向全局对象（window），因此 this.length 是 window.length，值为 10。

关键点：

函数的 this 值取决于调用方式。

通过对象调用函数时，this 指向该对象。

直接调用函数时，this 指向全局对象（非严格模式）或 undefined（严格模式）。