我一样弄混ajax与异步的关系正常走学校教学路线的人可能第一个接触的就是ajax刚好又不懂所以可能和我一样弄混。

除上述知识点其他都是凑字数的。

混淆原因

机制类型核心原理典型实现优缺点回调函数通过函数参数传递异步结果异步任务完成后调用回调函数setTimeout、XMLHttpRequest

旧版-

缺点回调地狱、代码可读性差Promise用状态机管理异步操作pending/fulfilled/rejected支持链式调用fetch()、Promise.resolve()-

避免回调嵌套-

try...catch更符合直觉Generator通过迭代器Iterator分段执行异步任务需手动调用

next()

场景类型核心功能技术实现典型案例网络通信浏览器与服务器的异步数据交互不阻塞页面fetch、XMLHttpRequest、WebSocket-

动态加载数据如商品列表-

实时聊天WebSocket异步双向通信定时任务按指定时间间隔执行异步操作setTimeout、setInterval-

轮询获取数据如天气更新-

动画帧控制requestAnimationFrame用户交互响应鼠标、键盘等用户操作异步执行回调事件监听addEventListener-

按钮点击、滚动加载更多-

有点后端基础的都知道异步是在多线程学习时才涉及到的概念那么前端的这个异步有什么作用

这里敲黑板

前端的异步它并非解决多线程问题它只是在表面上达到了多线程一样的效果而是为了在单线程环境下实现非阻塞操作。

JavaScript主线程单线程的特性决定了同步操作会阻塞渲染所以提出了异步的概念解决这个问题

JavaScript

是一种单线程语言运行在浏览器的主线程中。

这意味着在任何时刻JavaScript

代码只能在一个线程上运行。

无论是同步代码还是异步代码它们都是在同一个线程上执行的。

总之别把前端的异步和后端的异步扯上一点关系当一个全新的东西去学就好了。

举个前端异步例子

前端同步就像你洗澡得先等热水器把水烧热才能开始洗。

要是热水器坏了或者水烧得很慢你就只能干等着啥也干不了。

前端异步就好比你一边烧热水一边看电视。

热水烧着就烧着你也不用一直盯着可以先做别的事。

等水烧好了你再洗澡就行。

这样你的时间就被充分利用了不会因为等待热水而浪费时间整个过程也更高效。

异步机制

允许在等待I/O网络请求/文件读取时释放主线程保持页面渲染与处理流畅。

它的核心目的是让程序在等待某个任务完成时能够继续执行其他任务而不是像同步代码那样一直阻塞等待。

事件循环Event

前端中常见的异步机制包括回调函数、Promise、async/await、和

async/await

回调函数是最传统的异步处理方式通过将一个函数作为参数传递给另一个函数并在异步操作完成时调用这个回调函数。

示例代码

callback。

这个callback并没有具体定义和普通参数一样只是提供一个位置。

fetchData

{//这里是故意的延时操作模拟服务器2秒后加载回数据setTimeout(()

{console.log(数据加载完成);callback(数据);},

2000);

模拟了一个异步操作例如从服务器加载数据。

当这个异步操作完成时即

callback(“数据”)

5.执行callback函数参数而此时callback函数参数是(data)

console.log(“接收到数据”,

箭头函数是ES6引入的简洁函数语法用符号定义通常省略function关键字和return适用于单行表达式或需要绑定外层this的场景。

例如传统函数

无独立this继承父级作用域的this不能用作构造函数无prototype属性适合回调函数或方法缩写

回调特点总结

简单直接适用于简单的异步操作。

但容易出现“回调地狱”Callback

3.2

是一种更现代的异步处理方式它代表了一个异步操作的最终完成或失败及其结果值其实写它的时候也会使用回调函数只不过一个传统回调函数实现异步更像嵌套使用后者是链式调用代码可读性会好一丢丢并且Promise有一定的定义和方法方便处理异常情况。

注意这个目前Promise并没有特别合适的中文翻译所以和别人讨论异步涉及它时直接说这个单词就好了。

Promise状态

rejected操作失败Promise任何一个环节出现错误都会切换到这个状态当然也可以手动reject让Promise切换成rejected状态

状态一旦改变从

状态通过第二个回调参数可以忽略处理rejected状态的处理大多数人更习惯使用.catch来处理rejected状态。

.catch()

rejected

{console.log(数据加载完成);resolve(数据);//

reject(错误信息);},

用我自己的角度来理解你想让异步操作就在函数前面加个await如果某个函数里加了await那就必须使用aysnc保证它异步操作生效。

并且await要使用try和catch进行异常捕获。

哪里需要等待异步结果就在哪里加

{console.log(服务器已返回数据);resolve(用户信息和文章列表);

数据加载完成传递结果},

是一种可以暂停和恢复执行的函数虽然它本身不是直接用于异步操作但可以通过手动控制暂停和恢复来实现异步效果。

不过Generator

async/await

{console.log(数据加载完成);resolve(数据);},

2000);});

可以暂停和恢复函数执行。

需要手动管理暂停点和恢复逻辑。

使用场景较少通常被

async/await

前端中常见的异步机制包括回调函数、Promise、async/await和

Generator已经基本介绍了一遍。

说实话没有实践这些理论都很难理解就算理解了也真得很难形象地描述出来。

其中Promise

是目前最常用和推荐的异步处理方式因为它们提供了更简洁、更易读的代码风格和强大的错误处理机制。

是目前最常用和推荐的异步处理方式这么常用又好用的功能自然有人会想办法使用技术和它进行对接。

axios是一个流行的基于Promise的HTTP客户端可以用于浏览器和Node.js环境。

它提供了丰富的功能如拦截请求和响应、取消请求、自动转换JSON数据等。

4.1

axios的核心API返回Promise因此可以与async/await无缝集成

GET请求

axios.get(/api/users).***n(response

console.log(response.data)).catch(error

POST请求

axios与async/await结合使用可以简化异步请求处理

async

axios.get(/api/users/${userId});const

user

axios.get(/api/users/${userId}/posts);const

posts

Promise基础所有请求都返回Promise可以与async/await完美结合拦截器可以拦截请求和响应添加自定义逻辑如认证、日志记录取消请求支持请求取消避免不必要的处理自动转换JSON自动将响应数据转换为JavaScript对象浏览器兼容性支持老版本浏览器提供polyfill

技术对比与选择指南

.***n()类同步代码错误处理.catch()try/catch可读性可能形成回调地狱更接近自然语言适用场景简单异步操作复杂异步流程基础是异步处理的基础建立在Promise之上

5.2

特性axiosfetchPromise基础是是自动JSON转换是否拦截器支持不支持错误处理自动处理网络错误需要手动检查浏览器兼容广泛支持现代浏览器取消请求支持需要polyfill

5.3

同步链式调用方法依次执行每个方法返回this异步链式调用方法中包含异步操作需要特殊处理执行顺序Promise链式调用使用.***n()连接多个异步操作async/await链式调用使用await等待异步操作完成

最佳实践与注意事项

错误处理始终处理异步操作中的错误特别是在使用async/await时并行操作对于不依赖彼此的异步操作使用Promise.all并行执行取消机制对于长时间运行的操作实现取消机制避免资源浪费避免过度使用await对于并行操作await会串行化执行影响性能

6.2

缓存结果对于重复的异步操作考虑缓存结果限制并发对于大量异步操作限制并发数量避免资源耗尽使用Web

Workers合理使用Promise.allSettled当需要等待多个操作完成而不关心个别失败时

6.3

分离异步逻辑将异步操作封装在单独的函数中使用中间件模式对于复杂的异步流程考虑使用中间件模式避免嵌套使用async/await减少回调嵌套文档注释为异步函数添加清晰的文档注释说明返回的Promise状态

异步编程总结与未来展望

异步编程是现代Web开发的核心技能Promise、async/await、axios和链式调用等技术共同构成了JavaScript异步编程的完整生态。

这些技术各有优势合理组合使用可以构建出高效、可维护的应用程序。

随着JavaScript语言的发展异步编程模型将继续演进。

异步迭代器、异步生成器等新特性为异步编程提供了更多可能性。

同时TypeScript等工具也为异步代码提供了更好的类型支持进一步提高了开发效率和代码可靠性。

掌握这些异步编程技术不仅能够解决当前的开发挑战也为应对未来更复杂的异步场景奠定了坚实基础。

通过不断实践和总结开发者可以形成自己高效的异步编程模式构建出更优秀的Web应用。