学习笔记

按时间倒序排列,记录学习过程中的总结与踩坑经验。

CSS · 2024-11-18

用 Flexbox 实现常见的三种布局

水平垂直居中、两栏自适应、圣杯布局,核心在于理解主轴与交叉轴。
JavaScript · 2024-10-30

彻底理解 Promise 与 async/await

事件循环里微任务的执行时机,是理解异步顺序的关键。见下方示例。
Vue · 2024-10-12

Vue 3 响应式:ref 与 reactive 怎么选

基本类型用 ref,对象结构清晰时用 reactive,注意解构导致的响应式丢失。
HTML · 2024-09-25

表单可访问性:label 与 aria 的正确用法

为控件关联 label,合理使用 aria-* 属性,让表单对读屏软件更友好。
工程化 · 2024-09-08

从零配置一个 Vite + 原生 JS 项目

了解开发服务器、模块热更新与生产构建的基本流程。

示例文章 · JavaScript

彻底理解 Promise 与 async/await

异步是前端绕不开的话题。刚开始学习时,我常被回调地狱和执行顺序搞晕。后来慢慢明白:Promise 本质是对「未来某个结果」的封装,而 async/await 只是让异步代码写起来更像同步。

一、Promise 的三种状态

一个 Promise 只会处于 pending、fulfilled、 rejected 三种状态之一,且状态一旦改变就不可逆。

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('数据加载完成'), 1000);
});

p.then(res => console.log(res))
 .catch(err => console.error(err));

二、用 async/await 改写

同样的逻辑,用 async/await 写会更直观:

async function loadData() {
  try {
    const res = await fetch('/api/list');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('请求失败:', err);
  }
}

三、执行顺序的小测验

下面这段代码会打印出什么顺序?这是理解微任务的经典例子:

console.log('1 同步');
setTimeout(() => console.log('4 宏任务'), 0);
Promise.resolve().then(() => console.log('3 微任务'));
console.log('2 同步');
// 输出:1 → 2 → 3 → 4

结论:同步代码最先执行,微任务(Promise)优先于宏任务(setTimeout)。把这条规律记牢,大部分异步顺序的题目都能推导出来。