JavaScript中异步的处理方式有哪些
了解JavaScript中异步的处理方式有哪些?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为蒙山企业提供专业的成都网站制作、网站建设、外贸网站建设,蒙山网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
同步?异步?
首先当然要先理解一下同步及异步分别是指什么。
这两个名词对于初学者来说总是让人感到困惑的,毕竟从中文字面上的意思很容易让人反过来理解,从信息科学的角度来说,同步 指的是一件一件做事,而 异步 则是很多事情在一起并行的处理。
比如我们去银行办理业务,在窗口前排队就是同步执行,而拿到号码先去做别的事情的就是异步执行;通过 Event Loop 的特性,在 JavaScript 处里异步事件可说是轻而易举的
那么在 JavaScript 中处理异步事件的方法是什么呢?
回调函数
我们最熟悉最的就是回调函数了。例如网页与用户进行互动时注册的事件监听器,就需要接收一个回调函数;或是其他 Web API 的各种功能如 setTimeout
、xhr
,也都能通过传递回调函数在用户要求的时机去触发。先看一个 setTimeout
的例子:
// callback function withCallback() { console.log('start') setTimeout(() => { console.log('callback func') }, 1000) console.log('done') }withCallback() // start // done // callback func
在 setTimeout
被执行后,当过了指定的时间间隔之后,回调函数会被放到队列的末端,再等待事件循环处理到它。
注意:也就时因为这种机制,开发者设定给 setTimeout
的时间间隔,并不会精准的等于从执行到触发所经过的时间,使用时要特别注意!
回调函数虽然在开发中十分常见,但也有许多难以避免的问题。例如由于函数需要被传递给其他函数,开发者难以掌控其他函数内的处理逻辑;又因为回调函数仅能配合 try … catch
捕捉错误,当异步错误发生时难以控制;另外还有最著名的“回调地狱”。
Promise
幸好在 ES6 之后出现了 Promise,拯救了身陷在地狱的开发者们。其基本用法也很简单:
function withPromise() { return new Promise(resolve => { console.log('promise func') resolve() }) } withPromise() .then(() => console.log('then 1')) .then(() => console.log('then 2')) // promise func // then 1 // then 2
之前讨论 Event Loop 时没有提到的是,在HTML 5 的Web API 标准 中,Event Loop 新增了微任务队列(micro task queue),而 Promise 正是通过微任务队列来驱动它的;微任务队列的触发时机是在栈被清空时,JavaScript 引擎会先确认微任务队列有没有东西,有的话就优先执行,直到清空后才从队列拿出新任务到栈上。
如上面的例子,当函数回传一个 Promise 时,JavaScript 引擎便会把后传入的函数放到微任务队列中,反复循环,输出了上列的结果。后续的 .then
语法会回传一个新的 Promise,参数函数则接收前一个 Promise.resolve
的结果,凭借这样函数参数传递,让开发者可以管道式的按顺序处理异步事件。
如果在例子中加上 setTimeout
就更能清楚理解微任务与一般任务的差别:
function withPromise() { return new Promise(resolve => { console.log('promise func') resolve() }) } withPromise() .then(() => console.log('then 1')) .then(() => setTimeout(() => console.log('setTimeout'), 0)) .then(() => console.log('then 2')) // promise func // then 1 // then 2 -> 微任务优先执行 // setTimeout
另外,前面所说的回调函数很难处理的异步错误,也可以通过 .catch
语法来捕获。
function withPromise() { return new Promise(resolve => { console.log('promise func') resolve() }) } withPromise() .then(() => console.log('then 1')) .then(() => { throw new Error('error') }) .then(() => console.log('then 2')) .catch((err) => console.log('catch:', err)) // promise func // then 1 // catch: error // ...error call stack
async await
从 ES6 Promise 问世之后,异步代码从回呼地狱逐渐变成了优雅的函数式管道处理,但对于不熟悉度的开发者来说,只不过是从回调地狱变成了 Promise 地狱而已。
在 ES8 中规范了新的 async
/await
,虽然只是 Promise 和 Generator Function组合在一起的语法糖,但通过 async
/await
便可以将异步事件用同步语法来处理,就好像是老树开新花一样,写起来的风格与 Promise 完全不同:
function wait(time, fn) { return new Promise(resolve => { setTimeout(() => { console.log('wait:', time) resolve(fn ? fn() : time) }, time) }) } await wait(500, () => console.log('bar')) console.log('foo') // wait: 500 // bar // foo
通过把 setTimeout
包装成 Promise,再用 await
关键字调用,可以看到结果会是同步执行的先出现 bar
,再出现 foo
,也就是开头提到的将异步事件写成同步处理。
再看一个例子:
async function withAsyncAwait() { for(let i = 0; i < 5; i++) { await wait(i*500, () => console.log(i)) } }await withAsyncAwait() // wait: 0 // 0 // wait: 500 // 1 // wait: 1000 // 2 // wait: 1500 // 3 // wait: 2000 // 4
代码中实现了withAsyncAwait
函数,用 for
循环及 await
关键字反复执行 wait
函数;此处执行时,循环每次会按顺序等待不同的秒数再执行下一次循环。
在使用 async
/await
时,由于 await
关键字只能在 async function 中执行,使用时务必要记得要同时使用。
另外在用循环处理异步事件时,需要注意在 ES6 之后提供的很多 Array 方法都不支持 async
/await
语法,如果这里用 forEach
取代 for
,结果会变成同步执行,每隔 0.5 秒就打印出数字
感谢各位的阅读!看完上述内容,你们对JavaScript中异步的处理方式有哪些大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。
名称栏目:JavaScript中异步的处理方式有哪些
文章来源:http://myzitong.com/article/gpjdgi.html