字节提前批前端面试题:将这段async/await代码翻译成Promise

本文探讨了async/await的基础语法和原理,并详细解释了如何将async/await代码转换为Promise形式。通过实例分析,阐述了async函数内部的异步操作执行逻辑以及await如何处理Promise。同时,文章提醒读者注意,在await后面不是一个Promise时,其行为会发生变化。
摘要由CSDN通过智能技术生成

如图,这道题,我轻而易举地说出了答案是2,3。原理的话我知道是封装成Promise,但要我翻译成Promise我还是很懵逼啊。 不得不学下怎么翻译。

不得不说,感谢这道题,让我进一步地深入了解async/await,感谢面试官

async/await 的基础使用及原理简介

async/await是es7推出的一套关于异步的终极解决方案,为什么要说他是终极解决方案呢?因为他实在是太好用了,而且写起来还非常的简单。

一:async/await基础语法

// 定义一个异步函数(假设他是一个异步函数)
getJSON(){
   
    return 'JSON'
}

// 在需要使用上面异步函数的函数前面,加上async声明,声明这是一个异步函数
async testAsync() {
   
  // 在异步函数前面加上await,函数执行就会等待用await声明的异步函数执行完毕之后,在往下执行
  await getJSON()
  
  ...剩下的代码
}

以上就是async/await最基本的用法。

还需要注意的一点就是使用async/await的时候,是无法捕获错误的,这个时候就要用到我们es5里面一个被大家遗忘了的try/catch,来进行错误的捕获:

async testAsync() {
   
  try {
   
     await getJSON()
  } catch(err) {
   
     console.log(err)
  }
  ...剩下的代码
}
注意:

1.async函数在声明形式上和普通函数没有区别,函数声明式,函数表达式,对象方法,class方法和箭头函数等都可以声明async函数。

2.任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

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

二:async/await

async这个单词大家应该都比较熟悉,他是英文单词‘异步’的简写,代表的意思也是异步。

async function testAsync() {
   
    return "hello async";
}

const result = testAsync();
console.log(result);

输出结果:

Promise{
   <resolved>: "hello async"}

可以看出async函数,返回的是一个Promise对象

await是英文单词‘等待’的意思,代表的意思也是等待,那他等的到底是个什么东西呢?还是一个Promise。

三、async/await和Promise直接的转化

async/await其实是基于Promise的。async函数其实是把Promise包装了一下。

下面是一个async/await的写法:

getConstant() {
   
   return 1
 }

 async getAsyncConstant() {
    
  return 1
 }

 async getPromise() {
   
  return new Promise((resolved, rejected)=> {
   
    resolved(
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值