JS中的async与await怎么使用

目录
  • 一、async
  • 二、await:
  • 三、综合应用

一、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()块来封装代码，同时它看起来很像同步代码，所以它非常直观。这样用的很爽！

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

赞 (0)

相关推荐

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

  • JavaScript中async,await的使用和方法

    JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log(hellworld()); // 您好!美好世界! async function asyHellworld() { return "您好!美好世界!"; } console.log(asyHellworld()); // Promise { '您好!美好世界!' } 普通函数 hellworld 将简单地返回字符

  • 深入浅出探究JavaScript中的async与await

    深入浅出探究JavaScript中的async与await

    目录 1.前言 2.详解 2.1.async 2.1.1.函数返回非Promise对象 2.1.2.函数返回Promise对象 2.2.await 2.3.async.await结合使用 2.4.async.await异常处理 3.总结 1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,

  • JavaScript中async await更优雅的错误处理方式

    目录 背景 为什么要错误处理 async await 更优雅的错误处理 小结 总结 背景 团队来了新的小伙伴,发现我们的团队代码规范中,要给 async  await 添加 try...catch.他感觉很疑惑,假如有很多个(不集中),那不是要加很多个地方?那不是很不优雅? 为什么要错误处理 JavaScript 是一个单线程的语言,假如不加 try ...catch ,会导致直接报错无法继续执行.当然不意味着你代码中一定要用 try...catch 包住,使用 try...catch 意味着你

  • JS中如何优雅的使用async await详解

    目录 jQuery的$.ajax Webpack时代的开始 深入了解Promise 消灭嵌套 await-to-js 总结 jQuery的$.ajax 在开始之前我们先来聊聊我的js异步之路.在我还在学校的时候,那时候还是 jQuery 的天下,我直接接触到并且经常使用的异步操作就是网络请求,一手 $.ajax走天下,伴我过了大二到毕业后差不多大半年的时间. $.ajax( "/xxx" ) .done(function() { // success !!! do something.

  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    目录 概览(循环方式 - 常用) 声明遍历的数组和异步方法 for 循环中使用 map 中使用 forEach 中使用 filter 中使用 附使用小结 总结 概览(循环方式 - 常用) for map forEach filter 声明遍历的数组和异步方法 声明一个数组:️ const skills = ['js', 'vue', 'node', 'react'] 再声明一个promise的异步代码: ️ function getSkillPromise (value) { return ne

  • 详解Node.js中的Async和Await函数

    在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯

  • Node.js中的async 和 await 关键字微任务和宏任务

    目录 async 和 await 关键字 async 关键字 await关键字 async 和 await 解决回调地狱 JS执行机制(事件循环) 微任务和宏任务 宏任务 微任务 宏任务和微任务执行机制 async 和 await 关键字 async 和 await 是 ES2017 中提出来的,async 和 await 两个关键字的出现,简化的 Promise 的使用. async 关键字 async关键字使用比较简单,所以 async 的使用注意以下三点即可 : async 用于修饰一个

  • JS中的async与await怎么使用

    目录 一.async 二.await: 三.综合应用 一.async async创建一个异步函数来定义一个代码块,在其中运行异步代码; 怎样变成异步函数呢?以 async 这个关键字开始,它可以被放置在一个函数前面 async function f() { return 1; } f().then(alert); // 1 //上下结果一样 async function f() { return Promise.resolve(1); } f().then(alert); // 1 //也可以用

  • 在 Node.js 中使用 async 函数的方法

    借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

  • js异步之async和await实现同步写法

    首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的. var gen = function* (){     var a = yield readFile('./a.txt');     console.log(a.toString());     var b = yield readFile('./b.txt');     console.log(b.toString()); }; 首先我们看下上面的代码,如果我们将function 后面的 * 改成 async,将y

  • 浅谈C#中的Async和Await的用法详解

    众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译的,只不过加上了自己的理解进行了相关知识点的补充,如果你认为自己的英文水平还不错,大可直接跳转到文章末尾查看原文链接进行阅读. 写在前面 自从C# 5.0时代引入async和await关键字后,异步编程就变得流行起来.尤其在现在的.NET Core时代,如果你的代码中没有出现async或者await

  • C#中使用async和await实现异步Udp通讯的示例代码

    目录 C/S架构 客户端实现 客户端主流程和实现 客户端发送消息实现 客户端监听消息实现 服务器实现 服务器主流程和实现 服务器发送消息实现 服务器监听消息实现 总结 在之前的C#版本中, 如果我们想要进行异步的Udp, 需要单开线程接收消息, C#7.1开始, 我们可以使用async/await关键字来编写异步代码, 我们今天一起来探索怎么实现. C/S架构 我们要实现两个app, 一个客户端和一个服务器, 各自都可以发消息和收消息.发消息很简单, 收消息的话需要一直在端口上监听. udp相比

  • Node.js 中使用 async 函数的方法

    借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

  • .NET中的async和await关键字使用及Task异步调用实例

    .NET中的async和await关键字使用及Task异步调用实例

    其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以后面试之前可以用这个"复习"一下). (一)传统的异步调用 在比较"古老"的C#程序中经常可以看到IAsyncResult.BeginInvoke之类的异步调用"踪迹".先来简单的复习一下吧. 假如我们有一个方法生成字符串,而生成这个字符串需要10秒

随机推荐