JavaScript async/await使用详解

目录
  • 一、简介
  • 二、async
  • 三、await
  • 四、案例
  • 附-直接量/字面量

一、简介

async/await是ES20717引入的，主要是简化Promise调用操作，实现了以异步操作像同步的方式去执行，async外部是异步执行的，同步是await的作用。

二、async

async，英文意思是异步，当函数（包括函数语句、函数表达式、Lambda表达式）前有async关键字的时候，并且该函数有返回值，函数执行成功，那么该函数就会调用Promise.resove()并隐式的返回一个Promise对象；如果函数执行失败就会调用Promise.reject()并返回一个Promise对象。

Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) ，可将字面量对象或其他对象快速封装成 Promise 实例

  • async函数中如果有异步操作会进行等待，但是async函数本身会马上返回，不会阻塞当前线程。async函数被调用不会阻塞界面渲染，内部由await关键字修饰异步过程，会阻塞等待异步任务的完成再返回。
  • 如果在函数中return一个直接量，async会把这个直接量通过Promise.resolve(直接量) 封装成 Promise 对象 ，如果没有返回值，相当于返回了Promise.resolve(undefined)。
  • 通过Promise回调得到async函数的返回值 ，通过Promise回调得到async函数的返回值，因为该函数返回的是Promise对象
async func(){
     return "a"
}
console.log(func())
func().then(res=>{
   console.log(res) //通过回掉获取到 a
 }.catch(err=>{ }))

func()的返回值如下，由此可见返回的是一个Promise对象。

三、await

使用await时，一定要配合async使用 ，这样才能使异步代码同步化，await英文为等待，意思就是等待await后面的函数（该函数返回的是Promise对象）执行完之后，在之后后面的代码。

await后面也可以跟同步代码 ，这样做的话意义不大，增加了系统处理逻辑，系统会自动将其转化成一个Promsie对象。比如：

const a = await '1';
const a = await Promise.resolve('1');//跟上面效果效果相同
//await后跟同步代码，不如不使用await,增加了代码逻辑，没有意义
const a = '1';

await在等返回值，后面可以是字面量或者函数表达式。如果表达式的运算结果不是Promise对象，那么该结果就是await等的值； 如果await后是一个Promise对象，那么就会阻塞后面代码的运行 。但是async函数的调用并不会阻塞，它内部所有的阻塞都封装在Promise对象中异步执行。

await只处理resolve(data)时的数据，不处理reject(error) ，当异步函数体内出错的时候，怎么捕获到错误信息呢?

  1. 可以让await后的函数通过catch获取
  2. 通过最外面的func函数的catch获取
  3. func函数体内使用try…catch…，然后从catch获取， try…catch可获取 async 函数内，任意 await 的错误，其中一个被拒绝，便会暂停，返回错误信息。
async function func(){
   const a = await asyncFunc();
}
asyncFunc().then().catch()

async function func(){
   const a = await asyncFunc();
}
func().then().catch()

async function func(){
   try(){
       const a = await asyncFunc();
   }catch(error){ }
}

四、案例

async function func(){
   console.log('a')
   const c = await 'c'
   console.log(c)
   return 'd'
}
func().then(res=>console.log(res))
console.log('b')

输出：

先输出a后输出b，说明async函数执行后会立即返回，不阻塞线程。

附-直接量/字面量

文中提到了字面量，博文在这里做下介绍。

字面量又称之为直接量，代码中固定值的表示方法，程序中直接使用的数据，没进行过封装。可分为字符串字面量（string literal）、数组字面量（array literal）、对象字面量（object literal），函数字面量（function literal）。 一般除去函数表达式，在给变量赋值时，可以理解为=号右边的数据 。

var a = "1";
var b = [1];
var c = {};
var d =function (){} // function() 为匿名函数

注意：函数字面量一般为匿名函数，但是语法也支持定义函数名。

var d =function func(){}

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

赞 (0)

相关推荐

  • async/await实现Promise.acll()简介

    目录 一.Promise.all()简介 二.async/await实现Promise.acll() 1.方式一 2.方式二 三.async/await与Promise.acll()结合使用 一.Promise.all()简介 Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个

  • await Streaking解决原理示例详解

    目录 前言 优化async/await demo.json 关于Promise 关于async/await 总结 前言 我们现在在请求接口的过程中,已经习惯了async/await的写法,已经逐渐的代替了promise的写法,但我们在开发的过程中,都是混用的状态,当你体验async/await过的好,就会爱不释手. async/await我们要拒绝 Streaking,啥叫 Streaking,我们看个代码. const foo = async () => { const response =

  • ES7中await如何优雅的捕获异常详解

    目录 传统方式 await-to-js 安装 使用 源码 测试用例 结束语 本篇文章介绍的是ES7中await语法糖在调用的时候出现异常如何捕获? 传统方式 try { const res = await getUser(id) }catch(err){ console.log(err) } await让我们使用异步方式开发的代码简便不少,但是每次使用如果都用try..catch来捕获异常反而埋没了它的优势. [ err, user ] = await to(UserModel.findById

  • async/await实现Promise.all()的方式

    目录 一.Promise.all()简介 二.async/await实现Promise.all() 1.方式一 2.方式二 三.async/await与Promise.all()结合使用 一.Promise.all()简介 Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组

  • await 错误捕获实现方式源码解析

    目录 前言 Promise 的使用方法 await-to-js 源码 总结 前言 Promise 是一种在 JavaScript 中用于处理异步操作的机制.Promise 在开发中被广泛使用,这篇文章将学习如何优雅的捕获 await 的错误. 资源: 仓库地址:await-to-js 参考文章:How to write async await without try-catch blocks in Javascript (grossman.io) Promise 的使用方法 创建一个 Promi

  • JavaScript async/await使用详解

    目录 一.简介 二.async 三.await 四.案例 附-直接量/字面量 一.简介 async/await是ES20717引入的,主要是简化Promise调用操作,实现了以异步操作像同步的方式去执行,async外部是异步执行的,同步是await的作用. 二.async async,英文意思是异步,当函数(包括函数语句.函数表达式.Lambda表达式)前有async关键字的时候,并且该函数有返回值,函数执行成功,那么该函数就会调用Promise.resove()并隐式的返回一个Promise对

  • C#异步编程async/await用法详解

    C#异步编程async/await用法详解

    异步函数简介 一般指 async 修饰符声明得.可包含await表达式得方法或匿名函数. 声明方式 异步方法的声明语法与其他方法完全一样, 只是需要包含 async 关键字.async可以出现在返回值之前的任何位置, 如下示例: async public static void GetInfoAsync() { //... } public async static void GetInfoAsync() { //... } public static async void GetInfoAsy

  • Node.js如何对SQLite的async/await封装详解

    前言 本文主要给大家介绍的是关于Node.js对SQLite的async/await封装的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 用于将每个SQLite函数同步化,并可以用await的接口. 注意:需要SQLite for Node模块和Node.js 8.0+,并支持async / await. SQLite最常用作本地或移动应用程序的存储单元,当需要从程序的各个部分访问数据时,回调不是最佳解决方案. 为了在程序程序中更自然地访问数据,我编写了一个将回调转换为

  • C#多线程系列之async和await用法详解

    C#多线程系列之async和await用法详解

    目录 async和await async await 从以往知识推导 创建异步任务 创建异步任务并返回Task 异步改同步 说说awaitTask 说说 asyncTask<TResult> 同步异步? Task封装异步任务 关于跳到await变异步 为什么出现一层层的await async和await async 微软文档:使用 async 修饰符可将方法.lambda 表达式或匿名方法指定为异步. 使用 async 修饰的方法,称为异步方法. 例如: 为了命名规范,使用 async 修饰的

  • javascript中Promise使用详解

    目录 一.首先,要知道为什么要用Promise语法? 二.接着,来了解一下回调地狱(Callback Hell) 三.最后,也是本章的重头戏,Promise的基本使用 (一) resolve函数 (二) rejected函数 (三)Promise的API 1. then 2. catch 3. finally 4. Promise.all 5. Promise.race 四.最后 前言: 做过前端开发的都知道,JavaScript是单线程语言,浏览器只分配给JS一个主线程,用来执行任务,但是每次

  • JavaScript实现瀑布流布局详解

    JavaScript实现瀑布流布局详解

    目录 需求 思路 代码实现 实现效果 问题和修正 修正后效果 总结 需求 所谓瀑布流布局,就是含有若干个等宽的列,每一列分别放置图片.视频等,放置的元素都是等宽的,因此可能是不等高的.新的元素到来时,会插入高度较低的那一列,这样形成参差的.视觉上像瀑布一样的布局. 这里简化一下,只要两列等宽布局展示图片即可. 思路 两列布局,直接使用flex布局实现即可.不过,这里不能设置align-items为center,如果设置了将会使图片列居中显示,不符合瀑布流的视觉效果.我设置left和right两列

  • 基于JavaScript表单脚本(详解)

    基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • JavaScript数据结构链表知识详解

    最近在看<javascript数据结构和算法>这本书,补一下数据结构和算法部分的知识,觉得自己这块是短板. 链表:存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的.每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成. 好处:可以添加或移除任意项,它会按需扩容,且不需要移动其他元素. 与数组的区别: 数组:可以直接访问任何位置的任何元素: 链表:想要访问链表中的一个元素,需要从起点(表头)开始迭代列表直到找到所需的元素. 做点小笔记. funct

  • JavaScript里 ==与===区别详解

    1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进行"值"比较,两者结果一样 2.对于Array,Object等高级类型,==和===是没有区别的 进行"指针地址"比较 3.基础类型与高级类型,==和===是有区别的 1)对于==,将高级转化为基础类型,进行"值&quo

  • JavaScript String 对象常用方法详解

    字符串是不可变的.字符串方法,不会改变原有字符串的内容,而是返回一个新字符串. charAt():返回在指定位置的字符. concat():连接两个字符串文本,并返回一个新的字符串. indexOf(): indexOf() 方法返回指定值在字符串对象中首次出现的位置. match(): 使用正则表达式与字符串相比较. replace(): 被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串. slice(): 摘取一个字符串区域,返回一个新的字符串. split(): 通过分

随机推荐