原生JS中 callback,promise,generator,async-await 的简介
callback,promise,generator,async-await 的简介
javascript异步的发展历程。
ES6 以前:
回调函数(callback):nodejs express 中常用,ajax中常用。
ES6:
promise对象:nodejs最早有bluebird promise的雏形,axios中常用。
generator函数:nodejs koa框架使用率很高。
ES7:
async/await语法:当前最常用的异步语法,nodejs koa2 完全使用该语法。
回调函数callback
回调函数实际就是一个参数;
将一个函数当做参数传到另一个函数里,当那个函数执行完后,再执行传进去的这个函数;这个过程就叫做回调。

promise对象
promise 对象用于一个异步操作的最终完成(或最终失败)及其结果的表示。
简单地说就是处理一个异步请求。我们经常会做些断言,如果我赢了你就嫁给我,如果输了我就嫁给你之类的断言。
这就是promise的中文含义:断言,一个成功,一个失败。
promise构造函数的参数是一个函数,我们把它称为处理器函数。
处理器函数接收两个函数reslove和reject作为其参数,当异步操作顺利执行则执行reslove函数, 当异步操作中发生异常时,则执行reject函数。
通过resolve传入得的值,可以在then方法中获取到,通过reject传入的值可以在chatch方法中获取到。
因为then和catch都返回一个相同的promise对象,所以可以进行链式调用

generator函数
S6的新特性generator函数(面试的时候挂在这里),中文译为生成器,在以前一个函数中的代码要么被调用,要么不被调用,还不存在能暂停的情况。
generator让代码暂停成待执行,定义一个生成器很简单,在函数名前加个*号,使用上也与普通函数有区别

上面便是一个简单的generator声明例子。
generator函数不能直接调用,直接调用generator函数会返回一个对象,只有调用该对象的next()方法才能执行函数里的代码。

执行该函数:

其实单独介绍generator并没有太大的价值,要配合key yield,才能真正发挥generator的价值。
yield能将生Generator函数的代码逻辑分割成多个部分,下面改写上面的生成器函数

可以看到这段代码执行到第一个yield处就停止了,如果要让里边所有的代码都执行完就得反复调用next()方法

generator函数与回调函数的区别
回调函数

这是一个典型的回调嵌套,过多的回调嵌套造成代码的可读性和可维护性大大降低
generator函数

generator函数的强大在于允许你通过一些实现细节来将异步过程隐藏起来,依然使代码保持一个单线程、同步语法的代码风格
async-awit
async函数返回一个promise对象,如果在async函数中返回一个直接量,async会通过Promise.resolve封装成Promise对象。
我们可以通过调用promise对象的then方法,获取这个直接量。

过async函数不返回值的结构??

await会暂停当前async的执行,await会阻塞代码的执行,直到await后的表达式处理完成,代码才能继续往下执行。
await后的表达式既可以是一个Promise对象,也可以是任何要等待的值。
如果await等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
上边你看到阻塞一词,不要惊慌,async/await只是一种语法糖,代码执行与多个callback嵌套调用没有区别。
简而言之-async/await是以同步的思维去写异步的代码,所以async/await并不会影响node的并发数
如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西

参考资源:https://www.cnblogs.com/peiyu1988/ 简单的整理和总结
原生JS中 callback,promise,generator,async-await 的简介的更多相关文章
- 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async
JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...
- Promise, Generator, async/await的渐进理解
作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...
- Callback, Promise和Async/Await的对比
Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...
- js中异步方案比较完整版(callback,promise,generator,async)
JS 异步已经告一段落了,这里来一波小总结 1. 回调函数(callback) setTimeout(() => { // callback 函数体 }, 1000) 缺点:回调地狱,不能用 t ...
- callback vs async.js vs promise vs async / await
需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...
- node.js异步控制流程 回调,事件,promise和async/await
写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
- Promise和async await详解
本文转载自Promise和async await详解 Promise 状态 pending: 初始状态, 非 fulfilled 或 rejected. fulfilled: 成功的操作. rejec ...
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
随机推荐
- Vue -- element-ui el-table 的合计在第一行显示并可点击
使用element-ui el-table 中有这样一个需求,需要将合计放在表格内容的第一行,并且点击合计可跳转到其它页面! 框架中提供了合计的属性方法,这样可以进行数值求和及自定义求和,但是,合计那 ...
- 2015 Multi-University Training Contest 10 hdu 5411 CRB and Puzzle
CRB and Puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- js js键盘各键对应的代码 ---转
0x1 鼠标左键\r 0x2 鼠标右键\r 0x3 CANCEL 键\r 0x4 鼠标中键\r 0x8 BACKSPACE 键\r 0x9 TAB 键\r 0xC CLEAR 键\r 0xD ENTE ...
- c++ 设计模式之简单的工厂模式
调试环境:vs2010 // test0.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> ...
- Visual C++ 经常使用快捷键
大写和小写 Ctrl+Shift+U: 所有变为大写 Ctrl+U: 所有变为小写 凝视 Ctrl+K+Crtr+C: 凝视选定内容 Ctrl+K+Crtr+U: 取消选定凝视内容 折叠 折叠代码: ...
- Android——隐藏输入法的小技巧
今天偶然在百度地图提供的DEMO里看到这样一段代码.认为确实是个小技巧,就写下来分享一下. 针对的问题: 我们在开发android界面的时候,常常使用EditText控件.然后每次进入这个页面的时候, ...
- 分享几个可用的rtsp, http測试url
rtsp://218.204.223.237:554/live/1/0547424F573B085C/gsfp90ef4k0a6iap.sdp rtsp://218.204.223.237:554/l ...
- Hibernate Tools-代码生成
建立好数据库后,点击一个键,代码就生成了,这实在是份十分满意的事情.前面有介绍Hibernate Tools就能够生成代码,那么我们怎么利用它来生成代码呢. 以下就把具体步骤贴出来,相同,有图有真相. ...
- Android开发之大位图压缩水印处理
我们在发微博或者csdn博文的时候都能够给图片加上一个水印.一个独立的标识,那是怎么实现的呢?先封装一个BitmapTools封装类.该类要解决的问题是一将突破存储至sdcard中,二给图片加上水印. ...
- UVA - 12230 Crossing Rivers 概率期望
You live in a village but work in another village. You decided to follow the straight path between y ...