ES7的Async/Await

最新推荐文章于 2024-08-02 17:39:00 发布
最新推荐文章于 2024-08-02 17:39:00 发布
阅读量221 收藏
点赞数
分类专栏： Javascript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chy2z/article/details/80104156
版权
1 阅读前， 需对promise和ES6(ECMA2015)有所了解，会更容易理解
2 代码如下，运行代码时把start1(),start2(),start3()注释去掉
<!DOCTYPE html >
< html >
< head >
< meta charset= "UTF-8" >
< title >async </ title >
</ head >
< script type= "text/javascript" >
 
/**
async 表示这是一个async函数，await只能用在这个函数里面。
 
await 表示在这里等待promise返回结果了，再继续执行。
 
await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
 
await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。
*/
 
//=======================================================
 
var sleep = function ( time) {
return new Promise( function ( resolve, reject) {
setTimeout( function () {
     resolve( 'ok'); //await等待可以得到返回值
}, time);
})
};
 
var start1 = async function () {    
console. log( 'start');
let result = await sleep( 3000); //等待sleep执行完毕，才会继续执行
console. log( result);
console. log( 'end');
};
 
//start1();
 
 
//=======================================================
 
var ajax = function ( time) {
return new Promise( function ( resolve, reject) {
setTimeout( function () {
     reject( 'ajaxCancel'); //async会产生异常,在catch中获取值
}, time);
})
};
 
var start2 = async function () {    
     try{
     console. log( 'loading.....');
     let result = await ajax( 3000);
     console. log( result);
     console. log( 'ajaxEnd');
    } catch ( err) {
console. log( err); // 这里捕捉到错误 `error`
}
};
 
//start2();
 
 
 
//=======================================================
    
let datas = [ 1, 2, 3, 4, 5];
    
var receive = function ( time, index) {
return new Promise( function ( resolve, reject) {
setTimeout( function () {
     resolve( index);
}, time);
})
};
 
var start3 = async function () {    
     try{
     console. log( 'receiving.....');
    
     for( var v of datas) {
     console. log( `当前是第 ${ v } 次等待..`);
     let result = await receive( 1000, v);
     console. log( "receiv"+ result);
     }
    
     console. log( 'receiveEnd');
    
    } catch ( err) {
console. log( err); // 这里捕捉到错误 `error`
}
};
 
//start3();
 
 
//=======================================================
 
< / script >
< body >
</ body >
</ html >
黑暗行动
关注
专栏目录
ES7之Async/await的使用详解
weixin_44526331的博客
04-11 300
在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。 Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 await 操作符用于等待一个Promise 对象吗。。它只能在异...
详解小程序原生使用ES7 async/await语法
10-18
小程序原生使用ES7 async/await语法是现代JavaScript异步编程的简洁语法糖，它能够使异步代码的书写更加直观和易于理解。async/await是基于Promise的一种语法，可以让异步操作以同步的方式书写，提高代码的可读性...
快速理解和使用 ES7 await/async
大灰狼的小绵羊哥哥的博客
05-14 5189
await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next Stage 4 阶段。 https://segmentfault.com/a/1190000007116715 直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据 老朋友 Ajax 传
JS【详解】在 node.js 中 JS 代码的执行顺序
最新发布
朝阳39的博客
08-02 234
在 node.js 中，JS 代码同样分同步任务、异步任务，异步任务包含宏任务和微任务。
ES7前端异步玩法：async/await理解
dc1339485的博客
11-30 266
在最新的ES7（ES2017）中提出的前端异步特性：async、await。 什么是async、await？ async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用 通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的...
ES7的async/await
橘导的博客
09-29 451
是es7推出的一套关于异步的终极解决方案。用同步的思维来解决异步问题。 更多异步解决方案可见：❤️前端异步解决方案大全最新版❤️(2021版)_纸飞机博客-CSDN博客 async 1，async作为关键字放到函数前面，用于表示函数是一个异步函数。该函数的执行不会阻塞后面代码的执行。 2，async函数返回的是一个promise对象，可以调用then方法获取到promise的结果值。 3，async返回promise原理：如果async函数中有返...
ES7之async/await
sunpowerz的博客
05-27 262
async/await是写异步代码的新方式，基于Promise实现的，在语法上更加简洁。 Async/Await基本规则 async 表示这是一个async函数，await只能用在这个函数里面。 await 表示在这里等待promise返回结果了，再继续执行。 await 后面跟着的应该是一个promise对象（当然其他返回值也可以，只不过会立即执行，就没有意义了） 例子 let ...
深入理解ES7的async/await的用法
08-29
深入理解ES7的async/await用法 ES7的async/await是解决JavaScript异步编程的重要概念，它能够使得异步代码更易读、更易维护。本文将深入探讨async/await的用法，并与Promise和co模块进行比较。 1. async/await是...
三分钟学会用ES7中的Async/Await进行异步编程
08-27
**异步编程与ES7的Async/Await** 在JavaScript中，异步编程是处理I/O操作、网络请求或定时任务的关键。传统的回调函数和Promise模式虽然有效，但在编写复杂的异步逻辑时，代码往往变得难以理解和维护。为了解决这个...
ES7新增async-await
Congnandaobei的博客
06-25 313
const fs = require('fs'); let read = (path) => { return new Promise((resolve, reject) => { fs.readFile(path, 'utf-8', (err, data) => { err ? reject(err) : resolve(dat...
async和await使用简单实例
08-30
网上摘抄的简单实例，可能网上找得到。我这里就直接把代码弄出来 大家单步执行，既能知道async和await的用法
ES7中async和 await的用法
weixin_39458031的博客
01-16 1742
在es6中，我们使用promise 来处理异步操作，感觉还是有点繁琐，今天介绍一种新的语法 async和 await，也是用来处理异步操作的 async 起什么作用？ async： 异步的意思。看代码 async function testAsync() { return "hello async"; } console.log( testAsync() ) //输出结果是 Promis...
快速理解ES7 await/async
Freedom的blog
02-06 332
await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next Stage 4 阶段。 直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法，无需解释 // 获取产品数据 ajax('products.json', (products)
理解 JavaScript 的 async/await
weixin_34377919的博客
11-19 374
随着 Node 7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里，而是在 c# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用，因此我还很悲伤了一阵——为了要兼容 XP 系统...
深入理解ES7的async/await
qq_31261131的博客
07-23 711
参考原文： https://blog.csdn.net/sinat_17775997/article/details/60609498 在js中我们可以使用Promise方便地进行异步操作，但是有时候会有两个异步操作之间需要保证先后关系，比如请求一次数据A，A数据得到后然后再请求数据B。 要解决上述问题，以往情况下我们可以在请求A数据的Promise的then中再new 一个Promise来...
async await
cyyy1223的博客
01-02 268
概念：是generator函数的语法糖，让异步操作更加方便,实际上是promise和yield的结合体用法：async  function 函数名(){await 语句}与generator的区别1.*星号换成async ,yield换成await,await只能用在async函数里2.返回值为Promise对象可使用.then方法继续操作，generator对象返回值为迭代器对象使用.next方...
异步神器async-await
天空影
10-18 479
异步神器async-await
深入浅出ES7 async/await使用详解
"深入理解ES7的async/await用法" ES7的async/await是一种语法糖，用于解决JavaScript异步编程的难题。async/await可以将异步代码写得更加简洁、易读和易维护。在本文中，我们将深入探讨async/await的用法、优点和与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值