JavaScript中的异步处理方法

本篇内容介绍了“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

JavaScript中的异步处理方法