es6学习笔记之Async函数基本教程

2024-02-24 00:28:04 58

本文介绍的是关于es6中Async函数的相关内容，非常出来供大家参考学习，需要的朋友们下面来看看详细的介绍：

async函数

async函数，使得异步操作变得更加方便。它是Generator函数的语法糖。

Generator函数，依次读取两个文件:

varfs=require('fs');
varreadFile=function(fileName){
returnnewPromise(function(resolve,reject){
fs.readFile(fileName,function(error,data){
if(error)reject(error);
resolve(data);
});
});
};
vargen=function*(){
varf1=yieldreadFile('/etc/fstab');
varf2=yieldreadFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};

写成async函数，就是下面这样:

varasyncReadFile=asyncfunction(){
varf1=awaitreadFile('/etc/fstab');
varf2=awaitreadFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};

async函数对Generator函数的改进，体现在以下四点:

1）内置执行器

Generator函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

varresult=asyncReadFile();

上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像Generator函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

2）更好的语义

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

3）更广的适用性

co模块约定，yield命令后面只能是Thunk函数或Promise对象，而async函数的await命令后面，可以是Promise对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

4）返回值是Promise

async函数的返回值是Promise对象，这比Generator函数的返回值是Iterator对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个Promise对象，而await命令就是内部then命令的语法糖。

一、基本用法

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

functiontimeout(ms){
returnnewPromise((resolve)=>{
setTimeout(resolve,ms);
});
}
asyncfunctionasyncPrint(value,ms){
awaittimeout(ms);
console.log(value);
}
asyncPrint('helloworld',5000);

上面代码指定5000毫秒以后，输出helloworld。

由于async函数返回的是Promise对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式:

asyncfunctiontimeout(ms){
awaitnewPromise((resolve)=>{
setTimeout(resolve,ms);
});
}
asyncfunctionasyncPrint(value,ms){
awaittimeout(ms);
console.log(value);
}
asyncPrint('helloworld',5000);

async函数多种使用形式

//函数声明
asyncfunctionfoo(){}
//函数表达式
constfoo=asyncfunction(){};
//对象的方法
letobj={asyncfoo(){}};
obj.foo().then(...)
//Class的方法
classStorage{
constructor(){
this.cachePromise=caches.open('avatars');
}
asyncgetAvatar(name){
constcache=awaitthis.cachePromise;
returncache.match(`/avatars/${name}.jpg`);
}
}
conststorage=newStorage();
storage.getAvatar('hzzly').then(…);
//箭头函数
constfoo=async()=>{};

二、语法

async函数的语法规则总体上比较简单，难点是错误处理机制。

返回Promise对象

async函数返回一个Promise对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。

asyncfunctionf(){
return'helloworld';
}
f().then(v=>console.log(v))
//"helloworld"

Promise对象的状态变化

async函数返回的Promise对象，必须等到内部所有await命令后面的Promise对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

asyncfunctiongetTitle(url){
letresponse=awaitfetch(url);
lethtml=awaitresponse.text();
returnhtml.match(/([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
//"ECMAScript2017LanguageSpecification"</pre>
<p>上面代码中，函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。</p>
<p><strong>三、使用注意点</strong></p>
<p>await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中。</p>
<pre>
asyncfunctionmyFunction(){
try{
awaitsomethingThatReturnsAPromise();
}catch(err){
console.log(err);
}
}
//另一种写法
asyncfunctionmyFunction(){
awaitsomethingThatReturnsAPromise()
.catch(function(err){
console.log(err);
};
}</pre>
<p>多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。</p>
<pre>
//异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。
letfoo=awaitgetFoo();
letbar=awaitgetBar();
//写法一
let[foo,bar]=awaitPromise.all([getFoo(),getBar()]);
//写法二
letfooPromise=getFoo();
letbarPromise=getBar();
letfoo=awaitfooPromise;
letbar=awaitbarPromise;</pre>
<p>await命令只能用在async函数之中，如果用在普通函数，就会报错。</p>
<p>更多关于async函数的使用例子可以点击查看这篇文章：https://www.nhooo.com/article/113475.htm</p>
<p><strong>总结</strong></p>
<p>以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。</p></section>
                </div>
            </div>
            <!--文章阅读上下按钮-->  
            <nav>
                                    <span class="meta-nav"><a href="/article/237204.html" title="Linux下模拟http的get/post请求（curl or wget）详解" se_prerender_url="complete">上一篇<br>Linux下模拟http的get/post请求（curl or wget）详解</a></span>
                
                                    <span class="meta-nav"><a href="/article/237202.html" title="JavaWeb中web.xml初始化加载顺序详解" se_prerender_url="complete">下一篇<br>JavaWeb中web.xml初始化加载顺序详解</a></span>
                            <div class="clear"></div>
            </nav>
            <!-- 文章推荐 -->
            <div class="article-recommend">         
                <h3>热门推荐</h3> 
                                        <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识 看了之后再验房心里有底">毛坯房验收经验和常识 看了之后再验房心里有底</a></div>  
                                        <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接 二手房收房注意问题">二手房收房如何交接 二手房收房注意问题</a></div>  
                                        <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格 商品房验收合格的标准">专业验收毛坯房的价格 商品房验收合格的标准</a></div>  
                                        <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收 精装房请验房师有用吗">精装房怎么验收 精装房请验房师有用吗</a></div>  
                                        <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师 验房师有哪些作用呢">一般要到哪里找验房师 验房师有哪些作用呢</a></div>  
                                        <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱 验房师费用是多少">请人验房一般是多少钱 验房师费用是多少</a></div>  
                                        <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积 建筑面积和使用面积怎么算">怎样测量房子面积 建筑面积和使用面积怎么算</a></div>  
                                        <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么 仔细检查不松懈">收房需要注意什么 仔细检查不松懈</a></div>  
                                        <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么 主要作用介绍">收房时三书一证一表是什么 主要作用介绍</a></div>  
                                        <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些 本文为你一一讲解">交房时交房税费有哪些 本文为你一一讲解</a></div>  
                                        <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么 要做哪些准备呢">验房都需要验什么 要做哪些准备呢</a></div>  
                                        <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗 毛坯房装修完如何验收">毛坯房验房师有必要请吗 毛坯房装修完如何验收</a></div>  
                                        <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div>  
                                        <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div>  
                                        <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包</a></div>  
                                        <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div>  
                                        <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div>  
                                        <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望 卫浴间装修巧支招">小空间大浴望 卫浴间装修巧支招</a></div>  
                     
            </div>
            <div class="add-gg">
                <!-- 文章内页广告 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-4387516810452807"
                     data-ad-slot="9131157744"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
        <!--侧边栏-->
        <div id="sidebar">
            <li class="sidebar-box">
                <h3 class="widget-title">随机推荐</h3>
                <ul>
                                            <li>
                            <a href="/article/93527.html" title="监控录像一般保存多久">监控录像一般保存多久</a>
                        </li>
                                            <li>
                            <a href="/article/93528.html" title="男女认识多久可以牵手">男女认识多久可以牵手</a>
                        </li>
                                            <li>
                            <a href="/article/93529.html" title="许晋亨为什么不娶黎姿">许晋亨为什么不娶黎姿</a>
                        </li>
                                            <li>
                            <a href="/article/93530.html" title="女性腰肌劳损有哪些症状">女性腰肌劳损有哪些症状</a>
                        </li>
                                            <li>
                            <a href="/article/93531.html" title="薯条的制作方法">薯条的制作方法</a>
                        </li>
                                            <li>
                            <a href="/article/93532.html" title="铃兰的种植方法">铃兰的种植方法</a>
                        </li>
                                            <li>
                            <a href="/article/93533.html" title="太阳能排气孔漏水怎么办">太阳能排气孔漏水怎么办</a>
                        </li>
                                            <li>
                            <a href="/article/93534.html" title="波西亚时光明特在哪里">波西亚时光明特在哪里</a>
                        </li>
                                            <li>
                            <a href="/article/93535.html" title="空心面是哪里的特产">空心面是哪里的特产</a>
                        </li>
                                            <li>
                            <a href="/article/93536.html" title="偏头痛按哪个部位可以缓解">偏头痛按哪个部位可以缓解</a>
                        </li>
                                            <li>
                            <a href="/article/93537.html" title="太苍是属于哪个省份">太苍是属于哪个省份</a>
                        </li>
                                            <li>
                            <a href="/article/93538.html" title="丙肝常识注意事项">丙肝常识注意事项</a>
                        </li>
                                            <li>
                            <a href="/article/93539.html" title="马桶上水慢怎么办图解">马桶上水慢怎么办图解</a>
                        </li>
                                            <li>
                            <a href="/article/93540.html" title="野生珍妮哪里毕业的">野生珍妮哪里毕业的</a>
                        </li>
                                            <li>
                            <a href="/article/93541.html" title="女人吃何首乌的好处">女人吃何首乌的好处</a>
                        </li>
                                            <li>
                            <a href="/article/93542.html" title="吃花生的好处和坏处">吃花生的好处和坏处</a>
                        </li>
                                    </ul>
            </li>
            <li class="sidebar-box">

                 <!-- google文章侧边 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-4387516810452807"
                     data-ad-slot="8604338277"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </li>
        </div>
    </div>
</div>

<ul class="suspend">
    <li class="back-top" onclick="backTop()">
        <i class="fa fa-chevron-up"></i>
        <span class="more">返回顶部</span>
    </li>
    <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=514930285&site=qq&menu=yes">
            <i class="fa fa-qq"></i>
            <span class="more">514930285</span>
        </a>
    </li>
    <li>
        <a href="mailto:czq8825@qq.com">
            <i class="fa fa-envelope"></i>
            <span class="more">czq8825@qq.com</span>
        </a>
    </li>
<!--     <li>
        <i class="fa fa-weixin"></i>
        <span class="more weixin"><img src="http://www.haoziyuan.cc/Uploads/20210427/6087c019e1f1f.jpg" alt="微信二维码"></span>
    </li> -->
</ul>

<footer class="footer clearfix">
    <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p>
    <p>Copyright © 2024 <a href="/">好资源导航网</a>. All Rights Reserved.</p>
    <p>
        <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a>
        <a href="/sitemap.html">网站地图</a>
        <script>
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JkYxq0Tbzm6jhVv6",ck:"JkYxq0Tbzm6jhVv6"});
</script>    </p>
</footer>
<script src="/Public/Home/js/main.js"></script>
<script type="text/javascript" src="/Public/Home/js/z_stat.js"></script>
</body>
</html>