广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中的async与await怎么使用
  • 413
分享到

JS中的async与await怎么使用

2024-04-02 19:04:59 413人浏览 八月长安
摘要

目录一、async 二、await: 三、综合应用 一、async async创建一个异步函数来定义一个代码块,在其中运行异步代码; 怎样变成异步函数呢?以 async 这个关键字

一、async

async创建一个异步函数来定义一个代码块,在其中运行异步代码;

怎样变成异步函数呢?以 async 这个关键字开始,它可以被放置在一个函数前面


async function f() {
  return 1;
}
 
f().then(alert); // 1
 
//上下结果一样
 
async function f() {
  return Promise.resolve(1);
}
 
f().then(alert); // 1
 
//也可以用箭头函数
let hello = async () => { return "1" };
hello().then((value) => console.log(value))
//返回值也可以简化成这样
hello().then(console.log)

异步函数的特征之一:保证函数的返回值为 promise

async 关键字加到函数申明中,可以告诉它们返回的是 promise,而不是直接返回值。此外,它避免了同步函数为支持使用 await 带来的任何潜在开销。

二、await:

await 只在异步函数里面才起作用。它可以放在任何异步的,关键字 await javascript 引擎等待直到 promise 完成并返回结果。在等待promise的同时,其他正在等待执行的代码就有机会执行了。

您可以在调用任何返回Promise的函数时使用 await,包括WEB api函数。


async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("咚!"), 1000)
  });
 
  let result = await promise; // 等待执行,直到 promise resolve 执行完
 
  alert(result); // "咚!"
}
 
f();//拿到 result 作为结果继续往下执行。所以上面这段代码在1秒后显示 “咚!”。

注意:await 实际上会暂停函数的执行,直到 promise 状态变为 完成,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为 JavaScript 引擎可以同时处理其他任务:执行其他脚本,处理事件等。

三、综合应用

有了async/await就去除了到处都是 .then() 代码块,因为await会等待了。


async function A() {
  let response = await fetch('c.jpg');
  let myBlob = await response.blob();
 
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}
 
A()
.catch(e => {
  console.log('问题: ' + e.message);
});

用更少的.then()块来封装代码,同时它看起来很像同步代码,所以它非常直观。这样用的很爽!

到此这篇关于jsasync/await怎么使用的文章就介绍到这了,更多相关JS的async/await 用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS中的async与await怎么使用

本文链接: https://www.lsjlt.com/news/161160.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS中的async与await怎么使用
    目录一、async 二、await: 三、综合应用 一、async async创建一个异步函数来定义一个代码块,在其中运行异步代码; 怎样变成异步函数呢?以 async 这个关键字...
    99+
    2022-11-12
  • JS中如何使用async与await
    小编给大家分享一下JS中如何使用async与await,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、asyncasync创建一个异步函数来定义一个代码块,在其...
    99+
    2023-06-22
  • JS中的async与await异步编程及await使用陷阱
    ECMA2017中新加入了两个关键字async与await 简单来说它们是基于promise之上的的语法糖,可以让异步操作更加地简单明了 首先我们需要用async关键字,将函数标记为...
    99+
    2023-03-24
    async与await异步编程 async与await
  • 怎么使用ChatGPT解答js-async/await
    今天小编给大家分享一下怎么使用ChatGPT解答js-async/await的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。询...
    99+
    2023-07-06
  • JS的异步函数async/await怎么使用
    这篇“JS的异步函数async/await怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JS的异步函数async/a...
    99+
    2023-07-05
  • JS中的async与await异步编程及await使用陷阱源码分析
    这篇“JS中的async与await异步编程及await使用陷阱源码分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JS中...
    99+
    2023-07-05
  • js中怎么用async和await实现同步
    这篇“js中怎么用async和await实现同步”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么用async和awa...
    99+
    2023-06-29
  • vue的async-await怎么使用
    本文小编为大家详细介绍“vue的async-await怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue的async-await怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。曾经见过为了让钩子...
    99+
    2023-07-04
  • async和await怎么使用
    本篇内容介绍了“async和await怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Eric:如何讲清楚Promiseasync和a...
    99+
    2023-06-03
  • JS中如何优雅的使用async await详解
    目录jQuery的$.ajax Webpack时代的开始 深入了解Promise 消灭嵌套 await-to-js 总结jQuery的$.ajax 在开始之前我们先来聊聊我的js异...
    99+
    2022-11-12
  • JS循环中正确使用async、await的方法是什么
    JS循环中正确使用async、await的方法是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。概览(循环方式 - 常用)formapforEachfilter声明遍历的...
    99+
    2023-06-22
  • JS循环中正确使用async、await的姿势分享
    目录概览(循环方式 - 常用)声明遍历的数组和异步方法for 循环中使用map 中使用forEach 中使用filter 中使用附使用小结总结概览(循环方式 - 常用) f...
    99+
    2022-11-12
  • React应用怎么使用Async和Await
    这篇文章主要介绍“React应用怎么使用Async和Await”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React应用怎么使用Async和Await”文章能帮助大家解决问题。Async/Awai...
    99+
    2023-06-05
  • Javascript中async与await的捕捉错误怎么理解
    这篇文章主要介绍“Javascript中async与await的捕捉错误怎么理解”,在日常操作中,相信很多人在Javascript中async与await的捕捉错误怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对...
    99+
    2023-06-29
  • 怎么在微信小程序中使用async/await
    本篇内容主要讲解“怎么在微信小程序中使用async/await”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么在微信小程序中使用async/await”吧!微...
    99+
    2022-10-19
  • NodeJs中怎么使用async和await处理异步
    NodeJs中怎么使用async和await处理异步,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。场景远古时代我们在编写exp...
    99+
    2022-10-19
  • JavaScript中async,await的使用和方法
    JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log...
    99+
    2022-11-12
  • 细数promise与async/await的使用及区别说明
    目录一、callback,Promise,async&await三者的区别二、Promise1.Promise的特点2.Promise的用法3.Promise的运用(请结合j...
    99+
    2022-11-13
  • C#异步编程之async/await怎么使用
    今天小编给大家分享一下C#异步编程之async/await怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。概述异步这个...
    99+
    2023-07-05
  • 怎么使用c#异步操作async await状态机
    本篇内容介绍了“怎么使用c#异步操作async await状态机”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!async awai...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作