本篇内容介绍了“JavaScript中的异步处理方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
在 JavaScript 的世界中,所有代码都是单线程执行的,由于这个“缺陷”,导致 JavaScript 的所有网络操作,浏览器事件,都必须是异步执行。
异步执行可以用回调函数实现。
异步操作会在将来的某个时间点触发一个函数调用。
主流的异步处理方案主要有:回调函数 (CallBack) 、 Promise 、 Generator 函数、 async/await 。
一、回调函数(CallBack)
这是异步编程最基本的方法
假设我们有一个 getData 方法,用于异步获取数据,***个参数为请求的 url 地址,第二个参数是回调函数,如下:
function getData(url, callBack){ // 模拟发送网络请求 setTimeout(()=> { // 假设 res 就是返回的数据 var res = { url: url, data: Math.random() } // 执行回调,将数据作为参数传递 callBack(res) }, 1000) }
我们预先设定一个场景,假设我们要请求三次服务器,每一次的请求依赖上一次请求的结果,如下:
getData('/page/1?param=123', (res1) => { console.log(res1) getData(`/page/2?param=${res1.data}`, (res2) => { console.log(res2) getData(`/page/3?param=${res2.data}`, (res3) => { console.log(res3) }) }) })
通过上面的代码可以看出,***次请求的 url 地址为:/page/1?param=123,返回结果为res1。
李> <李>第二个请求的url地址为://2页?参数=$ {res1。数据},依赖* * *次请求的res1。数据,返回结果为,它的。
李> <李>第三次请求的url地址为://3页?参数=${它。数据},依赖第二次请求的它。数据,返回结果为res3,。
李>
由于后续请求依赖前一个请求的结果,所以我们只能把下一次请求写到上一次请求的回调函数内部,这样就形成了常说的:回调地狱。
<强>二,发布/订阅强>
我们假,定存在一个“信号中心”,某个任务执行完成,就向信号中心”发布”(发布)一个信号,其他任务可以向信号中心”订阅”(订阅,)这个信号,从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”(发布-订阅,模式),又称“观察者模式”(观察者模式)
这个模式有多种实现,下面采用的是本Alman的微小的Pub/Sub,这是jQuery的一个插件
首先,f2向“信号中心“jQuery订阅“完成”信号
jQuery.subscribe (“done",, f2);
f1进行如下改写
function f1 () {, setTimeout(函数(){//大敌;f1的任务代码,jQuery.publish (“done");,},, 1000);,}
jQuery.publish (“done")的意思是,f1执行完成后,向“信号中心“jQuery发布“done"null