前端异步方式

参考 https://segmentfault.com/a/1190000015711829
回调函数、promise、generator、async/await
回调函数:
(1) 当前业务依赖于上层数据,上层业务又依赖于更上层数据,如果这时候还用回调函数来进行异步,层层嵌套,就会出现回调地狱问题。
(2) 控制反转:自己程序的一部分交给第三方,无法控制第三方对回调函数的执行,就可能出现调用过早/过晚,参数没有正确传递等问题。
promise:
(1) 解决回调地狱:多个then级联,进行纵向扩展。
(2) 解决回调未调用:没有任何东西(包括JavaScript错误)能阻止promise向你通知它的决议,成功/拒绝总会调用其中一个,包含错误的情况下可能看不到期望的结果,但回调依然被调用了。
(3) 解决不是所有thenable都值得信任:如果向promise传递一个非promise、非thenable的立即值,会得到一个用它填充的promise对象,如果向promise传递一个promise对象,会得到同一个promise。
generator:*+yield
异步操作的同步表达方式。既不立即执行,也不返回运行结果,而是返回一个指向内部状态的指针对象,一个遍历器对象。调用next()方法才会逐步往下执行。
async/await:async+await
(1) generator的改进方式。会自动执行,语义更好,表示函数里面有异步操作,await()表示紧跟在其后的表达式需要等待结果。
(2) 与yeild不同的是,yield命令后面只能是Thunk函数或者Promise对象,但await()命令后面,可以是Promise对象或者原始类型的值,这时候等同于同步操作。
(3) async函数返回值是promise对象,比generator的Iterator对象更好,可以用then方法指定下一步。结合了promise和generator。

前端异步请求是一种提高Web应用响应速度的技术,在现代前端开发中广泛应用。随着Web应用程序复杂性增加,用户体验重要性日益凸显,异步请求技术应运而生,无需重新加载整个页就能更新部分网页,提升了用户体验[^1]。 AJAX(Asynchronous JavaScript and XML)是实现前端异步请求的常见技术,即“异步Javascript和XML”。它通过JavaScript向服务器发送异步请求,以XML或JSON格式接收数据,并在客户端处理这些数据,从而在后台与服务器交换数据,实现网页的异步更新[^2]。 前端异步处理有多种实现方式,包括传统解决方案和ES6+解决方案。传统解决方案有回调函数和事件触发;ES6+解决方案有Promise、generator函数(如generator - thunk、generator - promise)、async和await 。例如,使用Promise处理异步请求,可将其封装为返回Promise对象的函数,请求成功后用Promise.then()获取数据;在并发请求场景下,可用Promise.all()将多个请求合并为一个Promise对象,待所有请求完成后一次性处理结果。async/await是基于Promise的语法糖,让异步代码更像同步代码,简洁易读,示例代码如下: ```javascript async function fetchData() { const message = await new Promise((resolve, reject) => { setTimeout(() => { resolve('Data fetched'); }, 1000); }); console.log(message); } fetchData(); ``` 前端异步请求的应用场景丰富。在浏览器端,异步操作常通过事件驱动实现,如用户点击按钮触发事件,事件监听器处理事件时可能需进行异步操作,像向服务器发送请求。在表单验证中,需进行检查用户名是否已注册、验证手机验证码是否正确等异步操作,使用Promise能方便处理并继续后续验证步骤。此外,还可用于错误处理,使用Promise.catch()捕获网络请求超时、服务器返回错误等异常情况并处理[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值