好程序员web前端培训分享如何讲清楚async和await?

简介:

  好程序员web前端培训分享如何讲清楚async和await?async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法

来看一个简单的场景:
 
//假设有4个异步方法要按顺序调用
new Promise(function(resolve){
    ajaxA("xxxx", ()=> { resolve(); })    
}).then(function(){
    return new Promise(function(resolve){
        ajaxB("xxxx", ()=> { resolve(); })    
    })
}).then(function(){
    return new Promise(function(resolve){
        ajaxC("xxxx", ()=> { resolve(); })    
    })
}).then(function(){
    ajaxD("xxxx");
});  
语法上不够简洁, 我们可以稍微改造一下
 
//将请求改造成一个通用函数
function request(options) {
    //.....
    return new Promise(....); //使用Promise执行请求,并返回Promise对象
}
//于是我们就可以来发送请求了
request("http://xxxxxx")
.then((data)=>{
    //处理data
})
 
 
然后我们再来重新改造开头的代码
 
request("ajaxA")
.then((data)=>{
   //处理data
   return request("ajaxB")
})
.then((data)=>{
   //处理data
   return request("ajaxC")
})
.then((data)=>{
   //处理data
   return request("ajaxD")
})
 
 
比起之前有了不小的进步, 但是看上去依然不够简洁
 
如果我能像使用同步代码那样, 使用Promise就好了
 
于是, async await出现了
 
async function load(){
    await request("ajaxA");
    await request("ajaxB");
    await request("ajaxC");
    await request("ajaxD");
}
 
await关键字使用的要求非常简单, 后面调用的函数要返回一个Promise对象
load()这个函数已经不再是普通函数, 它出现了await这样"阻塞式"的操作
因此async关键字在这是不能省略的
那么现在看, 这段代码变得异常清秀
 
代码的编写顺序
 
代码的阅读顺序
 
代码的执行顺序
 
全部都是按照同步的习惯来的
 
是不是很方便.
 
 
到这你已经学会了async和await基本使用方式
 
下面来简单解释一下它的工作流程
 
//wait这个单词是等待的意思
async function load(){
    await request("ajaxA");  //那么这里就是在等待ajaxA请求的完成
    await request("ajaxB");
    await request("ajaxC");
    await request("ajaxD");
}
如果后一个请求需要前一个请求的结果怎么办呢?
 
传统的写法是这样的
 
request("ajaxA")
.then((data1)=>{
   return request("ajaxB", data1);
})
.then((data2)=>{
   return request("ajaxC", data2)
})
.then((data3)=>{
   return request("ajaxD", data3)
})
而使用async/await是这样的
 
async function load(){
    let data1 = await request("ajaxA");  
    let data2 = await request("ajaxB", data1);
    let data3 = await request("ajaxC", data2);
    let data4 = await request("ajaxD", data3);
    //await不仅等待Promise完成, 而且还拿到了resolve方法的参数
}
注意当一个函数被async修饰以后, 它的返回值会被自动处理成Promise对象
 
关于异常处理
 
async function load(){
    //请求失败后的处理, 可以使用try-catch来进行
    try{
        let data1 = await request("ajaxA");  
        let data2 = await request("ajaxB", data1);
        let data3 = await request("ajaxC", data2);
    } catch(e){
        //......
    }
}

相关文章
|
5天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
68 0
|
5天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
15 0
|
6天前
|
前端开发
web前端作业3
web前端作业3
10 1
|
6天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
7 1
|
6天前
|
前端开发
web前端的作业1
web前端的作业1
7 1
|
6天前
|
前端开发 JavaScript 搜索推荐
WEB前端第一天
WEB前端第一天
10 1
|
6天前
|
存储 人工智能 前端开发
从前端到后端,探索Web开发的奥秘
Web开发是当今最热门的技术领域之一,涉及前端、后端、数据库等多个方面。本文将介绍Web开发的基本架构和技术要点,并深入探讨前后端交互、安全性等问题,帮助读者更好地理解Web开发的奥秘。
|
7天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
7天前
|
编解码 前端开发 UED
探索Web前端开发中的响应式设计原则
本文将介绍Web前端开发中的响应式设计原则,探讨如何通过优化网页布局、使用媒体查询和灵活的CSS技术,实现在不同设备上的良好用户体验。我们将讨论适应性布局、流式布局和弹性布局等关键概念,并提供实际示例帮助读者更好地理解和应用这些原则。
|
9天前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总