📔
饥人谷前端体系课程笔记
黑马程序员笔记前端面试押题前端精进
  • 课程大纲
  • Git入门
    • 3. 软件安装详解
    • 4. Mac环境搭建
    • 5. 命令行入门
    • 6. 本地仓库
    • 7. Git远程仓库-GitHub
  • HTML全解
    • 8. HTML概览
    • 9. HTML标签
    • 10. HTML重难点
    • 11. HTML实践 & 手机调试
  • CSS全解
    • 12. CSS基础
    • 13. CSS布局(上)
    • 14. CSS布局(下)
    • 15. CSS定位
    • 16. CSS动画
  • HTTP全解
    • 17. URL 是什么
    • 18. 请求和响应 & Node.js Server
  • JS全解
    • 19. JavaScript概览
    • 20. 内存图与JS世界(精品课)
    • 21. Canvas 实践—画图板
    • 22. JS语法
    • 23. JS数据类型
    • 24. JS 对象
    • 25. JS 对象分类
    • 26. JS 数组
    • 27. JS 函数
    • 28. JS 实战,会动的代码
    • 29. JS运算符
    • 30. JS总结
  • JS编程接口
    • 31. DOM编程
    • 32. 手写DOM库
    • 33. JQuery中的设计模式(上)
    • 34. JQuery中的设计模式(下)
    • 35. DOM事件与事件委托
  • 项目 前端导航站点
    • 前端导航项目笔记
  • 前后分离
    • 40. AJAX的原理
    • 41. 异步与Promise
    • 42. 跨域、CORS、JSONP
    • 43. 静态服务器
    • 44. AJAX实战:Cookie、Session
  • JS进阶MVC
    • 48. MVC(上)
    • 49. MVC(中)
    • 50. MVC(下)
  • 项目构建
    • 51. Webpack(上)
    • 52. Webpack(下)
  • 算法与数据结构
    • 62. 伪代码与流程图
  • React全解
    • 75. React起手式
    • 76. React类组件和函数组件
    • 77. Class组件详解
    • 78. 函数组件
    • 79. Hooks原理解析
    • 80. Hooks各个击破
    • 81. 精通Redux
  • Node.js
    • 84. Node.js技术架构
    • 85. 文件模块
    • 86. 单元测试之文件模块
    • 87. 调试 Node.js 程序
    • 88. 静态服务器
    • 89. 命令行翻译工具
    • 90. 操作数据库
    • 91. 数据库基础知识
    • 92. Stream 流
    • 93. child_process
    • 94. 总结
  • TypeScript
    • 112. 基础
    • 113. 泛型
  • Next.js全解
    • Next.js 上
    • Next.js 下
  • ES6精讲
    • Promise,async/await
  • 大屏可视化笔记
    • 大屏可视化项目
  • SCSS全解
    • SCSS全解
  • 拓展
    • 一次性弄懂性能优化
    • Web性能优化
由 GitBook 提供支持
在本页
  • ES6进阶
  • 复习Promise
  • async/await

这有帮助吗?

  1. ES6精讲

Promise,async/await

ES6进阶

复习Promise

async function

面试官问asyc是干什么的?

  • 能和promise结合起来使用

  • 会让异步函数更像同步函数

例子

function fn() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10); //[1,7)
      resolve(n);
    }, 3000);
  });
}
fn().then(
  (x) => {
    console.log("successfull", x);
  },
  () => {
    "fail";
  }
);

async/await

await只能放在async函数里面,否则直接报错。

function fn() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10); //[1,7)
      resolve(n);
    }, 3000);
  });
}

async function  test(){
  let n = await fn();//如果这里没写括号,就不会执行这个fn函数
  console.log(n)
}
test()

await后面接一个会return new Promise()的函数,并执行这个函数

另一个例子

function fn(guessNumber) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10); //[1,7)

      if (n > 3) {
        if (guessNumber === "big") {
          resolve(n);
        } else {
          reject(n);
        }
      } else {
        if (guessNumber === "small") {
          resolve(n);
        } else {
          reject(n);
        }
      }
    }, 3000);
  });
}

async function test() {
  try {
    let n = await fn("big");
    console.log("you win");
  } catch (error) {
    console.log("you loss");
  }
}

test();

面试题:为什么要用await?

为了更像是标准的同步函数(从上往下执行的)

The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

同步代码:synchronous code

promise的链式代码图示,会把你搞爆炸:

await的局限性:只能接一个promise

如果需要多摇几个骰子的话,await就无法满足要求了。

因此需要用到promise.all

Promise.all([condition1, condition2]).then(()=>{success},()=>{fail})

condition1和condition2同时成功才会触发success,其中任何一个失败都会触发fail

如何用await来实现接受多个promise呢?

async function test() {
  try {
    let n = await Promise.all([condition1, condition2])
    //这里的n会返回一个数组
    console.log("you win");
  } catch (error) {
    console.log("you loss");
  }
}

promise.race只要有一个条件成功就会触发success

async和await都是promise的语法糖

上一页ES6精讲下一页大屏可视化笔记

最后更新于3年前

这有帮助吗?

Screen Shot 2022-01-26 at 11.00.43 AM
codesanbox