js是所有编程语言里最容易实现异步操作的【本文受版权保护】【作者：唐霜】语言，设计极其巧妙的setTimeout未经授权，禁止复制转载。【本文首发于唐霜的博客】函数及回调函数设计，让异步编程无声无息的原创内容，盗版必究。转载请注明出处：www.tangshuang.net进入每一个前端程序员的世界。但是，对于异本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。步编程的概念，以及它背后运行的原理，语言【本文受版权保护】【本文首发于唐霜的博客】的设计者为何要设计成这样的语法结构或ap著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。i？本文就试图对这个话题展开谈一谈，聊一【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。聊看上去不起眼的问题。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】异步原创内容，盗版必究。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【本文受版权保护】js借鉴了编程领域的“异步事件模型”实现本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】了异步，如果你想真正了解操作系统层面如何【未经授权禁止转载】转载请注明出处：www.tangshuang.net实现异步，则需要了解这个模型，基于这个模原创内容，盗版必究。本文作者：唐霜，转载请注明出处。型，很多语言都实现了异步编程。简单的说，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net异步是指在执行任务1的时候，先执行它的前【未经授权禁止转载】【版权所有，侵权必究】半部分，并将它的后半部分通过某个机制，放本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。到任务2后面执行。而这个“前半部分”往往本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】是一些条件预设编程，而“后半部分”则是在【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】满足条件，并被触发时执行的目的行为。最为【版权所有】唐霜 www.tangshuang.net【作者：唐霜】典型的就是ajax的实现。
未经授权，禁止复制转载。原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】“同步”和“异步”是一对反义词，同步是指【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。一个任务必须从头到尾执行完毕，在这个过程未经授权，禁止复制转载。【转载请注明来源】中，其他任何任务不得执行。
【本文受版权保护】【原创不易，请尊重版权】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】
而另一个经常讨论的话题是，js是单线程的【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，什么是单线程呢？简单的解释是，一段js【转载请注明来源】【转载请注明来源】代码，会按照解释顺序，将不同部分（作用域转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，块）的程序放于同一调用栈中逐一运行。举【本文首发于唐霜的博客】【转载请注明来源】个例子：
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【转载请注明来源】var a = 1 // 1 a ++ // 2 setTimeout(() => { // 3 console.log(a) // 5 }, 0) a += 10 // 4
程序就像一列火车一样，程序中的每个部分被【转载请注明来源】【转载请注明来源】分别放在一个车厢里，在一种类似$dige【本文受版权保护】【本文受版权保护】st循环的过程中，出于同步的部分被首先按本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。顺序加入到火车头部，也就是上面的1234原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，而异步程序被加入到所处结构中同步部分的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】后面，在检查异步代码时，也是这样的一个流本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】程，因为异步程序内部本身也可能有同步与异【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net步区分。因此，在这列火车中，虽然在代码中【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。这些车厢位置是12354，但在js的线程【作者：唐霜】本文作者：唐霜，转载请注明出处。调用栈中，车厢顺序是12345。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】多线程也是编程世界中非常重要的角色，很多【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】语言具备多线程能力。但是多线程涉及线程安【转载请注明来源】【未经授权禁止转载】全问题，为了保证js的安全性，js语言被【本文受版权保护】【未经授权禁止转载】设计为单线程应用。浏览器本身也是多线程，未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。包括
未经授权，禁止复制转载。【转载请注明来源】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- javascript引擎线程【未经授权禁止转载】
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net- 界面渲染线程转载请注明出处：www.tangshuang.net
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。- 浏览器事件触发线程【版权所有】唐霜 www.tangshuang.net
转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】- Http请求线程原创内容，盗版必究。
【本文首发于唐霜的博客】【版权所有，侵权必究】【版权所有，侵权必究】【作者：唐霜】这些线程在js运行的时候同时运行，不同的【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】任务会被分配到不同的线程中，再通过异步的【本文受版权保护】【转载请注明来源】方式相互通知，js编程只能在js引擎线程【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】中工作，因此说js是单线程的。但是现代H【转载请注明来源】本文作者：唐霜，转载请注明出处。TML标准使得在浏览器环境中（node也【本文首发于唐霜的博客】【转载请注明来源】可以）js具备了多线程编程能力，即通过w转载请注明出处：www.tangshuang.net【未经授权禁止转载】ebworker实现。在主线程和work【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。er线程之间，也是通过异步方式相会调用（【版权所有，侵权必究】【未经授权禁止转载】通知）。多线程可以解放单线程带来的一些运【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net算能力局限，例如，在你的代码中，有一段代本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。码需要对100K行的数据进行处理，每次程原创内容，盗版必究。【转载请注明来源】序运行到这里，你的浏览器就开始卡，即使你本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】把它放在异步任务中进行处理，也会一样。但【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net是，如果你把这段代码放到另外一个work本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。er线程中处理，处理完之后，把结果返回给转载请注明出处：www.tangshuang.net【作者：唐霜】主线程，那效果就不一样，worker线程【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。中的代码不会对界面渲染产生任何影响（当然转载请注明出处：www.tangshuang.net【作者：唐霜】，当内存用完的情况除外），因此，只要使用【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】合理，可以对web应用起到性能提升的作用本文作者：唐霜，转载请注明出处。【未经授权禁止转载】。
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
在我看来，异步是js语言里面最美的特性之【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。一，异步编程让这门语言充满想象力。
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】js异步编程的形式【访问 www.tangshuang.net 获取更多精彩内容】
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【本文受版权保护】转载请注明出处：www.tangshuang.netjs中有多种异步编程的形式，这里说的形式本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。，我们需要在后面去认知看下，并不是说具备【未经授权禁止转载】本文作者：唐霜，转载请注明出处。了这种形式就是异步编程，而是说，这些形式【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。是异步编程的常用手段：
【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】- 回调函数本文作者：唐霜，转载请注明出处。 【转载请注明来源】【原创不易，请尊重版权】原创内容，盗版必究。
- 事件绑定，例如document.addE【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ventListener(‘著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】click’, callba转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ck) 【本文首发于唐霜的博客】【转载请注明来源】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。
- 事件勾子函数，例如window.onlo【作者：唐霜】【本文首发于唐霜的博客】ad = callback 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
- 队列/观察者本文版权归作者所有，未经授权不得转载。 本文版权归作者所有，未经授权不得转载。【作者：唐霜】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- setTimeout、requestAn【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netimationFrame等内置接口 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】【未经授权禁止转载】
- Promise【本文受版权保护】 【本文首发于唐霜的博客】【原创内容，转载请注明出处】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】
- generator本文作者：唐霜，转载请注明出处。 著作权归作者所有，禁止商业用途转载。【作者：唐霜】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】
- await【版权所有】唐霜 www.tangshuang.net 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
- Ajax【作者：唐霜】 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
特别是回调函数，我们要区分回调函数在实际【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。程序中的执行阶段，很多情况下回调函数是在【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】调用栈（所在的程序部分）同步执行的，而非原创内容，盗版必究。【本文首发于唐霜的博客】异步，例如：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】原创内容，盗版必究。【作者：唐霜】function run(callback) {
let a = 1
let b = callback(a)
return a / b
}
这样的回调写法是我们常用手法，但很明显，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。这里的编程跟异步是完全两回事。而下面的代本文版权归作者所有，未经授权不得转载。【作者：唐霜】码则不同：
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】function run(url, callback) {
fetch(url).then(callback)
}
这则是明显的异步回调，所以正如前文所说，【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。异步编程和它的形式没有必然关系。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】Promise著作权归作者所有，禁止商业用途转载。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【作者：唐霜】【版权所有，侵权必究】Promise是js标准，它是异步操作非著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net常典型的一种形式。但在一上来就then之【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】前，让我们重新认识一下这个Promise【原创不易，请尊重版权】未经授权，禁止复制转载。接口。在一开始，我们要区分作为标准的Pr著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。omise和作为接口的Promise，作本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。为标准的Promise规定了它的实现规范转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。和原理逻辑，但具体怎么实现这一规范，不同原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】的厂商并不相同，但是对于开发者而言，它们【本文受版权保护】【作者：唐霜】的表象都是一样的，也就是作为接口的Pro【本文首发于唐霜的博客】【本文首发于唐霜的博客】mise，在同一套规范下，任何浏览器提供【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。的Promise接口都是一致的，我们写相著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】同的代码，在不同浏览器里面跑，应该得到相未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。同结果。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。接口层面，Promise是一个浏览器提供本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】的构造函数，可以被实例化为一个promi【作者：唐霜】本文作者：唐霜，转载请注明出处。se实例。构造时传入一个函数，包含两个参【作者：唐霜】【原创不易，请尊重版权】数，并且在构造时，这个函数会被执行，函数本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。内可进行异步操作，当参数被调用时，pro【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。mise状态被修改。前面讲过，异步分为两【本文首发于唐霜的博客】【原创不易，请尊重版权】部分，而Promise构造函数内传入的参原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】数函数，则是对“前半部分”的实现，“后半【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。部分”的实现则被丢到promise的th原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】en方法中执行。这样的编程风格非常有利于【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】逻辑的分离，因此被广泛使用。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【转载请注明来源】let defer = new Promise((resolve, reject) => {
fetch('xxx').then(resolve).catch(reject)
})
defer.then((res) => { ... }).catch((error) => { ... })
这样的编程风格使得代码分块非常清晰，因此本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。被追捧。不过，使用Promise的时候，【作者：唐霜】【关注微信公众号：wwwtangshuangnet】要注意几个点：
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】- 构造函数传入的函数参数，是同步执行的，也【本文受版权保护】转载请注明出处：www.tangshuang.net就是说它会被置于new所在程序流的同级调著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。用栈中，而非被认为是异步任务置于调用栈末本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net尾，这一点非常重要，对于利用Promis转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】e进行异步编程也是一个关键点 【本文受版权保护】未经授权，禁止复制转载。【本文受版权保护】【作者：唐霜】
- 一个rejected的promise会抛【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。出异常，需要对该一场进行捕获，而捕获方式本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。只能使用它的catch方法，而不要使用t【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ry…catch语法，因为t本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ry…catch是同步的 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【转载请注明来源】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net
- 被catch过的promise不会继续抛【本文受版权保护】【原创不易，请尊重版权】出错误，反而被认为是resolved的，【转载请注明来源】本文作者：唐霜，转载请注明出处。也就是说，.then(a1).catch【作者：唐霜】本文版权归作者所有，未经授权不得转载。(a2).then(a3)中a3无论如何未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。都会被执行 原创内容，盗版必究。【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net
- promise实例不能手动调用resol原创内容，盗版必究。转载请注明出处：www.tangshuang.netve()方法使它完成，一旦一个实例创建，原创内容，盗版必究。【未经授权禁止转载】只能等它自己完成或抛出错误时才能进行后续著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。操作 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【版权所有，侵权必究】未经授权，禁止复制转载。
- 浏览器原生的Promise不支持abor【未经授权禁止转载】【本文首发于唐霜的博客】t操作 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【版权所有，侵权必究】原创内容，盗版必究。
只有当我们熟练掌握了这些坑，才能写出更大【转载请注明来源】本文版权归作者所有，未经授权不得转载。的坑给后人享用。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【作者：唐霜】async/await语法【访问 www.tangshuang.net 获取更多精彩内容】
未经授权，禁止复制转载。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ES6提供了Promise的语法糖，即a【本文受版权保护】【未经授权禁止转载】sync/await语法，它让Promi【版权所有】唐霜 www.tangshuang.net【本文受版权保护】se编程极为简洁，使得代码美观度上升N个原创内容，盗版必究。【转载请注明来源】档次。但是，我们需要对语法糖本身进行复原【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，否则我们无法掌握它的精髓。
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【版权所有，侵权必究】【本文受版权保护】async语法是对new Promise【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】的包装，await语法是对then方法的【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。提炼。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。看上去这句话非常简单，然鹅它所蕴含的能量原创内容，盗版必究。【作者：唐霜】，逐一让你产生无数bug。之所以这么说，【本文受版权保护】转载请注明出处：www.tangshuang.net是因为躺完坑，仍心有余悸。我们来看下as著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ync/await的用法：
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。async function get(url) {
let res = await fetch(url)
let data = await res.json()
return data
}
上面的代码虽然短，但是每一句都极为重要。【未经授权禁止转载】转载请注明出处：www.tangshuang.net第一句通过await等待一个promis本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】e，第二句里面直接使用第一句的res，第【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。三句直接返回data作为async函数的未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】返回值，这和同步编程几乎一样。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】原创内容，盗版必究。await只能用在async函数中。【转载请注明来源】
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【原创不易，请尊重版权】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。虽然await语法后面跟的是一个prom【本文受版权保护】【关注微信公众号：wwwtangshuangnet】ise，并且前面将promise的res【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】olve值进行返回，但是前提是await转载请注明出处：www.tangshuang.net原创内容，盗版必究。只能用在async函数中。原因很简单，因未经授权，禁止复制转载。【作者：唐霜】为await语法是then的语法糖，th【原创内容，转载请注明出处】未经授权，禁止复制转载。en的前提是promise实例，asyn本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。c是new Promise语法糖，只有n【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netew Promise之后，才能使用the著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。n。绕完这一圈，你应该懂了，为何awai【关注微信公众号：wwwtangshuangnet】【转载请注明来源】t一定要用在async函数中。高能！！！未经授权，禁止复制转载。【本文受版权保护】千万要注意async函数中独立的回调函数未经授权，禁止复制转载。【原创不易，请尊重版权】内，如果这个回调函数本身不是async函本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】数，里面的await会报错！！！
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。await后面可以是单个变量。【转载请注明来源】
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【版权所有，侵权必究】async () => {
await defer
}
await可以不返回值给变量。本文作者：唐霜，转载请注明出处。
【原创不易，请尊重版权】【转载请注明来源】著作权归作者所有，禁止商业用途转载。虽然await语法并没有把结果返回赋值给【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。某个变量，但它仍然是一个异步操作，awa原创内容，盗版必究。【原创不易，请尊重版权】it后面的程序代码将会在当前语句reso本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netlve之后才会执行。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。async () => {
await defer1
await defer2
}
await的字面意思是“等待返回结果”。
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。在await关键字后面的defer没有返【转载请注明来源】【版权所有】唐霜 www.tangshuang.net回结果之前，程序不会执行下方的代码。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【本文受版权保护】【转载请注明来源】【本文首发于唐霜的博客】async函数被调用时是同步执行。【原创不易，请尊重版权】
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】当async函数被调用时，处于第一个aw【本文受版权保护】【原创内容，转载请注明出处】ait关键字前面的所有代码和关键字后面的【作者：唐霜】原创内容，盗版必究。半行代码，会立即执行。如果一个async本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。函数从头到尾没有执行到某个await，那未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net么与同步函数无异。
【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】循环中的await的出乎意料。【版权所有，侵权必究】
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文受版权保护】js循环具有非常奇特的作用域，在循环中使【作者：唐霜】本文版权归作者所有，未经授权不得转载。用await，会出现一些你可能意料不到的本文作者：唐霜，转载请注明出处。【未经授权禁止转载】情况。你需要在脑海中谨记，await关键【转载请注明来源】未经授权，禁止复制转载。字是一个等待动作，程序运行到此处时，会进【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】行等待，知道await后面的表达式返回成【原创内容，转载请注明出处】原创内容，盗版必究。功。当进入下一个循环的时候，await上转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】方循环体内的代码，将会在此处被断开。总之本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，如果你发现自己的循环中使用了await【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。，一定要使用真实数据进行调试一下。
原创内容，盗版必究。【原创不易，请尊重版权】【原创不易，请尊重版权】迭代遍历慎用async函数。原创内容，盗版必究。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net另外，千万不能使用asnyc函数作为fo【本文受版权保护】【版权所有】唐霜 www.tangshuang.netrEach、map等迭代函数的参数，迭代【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。函数本身的迭代过程是同步的，但是由于as【本文受版权保护】【未经授权禁止转载】ync函数返回的是promise，因此，【关注微信公众号：wwwtangshuangnet】【作者：唐霜】迭代过程中程序不会等待当前promise【版权所有】唐霜 www.tangshuang.net【本文受版权保护】成功后才进入下一个迭代。
【本文受版权保护】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。async/await异步替代糖本文版权归作者所有，未经授权不得转载。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【未经授权禁止转载】接下来我要构造自己的async/awai【转载请注明来源】本文作者：唐霜，转载请注明出处。t样式语法，之所以这样做，是因为asyn著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netc函数调用时，第一个await前的代码被原创内容，盗版必究。【原创不易，请尊重版权】同步执行，我们希望写一个替代方式，实现真原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。正的全量异步，使得没有任何代码可以阻塞当【原创内容，转载请注明出处】【作者：唐霜】前进程。
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】原创内容，盗版必究。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net具体的实现已经通过著作权归作者所有，禁止商业用途转载。hello-async【版权所有】唐霜 www.tangshuang.net这个库实现了，你可以通过源码查看。这里主【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】要讲一下思路。
【原创内容，转载请注明出处】【原创内容，转载请注明出处】原创内容，盗版必究。new Promise的构造函数参数函数本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。是同步执行的，因此，如果直接在new P本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。romise的参数函数中使用逻辑代码，就【原创内容，转载请注明出处】【未经授权禁止转载】会因此进程阻塞。怎么才能真正全量异步呢？原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。经过研究，then()参数函数的代码是异【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】步执行的。这完全符合我们前面提到的“前半原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】部分”“后半部分”逻辑。因此，我们要构造【未经授权禁止转载】转载请注明出处：www.tangshuang.net一种形式，使得函数一开始执行，就是在th【作者：唐霜】【版权所有】唐霜 www.tangshuang.neten中执行，于是：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【本文受版权保护】【作者：唐霜】function $async(fn) {
return (...args) => {
return new Promise((resolve, reject) => {
Promise.resolve().then(() => fn(...args)).then(resolve).catch(reject)
})
}
}
为什么需要这么复杂的结构呢？我们不能直接原创内容，盗版必究。本文作者：唐霜，转载请注明出处。返回Promise.resolve()，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。虽然直接返回Promise.resolv本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。e()，然后在它的then()里面去写我本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net们的逻辑代码，但是这样在场景中，我们首先未经授权，禁止复制转载。未经授权，禁止复制转载。得到了一个resolved promis【作者：唐霜】【本文受版权保护】e，而非一个pending promis转载请注明出处：www.tangshuang.net【转载请注明来源】e，而返回一个new Promise，再【原创内容，转载请注明出处】【本文首发于唐霜的博客】在构造函数中使用异步操作，则正是我们想要原创内容，盗版必究。【本文首发于唐霜的博客】的场景。通过上面这段代码，就将一个同步函【原创不易，请尊重版权】【本文首发于唐霜的博客】数，转换为真正的异步函数，在调用函数的那未经授权，禁止复制转载。【作者：唐霜】一刻，什么事情都不会发生，异步动作会自动【本文首发于唐霜的博客】【原创内容，转载请注明出处】运行，等到满足条件时，就会resolve【作者：唐霜】【本文受版权保护】。
转载请注明出处：www.tangshuang.net【转载请注明来源】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。function $await(input, then) {
const defering = (input) => {
return Promise.resolve(input)
}
if (typeof then === 'function') {
return new Promise((resolve, reject) => {
defering(input).then($async(then)).then(resolve).catch(reject)
})
}
else {
return defering(input)
}
}
这里$await函数对一个defer或普【本文受版权保护】转载请注明出处：www.tangshuang.net通值进行包裹，返回一个新defer，而这【本文首发于唐霜的博客】【作者：唐霜】个新defer默认会继承defer的返回【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net值。通过上面这两个函数，我们来对asyn【本文首发于唐霜的博客】原创内容，盗版必究。c/await语法进行改造：
【作者：唐霜】【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】async function get(url) {
let res = await fetch(url)
let data = res.json()
return data
}
=>
const get = $async(function(url) {
let res = $await(fetch(url))
let data = $await(res, res => res.json())
return data
})
从句法上看，这两者之间非常相似，不过$a【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netwait不是语法，它无法在循环中使用，也【转载请注明来源】【版权所有】唐霜 www.tangshuang.net不会拦截进程，也就是说，它下方的代码不会本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net在promise resolve之后执行原创内容，盗版必究。【本文受版权保护】，而是直接被执行，要在异步流中逐一被触发本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】，只能将代码写在then这个回调函数中。
未经授权，禁止复制转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。小结原创内容，盗版必究。
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文主要探讨了一些js中异步编程的问题，【作者：唐霜】【本文首发于唐霜的博客】只谈到了冰山一脚，无法展示该问题的全貌。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】不过从中也可以窥见，js异步编程就像一门【本文受版权保护】【关注微信公众号：wwwtangshuangnet】艺术，而想要写出好的艺术品，必须拥有更扎【未经授权禁止转载】转载请注明出处：www.tangshuang.net实的基础功。
【未经授权禁止转载】【转载请注明来源】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。
