iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >await是es6还是es7的
  • 757
分享到

await是es6还是es7的

es7ES6asyncawait 2022-11-22 23:11:31 757人浏览 八月长安
摘要

本教程操作环境:windows7系统、ECMAScript 7版、Dell G3电脑。在最新的ES7(ES2017)中提出的前端异步特性:async、await。一、什么是async和awaitasync和await是ES7中新增内容,对于

教程操作环境:windows7系统、ECMAScript 7版、Dell G3电脑。

在最新的ES7(ES2017)中提出的前端异步特性:async、await。

一、什么是async和await

async和await是ES7中新增内容,对于异步操作的解决方案,它是Generator函数的语法糖。

  • async|await是编写异步的新方法,之前es6中用的是promise。
  • async|await是建立在promise基础之上的新写法。
  • async|await也是非阻塞的。

async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。

async和await它们两有一个严格规定,两者都离不开对方,但是,await只能写在async函数中。

二、用法

async如何处理返回值
async的返回值是一个promise对象,也就是说它会直接通过promise中的方法将返回值封装成一个promise对象。

async function Async() {
return "hello world";
}
const result = Async();
console.log(result);

在这里插入图片描述
从结果看来async函数返回的是promise对象,它会直接将返回值封装成一个promise对象。

如果没有返回值

async function Async() {
    console.log("hello world");
}
let result1 = Async();
console.log(result1);

2.png

从结果看来async函数返回的是promise对象,当时值是undefined。因此。在没有await的情况下,返回一个 promise 对象,并不会阻塞后面的语句。

但是await是在等待什么呢

function time(s) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function Async(value, s) {
  await time(s);
  console.log(value);
}
Async('hello world', 50);

指定 50 毫秒以后,输出hello world。

一般用await去等待async函数完成,await 等待的是一个表达式,表达式的计算结果是 promise 对象或其它值,因此,await后面实际可以接收普通函数调用或直接量。
如果await等到的不是promise对象,表达式运算结果就是它等到的东西。
如果是promise对象,await会阻塞后面的代码,等promise对象处理成功,得到的值为await表达式的运算结果。虽然await阻塞了,但await在async中,async不会阻塞,它内部所有的阻塞都被封装在一个promise对象中异步执行。

任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

async function Async() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
let result1 = Async();
console.log(result1);

在这里插入图片描述
从结果看来,第二个await语句是不会执行的,因为第一个await语句状态变成了reject。

三、Async函数的错误处理

如果await后面的异步操作出错,那么async函数返回的 promise 对象被reject了。

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // await 没有执行
}
f().then(v => console.log(a));

从结果看来,当async函数中的await只要有一个出现reject状态,则后面的await都不会执行。一般解决办法用try…catch。

// 正确的写法
let a;
async function f() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

f().then(v => console.log(a)); // 1

从结果看来,这样就很好的解决了这个问题,当有多个await不会执行时,可以都放在try…catch中。

四、结论

async|await的优点:

  • async|await解决了回调地狱的问题
  • async|await支持并发执行
  • async|await对异步处理更加简洁
  • async|await可以在try…catch中捕获错误

【推荐学习javascript高级教程】

以上就是await是es6还是es7的的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: await是es6还是es7的

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

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

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

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

下载Word文档
猜你喜欢
  • await是es6还是es7的
    本教程操作环境:windows7系统、ECMAScript 7版、Dell G3电脑。在最新的ES7(ES2017)中提出的前端异步特性:async、await。一、什么是async和awaitasync和await是ES7中新增内容,对于...
    99+
    2022-11-22
    es7 ES6 async await
  • await是es7的吗
    本文小编为大家详细介绍“await是es7的吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“await是es7的吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。await是es7。async和await是ES7...
    99+
    2023-07-04
  • es6和es7的含义是什么
    今天小编给大家分享一下es6和es7的含义是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • es2017是es6还是es8
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。“es”简介es全称“ECMAScript”,是根据 ECMA-262 标准实现的通用脚本语言,ECMA-262 标准主要规定了这门语言的语法、类型、语句...
    99+
    2022-11-22
    javascript ECMAScript
  • class是es5还是es6
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。class是es6新特性。在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。ES6 提供了更接近传统语言的写法,新引...
    99+
    2022-11-22
    class ES6
  • async是es7的吗
    这篇文章主要介绍“async是es7的吗”,在日常操作中,相信很多人在async是es7的吗问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”async是es7的吗”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-05
  • es7中的async、await使用方法示例详解
    目录一、前言二、async 和 await 的基础使用三、async \ await使用场景四、await返回打印测试五、总结async、await 是es7里面的新语法,它的作用就...
    99+
    2023-01-28
    async await使用 async await示例
  • ES7中await如何优雅的捕获异常详解
    目录传统方式await-to-js安装使用源码测试用例结束语本篇文章介绍的是ES7中await语法糖在调用的时候出现异常如何捕获? 传统方式 try { const res =...
    99+
    2022-12-12
    await 捕获异常 await 异常处理 await怎么捕获异常
  • 修饰器是es7的特性吗
    本文小编为大家详细介绍“修饰器是es7的特性吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“修饰器是es7的特性吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2024-04-02
  • 如何用ES7中的Async和Await进行异步编程
    这篇文章给大家介绍如何用ES7中的Async和Await进行异步编程,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Async/Await基本规则async 表示这是一个async函数,...
    99+
    2024-04-02
  • promise是不是es6的
    本篇内容主要讲解“promise是不是es6的”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“promise是不是es6的”吧!是的。promise是ECMAScript 6新增的引用类型,表示一...
    99+
    2023-07-04
  • foreach是不是es6里的
    本文小编为大家详细介绍“foreach是不是es6里的”,内容详细,步骤清晰,细节处理妥当,希望这篇“foreach是不是es6里的”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。...
    99+
    2024-04-02
  • async await的用法是什么
    async/await 是 JavaScript 中用于处理异步操作的关键字组合。async 关键字用于声明一个函数是异步函数,该函...
    99+
    2023-10-07
    async
  • es2015是不是es6
    这篇文章主要介绍了es2015是不是es6的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es2015是不是es6文章都会有所收获,下面我们一起来看看吧。es2015是es6。es全称“ECMAScript”,是...
    99+
    2023-07-04
  • es2017是不是es6
    这篇文章主要介绍“es2017是不是es6”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es2017是不是es6”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • promise是es6的吗
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。ECMAScript 6 增加了对 Promises/A+ 规范的完善支持,即 Promise 类型。一经推出,Promise 就大受欢迎,成为了主导性的...
    99+
    2022-11-22
    ES6 promise
  • es6的class是不是函数
    本篇内容介绍了“es6的class是不是函数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • react.js是不是用es6写的
    这篇文章主要介绍了react.js是不是用es6写的的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react.js是不是用es6写的文章都会有所收获,下面我们一起来看看吧。react.js是用es6写的,可以用...
    99+
    2023-07-04
  • let是不是es6的语法
    这篇文章主要介绍了let是不是es6的语法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇let是不是es6的语法文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • filter是不是es6的方法
    这篇“filter是不是es6的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“filt...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作