一、JavaScript 对异步编程的理解以及异步编程的实现方式1.什么是异步编程首先要理解什么是 异步编程 异步编程是指的异步函数嘛其实异步编程不是一种 语法也不是一种 API更不是 “写异步函数”。异步编程是一种在“存在耗时操作”的前提下仍然能够正确、可控地组织程序执行顺序的思想和模型它解决的不是“怎么异步”而是“在异步存在的世界里程序怎么还能被人理解和管理”。2.异步编程的实现方式1回调函数 的方式在使用回调函数的方式会有一个缺点就是多个回调函数嵌套的时候会造成回调地狱导致代码难以维护可读性差。例如// 1.使用 回调函数 的方式实现异步编程 function asyncAdd(num, callback) { setTimeout(() { callback(num 1); // 模拟异步返回结果 }, 1000); } // 使用回调实现 asyncAdd(1, (res1) { asyncAdd(res1, (res2) { console.log(res1 res2); // 输出: 5 }); });2Promise 的方式Promise 是 ES6 中新增加的一种针对异步编程的新机制它是一个对象使用 Promise 可以将嵌套的回调函数作为链式去调用。但是当链式调用的过多可能会造成代码的语义不明确。// 2.使用 Promise 的方式实现异步编程 function asyncAdd(num) { // 异步代码 return new Promise(resolve { setTimeout(() { resolve(num 1) }, 1000) }) } asyncAdd(1) .then(res1 { return asyncAdd(res1).then(res2 (res1 res2)) }) .then(sum console.log(sum)) // 5 .catch(err console.log(err))3Generator 的方式Generator 函数用 function* 定义可以 暂停 / 恢复 执行当调用 next 方法时才会执行用 yield 让出控制权意思是当函数遇到 yield 会立即暂停不再往下执行遇到异步时 yield 一个 Promise。优点异步代码写得像同步顺序。缺点需要外部执行器如 co 库来自动运行否则手动 next() 很麻烦。Generator 函数的作用不仅仅是作用于异步函数yield 不仅可以暂停 promise 对象也可以 yield 其他值用处很多// 3.使用 Generator 的方式实现异步编程 function asyncAdd(num) { return new Promise((resolve) { setTimeout(() { resolve(num 1); }, 1000); }); } function* gen() { const res1 yield asyncAdd(1); // yield Promise让出控制权 const res2 yield asyncAdd(res1); console.log(res1 res2); // 输出: 5 } // 简单执行器模拟 co 库手动运行 Generator function run(generator) { const it generator(); function next(data) { const result it.next(data); if (result.done) return; result.value.then(next); // 异步完成后继续 next } next(); } run(gen);(4使用 async 函数的方式async 函数是 Generator 和 Promise 实现的一个语法糖它内部自带执行器当遇到 await 语句时如果语句是 promise 对象则会等待 promise 的状态变为 resolved 后才会继续执行之后的语句。因此可以将异步逻辑作为一种同步的顺序来书写当本质还是异步的并且这个函数可以自动执行。// 4. 使用 async 函数 的方式实现异步编程 function asyncAdd(num) { return new Promise((resolve) { setTimeout(() { resolve(num 1); }, 1000); }); } // 使用 async/await 实现 async function asyncFn() { try { const res1 await asyncAdd(1); // 等待 resolve 后继续 const res2 await asyncAdd(res1); console.log(res1 res2); // 输出: 5 } catch (error) { console.error(error); } }