课程进度 53% · 第11/20章第11/20章 · 标签 1/2
— 1 —
异步编程基础
JS是单线程，异步可避免阻塞UI和提升性能。常见异步场景包括定时器、网络请求、事件监听、文件读取等。早期用回调函数（callback）实现异步，易陷入回调地狱。
javascript
1
// 回调地狱示例
2
setTimeout(() => {
3
console.log('A');
4
setTimeout(() => {
5
console.log('B');
6
setTimeout(() => {
7
console.log('C');
8
}, 1000);
9
}, 1000);
10
}, 1000);
回调嵌套多层，代码难以维护。
Promise原理与用法
Promise是ES6引入的异步编程解决方案，避免回调地狱，支持链式调用。
javascript
1
// Promise基本用法
2
const p = new Promise((resolve, reject) => {
3
setTimeout(() => resolve('成功'), 1000);
4
});
5
p.then(res => {
6
console.log(res);
7
}).catch(err => {
8
console.error(err);
9
});
javascript
1
// Promise链式调用
2
function step(msg) {
3
return new Promise(resolve => {
4
setTimeout(() => {
5
console.log(msg);
6
resolve();
7
}, 1000);
8
});
9
}
10
step('A').then(() => step('B')).then(() => step('C'));
Promise有三种状态：pending、fulfilled、rejected。状态不可逆。
— 2 —
async/await用法
async/await是基于Promise的语法糖，使异步代码像同步一样书写。
javascript
1
function delay(ms) {
2
return new Promise(resolve => setTimeout(resolve, ms));
3
}
4
async function run() {
5
await delay(1000);
6
console.log('step1');
7
await delay(1000);
8
console.log('step2');
9
}
10
run();
javascript
1
// 错误处理
2
async function fetchData() {
3
try {
4
let res = await fetch('/api/data');
5
let data = await res.json();
6
console.log(data);
7
} catch (err) {
8
console.error('出错了', err);
9
}
10
}
await只能在async函数中使用，遇到await会等待Promise完成。
常见异步场景
javascript
1
// 定时器与事件监听
2
setTimeout(() => console.log('1秒后'), 1000);
3
setInterval(() => console.log('每2秒'), 2000);
4
document.getElementById('btn').addEventListener('click', () => {
5
alert('点击按钮');
6
});
7
// 网络请求（fetch）
8
fetch('https://api.example.com/data')
9
.then(res => res.json())
10
.then(data => console.log(data))
11
.catch(err => console.error(err));
12
// 文件读取（Node.js）
13
const fs = require('fs');
14
fs.readFile('a.txt', 'utf8', (err, data) => {
15
if (err) throw err;
16
console.log(data);
17
});
Promiseasync/await回调异步fetch