当前位置：首页 > news >正文

JS 异步从零讲（大白话 + 真实场景 + 可运行案例）

news 2026/5/23 20:26:03

按顺序：回调函数 → Promise → async/await，工作最常用，直接上手。

1. 回调函数（最原始，缺点：回调地狱）

2. Promise（解决回调地狱，链式调用）

new Promise((resolve, reject) => { //异步操作 //成功 resolve(数据) // 失败 reject(错误) }) .then((res) => { //成功处理 }) .catch((err) => { //失败处理 });

真实场景封装定时器异步

function fn(msg, delay) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(msg); }, delay); }); }

链式调用

fn("第一步", "1000") .then((res) => { console.log(res); return fn("第二步", 1000); }) .then((res) => { console.log(res); return fn("第三步", 1000); }) .then((res) => console.log(res));

常用静态方法

Promise.all([p1,p2,p3])：全部成功才成功（并行请求）

Promise.race([p1,p2])：谁先完成取谁

并行 2 个接口，同时发请求

Promise.all([fn("A", 1000), fn("B", 2000)]).then((res) => { console.log(res, "Promise.all"); });

3. async /await（终极写法，最舒服，项目必用）

async function 函数名(){

const 结果 = await Promise对象;

}

上面的定时器用async/await 重写

function fnawait(msg, delay) { return new Promise((resolve, reject) => { setTimeout(() => resolve(msg), delay); }); } async function run() { const r1 = await fnawait("1", 1000); console.log(r1); const r2 = await fnawait("2", 1000); console.log(r2); const r3 = await fnawait("3", 1000); console.log(r3); } run();

捕获错误（try/catch）

async function runDetails() { try { const res = await fn("第一步", 1000); console.log(res); } catch (err) { console.log("出错了", err); } } runDetails();

一句话总结：

1.回调：嵌套地狱，不用

2.Promise:链式，解决嵌套

3.async/await 最简

完整代码：

<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>练习</title> </head> <body> <div id="content"></div> <script> console.log("--- JS 异步 从零讲（大白话 + 真实场景 + 可运行案例） ---"); //按顺序：回调函数 → Promise → async/await，工作最常用，直接上手。 //1. 回调函数（最原始，缺点：回调地狱） // 2. Promise（解决回调地狱，链式调用） new Promise((resolve, reject) => { //异步操作 //成功 resolve(数据) // 失败 reject(错误) }) .then((res) => { //成功处理 }) .catch((err) => { //失败处理 }); //真实场景 封装定时器异步 function fn(msg, delay) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(msg); }, delay); }); } // 链式调用 fn("第一步", "1000") .then((res) => { console.log(res); return fn("第二步", 1000); }) .then((res) => { console.log(res); return fn("第三步", 1000); }) .then((res) => console.log(res)); // 常用静态方法 // Promise.all([p1,p2,p3])：全部成功才成功（并行请求） // Promise.race([p1,p2])：谁先完成取谁 // 并行 2 个接口，同时发请求 Promise.all([fn("A", 1000), fn("B", 2000)]).then((res) => { console.log(res, "Promise.all"); }); // 3. async /await（终极写法，最舒服，项目必用） // async function 函数名(){ // const 结果 = await Promise对象; // } // 上面的定时器 用async/await 重写 function fnawait(msg, delay) { return new Promise((resolve, reject) => { setTimeout(() => resolve(msg), delay); }); } async function run() { const r1 = await fnawait("1", 1000); console.log(r1); const r2 = await fnawait("2", 1000); console.log(r2); const r3 = await fnawait("3", 1000); console.log(r3); } run(); // 捕获错误（try/catch） async function runDetails() { try { const res = await fn("第一步", 1000); console.log(res); } catch (err) { console.log("出错了", err); } } runDetails(); // 一句话总结： //1.回调：嵌套地狱，不用 //2.Promise:链式，解决嵌套 //3.async/await 最简 </script> </body> </html>

查看全文

http://www.jsqmd.com/news/858298/