首页 > 编程语言 >JavaScript async/await 的用法以及它与 Promise 的区别

JavaScript async/await 的用法以及它与 Promise 的区别

时间:2023-01-16 16:44:06浏览次数:51  
标签:异步 JavaScript await Promise 使用 async response

async/await 是 JavaScript 中的语法糖,用于简化异步代码的编写。它允许你在异步代码中使用同步风格的语法,使代码更易于阅读和维护。

用法:

  • 使用关键字 async 声明一个异步函数
  • 在函数中使用 await 来等待异步操作完成
async function getData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}

Promise 的区别:

  • async/await 是在 Promise 的基础上构建的,所以在使用 async/await 时仍然需要使用 Promise
  • async/await 提供了更直观的语法来处理异步操作,而 Promise 更像是一种编程模式。
  • async/await 更符合人类思维方式,更容易理解。
  • 当使用 async/await 时,可以使用 try/catch 来处理错误,这样和处理同步代码的错误方式是一致的,而在使用 Promise 时,则需要使用.catch() 方法来处理错误。
async function getData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
  • async/await 还支持同时处理多个异步操作,可以使用 Promise.all() 方法来实现。
const fetchData = async () => {
    const [users, posts] = await Promise.all([
        fetch('/users').then(response => response.json()),
        fetch('/posts').then(response => response.json())
    ]);
    console.log(users, posts);
}
  • 使用 async/await 时,可以在任意位置使用 return 来终止函数的执行,而使用 Promise 时,只能在 thencatch 函数中使用 return
  • 使用 async/await 的函数始终返回一个 promise。如果在函数中使用了 return,则 promise 的结果为该返回值。如果函数没有使用 return,则 promise 的结果为 undefined

总之,async/await 是在 Promise 的基础上提供了更易于阅读和维护的语法,使得异步编程更符合人类思维方式,但它并不是替代Promise,而是建立在Promise之上的语法糖。在异步编程中,需要根据情况来选择使用 Promise 或者 async/await

标签:异步,JavaScript,await,Promise,使用,async,response
From: https://www.cnblogs.com/yuzhihui/p/17055794.html

相关文章

  • javascript中怎么将字符串转换为函数
    要将字符串转换为函数“ eval() ”,应使用方法。此方法将字符串 作为参数并将其转换为函数。语法eval(string);示例在以下示例中,在字符串本身中,使用函数分配了一个名......
  • javaScript中的一些简写,请备好!
    废话不多说,直接列举一些JavaScript中的简写语法,仅供大家参考!1、当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时,find方法确实很有用。constdata=[......
  • JavaScript 浅拷贝和深拷贝
    JavaScript中的拷贝分为两种:浅拷贝和深拷贝。一、浅拷贝浅拷贝是指在拷贝过程中,只拷贝一个对象中的指针,而不拷贝实际的数据。所以,浅拷贝中修改新对象中的数据时,原对象中......
  • 【译】15 个有用的 JavaScript 技巧
    原文地址:https://javascript.plainenglish.io/15-useful-javascript-tips-814eeba1f4fd1)数字分隔符为了提高数字的可读性,可以使用下划线作为分隔符。constlargeNumber......
  • JavaScript是怎样实现继承的?
    一、是什么继承(inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超......
  • JavaScript学习笔记—window对象
    window对象浏览器为我们提供了一个window对象,可以直接访问window对象代表的是浏览器窗口,通过该对象可以对浏览器窗口进行各种操作,除此之外window对象还负责存储JS中的内......
  • JavaScript学习笔记
     JavaScript学习笔记概念脚本语言:一行一行的翻译成机器语言,并一行一行的执行;而不是全部编译执行; 作用表单动态校验、网页特效、服务端开发Node.js、桌......
  • JavaScript学习笔记—全局和局部作用域
    作用域(scope)指的是一个变量的可见区域全局作用域在网页运行时创建,在网页关闭时消耗所有直接编写到script标签中的代码都位于全局作用域中变量是全局变量,可以在任意......
  • JavaScript学习笔记—函数
    1.语法function函数名(){语句......}2.定义和调用函数-语法:函数名()使用typeof检查函数对象时返回function定义方式(1)函数声明(2)函数表达式(3)箭头函数//......
  • JavaScript原型和原型链?有什么特点?
    一、原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的......