Promise深入理解

 1.概念：

• Promise是JS中处理异步操作的对象，它表示一个异步操作最终的完成状态(Pengding待定/fulfilled已兑现/rejected已拒绝)以及其结果值。
• 它将处理阶段与异步操作最终结果关联起来→使异步方法像同步一样返回值→注意：返回为Promise对象（在某个时间点提供值）
• 它可以让我们在不知道结果的情况下先拿一个占位符，等结果出来后再自动触发后续操作

1.2 创建Promise实例时传入一个函数作为参数，该函数又要传进去两个函数参数resolve和reject

• resolve(value): 将Promise的状态由Pending转为fulfieed,并将value传递给.then()
• reject(reason):将Promise的状态由Pending转为reject,并将reason传递.catch()

const myPromise = new Promise((resolve, reject) => {// 异步逻辑if (/* 成功 */) {resolve("Success!"); // 传参给 then} else {reject("Error occurred."); // 传参给 catch}
});

1.3Promise的常见方法：Promise.resolve(value)/Promise.reject(reason)/Promise.all(iterable)/Promise.race(iterable)

// 1.new Promise() ---> 创建Promise实例
// 注意：构造函数的代码是同步执行的
const promise = new Promise((resolve, reject) => {// 异步操作if (success) resolve(value); // 成功时调用 resolveelse reject(error);         // 失败时调用 reject
});// ----------------实例方法-----------------
// 2. .then()---> 用于处理Promise成功或失败的状态
promise.then(value => console.log('成功:', value),error => console.error('失败:', error)
);// 3. .catch()---> 用于处理Promise失败的状态
promise.catch(error => console.error('失败:', error));// 4. .finally()---> 用于处理Promise成功或失败的状态
promise.finally(() => console.log('完成'));// ------------静态方法------------------
// 5. Promise.all()--->接收一个 Promise 数组，所有 Promise 成功后才返回结果；只要有一个失败就立即 reject
const p1 = Promise.resolve(3);
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
const p3 = fetch('https://api.example.com/data');Promise.all([p1, p2, p3]).then(values => console.log(values)) // [3, "foo", response].catch(error => console.error(error));// 6.Promise.race(iterable) ---> 接收一个 Promise 数组，只要其中一个 Promise 完成（无论是成功还是失败），就立即返回该结果
Promise.race([p1, p2, p3]).then(data => console.log('请求成功:', data)).catch(err => console.error('请求失败:', err));

2.1同步代码：

• 代码一行行执行，当前没执行完，下一行就必须等着；
• 函数调用后立刻返回结果

function add(a, b) {return a + b;
}const result = add(2, 3); // 立即得到结果：5
console.log(result);      // 输出 5

2.2异步代码：

• 某些操作需要等一段时间才能完成（如网络请求、读取文件、定时器）
• 若直接返回结果，主线程会被阻塞

function fetchData() {setTimeout(() => {return "数据"; // ❌ 这个 return 不会传给外面的变量}, 1000);
}const data = fetchData(); // ❌ data 是 undefined
console.log(data);        // 输出 undefined

原因解析：

• setTimeout若是同步的，1s后执行（阻塞主线程1s）→JS执行机制不允许等到这1S→异步编程出现的原因
• fetchData()本身是同步的，立刻返回（默认返回undefined）→1s后拿到数据，但已无处接收

小疑惑：为啥调用后是undefined?

我们可以这样理解：它是一个声明的函数变量，但并未定义值，因此返回undefined

function foo() {// 没有 return
}console.log(foo()); // 输出: undefined

解决办法：调用fetchData返回一个promise,再通过.then方法获得结果值

function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve("数据"); // 把结果交给 resolve}, 1000);});
}fetchData().then(data => {console.log(data); // ✅ 1秒后输出 "数据"
});

3.Async/await —— 是基于Promise的语法糖，使得异步代码的写法更加更加像同步

async function main() {const data = await fetchData(); // 看起来像同步写法console.log(data);              // 1秒后输出 "数据"
}

3.1 async函数：使用async关键字声明的函数，它调用之后会自动返回一个Promise对象

• 自动包装成Promise,无论返回什么值，都会被Promise.resolve()
• 只能在 async 函数内部使用 await
• 支持 try...catch 错误处理

3.2 await: 暂停当前的执行，直到右侧的 Promise 被解决（fulfilled 或 rejected），然后返回其结果。

• await fetchData()会等到网络请求完成；
• 然后继续执行下一行；
• 如果出错，可用try...catch捕获

4.执行顺序：无论是Promise还是async/await都属于微任务队列，优先级高于宏任务