再谈JavaScript异步编程
(编辑：jimmy 日期: 2025/12/9 浏览：3 次 )
随着前端的发展，异步这个词真是越来越常见了。假设我们现在有这么一个异步任务：
向服务器发起数次请求，每次请求的结果作为下次请求的参数。
来看看我们都有哪些处理方法：
Callbacks
最先想到也是最常用的便是回调函数了，我们来进行简单的封装：
let makeAjaxCall = (url, cb) => {
// do some ajax
// callback with result
}
makeAjaxCall('http://url1', (result) => {
result = JSON.parse(result)
})
嗯，看起来还不错！但是当我们尝试嵌套多个任务时，代码看起来会是这样的：
makeAjaxCall('http://url1', (result) => {
result = JSON.parse(result)
makeAjaxCall(`http://url2"color: #800000">JavaScript 事件模型：
1、Pub/Sub
在 DOM 事件的处理中，Pub/Sub 是一种很常见的机制，比如我们要为元素加上事件监听：
elem.addEventListener(type, (evt) => {
// handler
})
所以我们是不是也可以构造一个类似的模型来处理异步任务呢？
首先是要构建一个分发中心，并添加 on / emit 方法：
let PubSub = {
events: {},
on(type, handler) {
let events = this.events
events[type] = events[type] || []
events[type].push(handler)
},
emit(type, ...datas) {
let events = this.events
if (!events[type]) {
return
}
events[type].forEach((handler) => handler(...datas))
}
}
然后我们便可以这样使用：
const urls = [
'http://url1',
'http://url2',
'http://url3'
]
let makeAjaxCall = (url) => {
// do some ajax
PubSub.emit('ajaxEnd', result)
}
let subscribe = (urls) => {
let index = 0
PubSub.on('ajaxEnd', (result) => {
result = JSON.parse(result)
if (urls[++index]) {
makeAjaxCall(`${urls[index]}"htmlcode">
let makeAjaxCall = (url) => {
return new Promise((resolve, reject) => {
// do some ajax
resolve(result)
})
}
makeAjaxCall('http://url1')
.then(JSON.parse)
.then((result) => makeAjaxCall(`http://url2"htmlcode">
function* gen() {
let a = yield 1
let b = yield a * 2
return b
}
let it = gen()
it.next() // output: {value: 1, done: false}
it.next(10) // a = 10, output: {value: 20, done: false}
it.next(100) // b = 100, output: {value: 100, done: true}
通过 generator 将我们之前的 makeAjaxCall 函数进行封装：
let makeAjaxCall = (url) => {
// do some ajax
iterator.next(result)
}
function* requests() {
let result = yield makeAjaxCall('http://url1')
result = JSON.parse(result)
result = yield makeAjaxCall(`http://url2"htmlcode">
let makeAjaxCall = (url) => {
return new Promise((resolve, reject) => {
// do some ajax
resolve(result)
})
}
let runGen = (gen) => {
let it = gen()
let continuer = (value, err) => {
let ret
try {
ret = err "htmlcode">
let makeAjaxCall = (url) => {
return new Promise((resolve, reject) => {
// do some ajax
resolve(result)
})
}
;(async () => {
let result = await makeAjaxCall('http://url1')
result = JSON.parse(result)
result = await makeAjaxCall(`http://url2?q=${result.query}`)
result = JSON.parse(result)
result = await makeAjaxCall(`http://url3?q=${result.query}`)
})()
就像我们在上文把 Promise 和 Generator 结合在一起时一样，await 关键字后同样接受一个 Promise。在 async function 中，只有在 await 后的语句完成后剩下的语句才会被执行，整个过程就像我们用 runGen 函数封装 Generator 一样。
以上就是本文总结的几种JavaScript 异步编程模式，希望对大家的学习有所帮助。
上一篇：jquery+css3实现会动的小圆圈效果
下一篇：简单介绍jsonp 使用小结
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？