Promise 与 async await 面试知识点

最新推荐文章于 2022-10-29 09:58:01 发布
最新推荐文章于 2022-10-29 09:58:01 发布
阅读量1.3k 收藏 10
点赞数
分类专栏： JS 文章标签： Promise async await async/await promise面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41819731/article/details/104513176
版权

Promise的正常用法

function xx(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resovle('成功的输出')
            reject('失败输出')
        },3000)
    })
}

xx().then(fn1,s1).then(fn2,s2)//fn表示成功调用，s表示失败调用

Promise的API

  • Promise.resolve() 制造一个成功或失败
  • Promise.reject() 制造一个失败
  • Promise.all(数组) 等待全部成功，或者有一个失败
  • Promise.race(数组) 等待第一个状态改变
  • Promise.allSettled(数组) 等待全部状态改变，API较新，浏览器支持的少

Promise的语法糖

Promise.then(fn1).catch(s1) 等于 Promise.then(fn1,s1) 

Promise的面试题

页面有两个按钮 Ａ和Ｂ，以及一个输入框，Ａ按钮点击后发送一个请求，返回一个字符串Ａ，Ｂ也发请求，但返回字符串Ｂ，返回后会把字符串赋值给输入框，但是Ａ，Ｂ发送的两个请求返回的时间不同,点击两个按钮的顺序也不一定，Ｂ要比Ａ先返回，而最终效果要求是输入框字符的顺序是ＡＢ。

primise.all()不好满足这个需求。这需要用一个数组来记录他们，当B请求回来时去数组中对比，顺序不为1，然后再等待，等到A请求回来后，输出A然后再输出B即可。

直接看实现的代码吧：

<body>
<button id="b1">A</button>
  <button id="b2">B</button>
  <input id="input1" type="text">
</body>
let ajax1 = ()=>{
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(1111)
    },5000)
  })
}
let ajax2 = ()=>{
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(2222)
    },3000)
  })
}

let batai = []
let duiwu = []

let hi = () =>{
  let lastN = batai[batai.length - 1][0]
  let lastS = batai[batai.length - 1][1]
  console.log(duiwu,'队伍')
  console.log(batai,'吧台')
  if(duiwu[0][0] === lastN) {
    duiwu[0][1](lastS)
    duiwu.shift()
    batai.pop()
    hi()
  }
}

b1.onclick = ()=>{
  const n = 1
  ajax1().then(res=>{
    batai.push([n, res])
    hi()
  })
  duiwu.push([n, s=>{
    input1.value = s
  }])
}

b2.onclick = ()=>{
  const n = 2
  ajax2().then(res=>{
    batai.push([n, res])
    hi()
  })
  duiwu.push([n, s=>{
    input1.value = s
  }])
}

 

async await的基本用法

const fn = async ()=>{
    const fn1 = await newPromise()
    return fn1 + 1
}

相比较Promise，完全没有锁进，就像在写同步代码。

为什么async await函数前面要有一个async？ 

为了兼容旧代码，以前有人实现了与async/await功能相同的await函数，例如这样：

await(newPromise())

所以为了做区分，在函数前面增加async以示不同，没有别的特殊含义。 

优化async await错误处理

常见的错误处理方法 try/catch

let response
try{
    response = await axios.get('/xx')
} catch(err){
    if(err.response){
        console.log(err.response.states)
    }
    throw err
}
console.log(response)

这样处理感觉不太好看，我们可以优化一下，结合Promise写出如下代码：

const response = await axios.get('/xx').then(null, err)
console.log(response)

response处理成功结果，then(null, err) 的err处理失败结果。

async/await实际上就是Promise的语法糖。

async await面试题

let a = 0;
let test = async () => {
  a = a + await 10;
  console.log(a)
}
test()
console.log(++a)

请问log分别会输出什么？

答案：1，10
这里考察的知识点：a + await 10 前面的a  是跟随await一起异步确定的，还是a先确定值。 

事实上在await前面的值都会同步执行，await后面的才会异步执行，记住这点就很好理解了。

题目中虽然先log了++a，a值应该为1。但是在test()函数中a + await 10  中的a在test()运行时就已经将值确定了，值为0。

0 + 异步的await 10 等于10。

A-Tione
关注
专栏目录
ES6中Promise、async和await面试题整理
共同学习，共同成长
08-09 1179
promise是每个前端人必须会接触到的一个知识点,下面这篇文章主要给大家整理了一下关于ES6中Promise、async和await面试题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一篇文章解决你的Promise, async, await面试焦虑
weixin_45401360的博客
09-01 333
介绍Promise, async, await中前端面试的高频考点
ES6常问面试题（Promise，async和await 等）
idiot_MAN的博客
10-29 2951
Promise 是es6引入的异步编程的新解决方案 ，语法上Promises是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果，实例化一个Promise对象，里面有一个参数，参数是函数类型值，有两个形参，一个是resolve,一个是reject，然后执行一个异步 操作，会得到一个数据，然后调用resolve方法，然后promise的状态就会变成一个成功，然后调用promise对象的.then方法，里面有两个函数，一个是成功的时候调用，一个是失败的时候调用。它类似于对象，也是键值对的集合。
async/await promise 事件轮训 面试题
weixin_38222276的博客
03-12 372
1. async/await async function test(){ console.log(1) } async function test2(){ await test() console.log(3) } test2() console.log(2) 结果 // 1 // 2 // 3 2. promise console.log(1) function test(){ return new Promise((resolve,rejuct)=>{.
前端经典面试题之promise、async、await输出类型题
weixin_45474108的博客
10-09 2285
async function async1(){ console.log('async1 start') //2 // 执行async2函数的 setTimeout await async2() setTimeout(function(){ // 等上面执行完在执行 console.log('setTimeout1')//8 },0) } ...
js执行顺序【setTimout，promise,async,await】面试问题详解
weixin_43837268的博客
07-25 273
setTimeout(function () { console.log(1); }, 100); setTimeout(function () { console.log(2); }, 0) Promise.resolve( console.log(3) ).then( () => { console.log(4) } ) async function...
事件循环、宏任务与微任务、Promise与 Async/Await以及常见面试题
xiaoxiaotututu的博客
07-19 677
事件循环（event loop） JS分为同步任务和异步任务，同步任务会在主线程上执行（形成执行栈，先进后出），异步任务会先放置在任务队列中（先进先出）； 当主线程上的同步任务全部执行完成后，js会在任务队列中依次取出异步任务并执行。 JS主线程不断的循环往复的从任务队列中读取任务，执行任务，这中运行机制遍称为事件循环。 但事件循环中的任务队列并不是唯一的，每个事件循环都有一个微任务队列以及多个宏任务队列。 宏任务（Macrotasks）与微任务（Microtasks） 异步任务可分为 宏任务 和 微任
异步Promise及Async/Await详解
qq_15859173的博客
12-21 779
一、为什么有Async/Await？ 我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？ 答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先，我们必须了解Promise。 二、Promise简介 2.1 Promise实例 什么是Promise，很多人应该
基于Promise 自己实现一个 async,await。从此异步编程变得更简单!
Web前端开发工程师
10-25 569
碎碎念： 亲爱的读者：你好！我叫 Changlon —— 一个非科班程序员、一个致力于前端的开发者、一个热爱生活且又时有忧郁的思考者。 如果我的文章能给你带来一些收获，你的点赞收藏将是对我莫大的鼓励！ 我的邮箱:thinker_changlon@163.com 我的Github: https://github.com/Changlon 参考文章: Generator 函数的含义与用法 MDN Generator github源码地址：myasync 自从有了Promise这个好用的技术，我们的..
vue3 使用async await
最新发布
10-31
下面将详细介绍Vue3中`async/await`的使用及其相关知识点。 ### 1. `async/await`基础 `async/await`是ES6引入的异步编程新特性，它基于Promise构建。`async`关键字用来定义一个异步函数，而`await`关键字则用于在...
Promise,async和await的面试题
wdhxs的博客
12-04 3337
Promise,async和await的面试题 一、关于Promise的执行顺序 创建Promise是同步的，当执行完resolve();后，状态变为resolved，后面的.then立即放入微队列，第二个.then放入第一个.then返回promise对象的缓存队列中（并不是微队列）。 1. new Promise((resolve, reject) => { console.log("外部promise"); resolve(); }) .then(() => { con
每日必记五题（第二天）
老余的博客
10-11 168
答：async/await是写异步代码的新方式，它是generator的语法糖，以前的方法有回调函数和 Promise。答：两者都是可以同时调用多个promise实现，Promise.all可以将多个实例组装成一个新的实例，成功的时候返回一个成功数组，失败的时候则返回最先被reject失败状态的值；（2）简洁：使用async和await明显节约了不少代码，不需要.then,不需要写匿名函数处理promise的resolve的值，不需要定义多余的data变量，还避免了嵌套代码。
【JS面试】面试题Setimeout，promise，async await的区别
qq_45254255的博客
04-20 2229
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可
从经典面试题了解async、await、promise
Nick_YangXiaoTong的博客
12-10 2327
evenloop 执行同步代码（属于宏任务，如遇微任务会推到微任务队列） 执行所有微任务 执行异步代码 面试题 async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); return 'async return'; } as...
面试代码题总结（包含promise和async await）
MISS_zhang_0110的博客
12-08 460
面试代码题总结（待完成）一级目录二级目录三级目录 一级目录 二级目录 三级目录
promise和setTimeout async/await顺序面试题
louShuMei 的博客
07-06 401
async function async1(){ console.log('async1 start')//2 await async2() //await后面都作为回调内容 微任务1=>放在微任务队列 console.log('async1 end') } async function async2() { console.log('async2')//3 } console.log('script start')//1 setTimeout(() => {
async和await （promise的使用）
m0_60694785的博客
02-25 1293
await后面接一个会return new promise的函数并执行它 await只能放在async函数里 使用acync 和 await 获取成功的结果 function handler(){ return new Promise((resolve, reject)=>{ let sino = parseInt(Math.random() * 6 +1) setTimeout(()=>{ resolve(sino)
项目中new Promise和async、await中的使用
qq_37899792的博客
06-25 6112
function changeListChOrgInfo({commit}) {//返回一个Promise对象 return new Promise((resolve, reject) => { changelistChOrgInfo({})//一个ajax请求 .then(response => { if(!respo...
2020年面试实战：async/await、Promise等知识点解析
"这是一份2020年的前端面试题集合，涵盖了async/await、Promise、let、var、const、call以及JSON等核心JavaScript知识点。面试题涉及到异步编程、作用域、对象引用和数据比较等多个方面。" 在这些面试题中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值