JS 异步已经告一段落了,这里来一波小总结

1. 回调函数(callback)

  1. setTimeout(() => {
  2. // callback 函数体
  3. }, 1000)

缺点:回调地狱,不能用 try catch 捕获错误,不能 return

回调地狱的根本问题在于:

  • 缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符
  • 嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,即(控制反转
  • 嵌套函数过多的多话,很难处理错误
  1. ajax('XXX1', () => {
  2. // callback 函数体
  3. ajax('XXX2', () => {
  4. // callback 函数体
  5. ajax('XXX3', () => {
  6. // callback 函数体
  7. })
  8. })
  9. })

优点:解决了同步的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。)

2. Promise

Promise就是为了解决callback的问题而产生的。

Promise 实现了链式调用,也就是说每次 then 后返回的都是一个全新 Promise,如果我们在 then 中 return ,return 的结果会被 Promise.resolve() 包装

优点:解决了回调地狱的问题

  1. ajax('XXX1')
  2. .then(res => {
  3. // 操作逻辑
  4. return ajax('XXX2')
  5. }).then(res => {
  6. // 操作逻辑
  7. return ajax('XXX3')
  8. }).then(res => {
  9. // 操作逻辑
  10. })

缺点:无法取消 Promise ,错误需要通过回调函数来捕获

3. Generator

特点:可以控制函数的执行,可以配合 co 函数库使用

  1. function *fetch() {
  2. yield ajax('XXX1', () => {})
  3. yield ajax('XXX2', () => {})
  4. yield ajax('XXX3', () => {})
  5. }
  6. let it = fetch()
  7. let result1 = it.next()
  8. let result2 = it.next()
  9. let result3 = it.next()

4. Async/await

async、await 是异步的终极解决方案

优点是:代码清晰,不用像 Promise 写一大堆 then 链,处理了回调地狱的问题

缺点:await 将异步代码改造成同步代码,如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

  1. async function test() {
  2. // 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
  3. // 如果有依赖性的话,其实就是解决回调地狱的例子了
  4. await fetch('XXX1')
  5. await fetch('XXX2')
  6. await fetch('XXX3')
  7. }

下面来看一个使用 await 的例子:

  1. let a = 0
  2. let b = async () => {
  3. a = a + await 10
  4. console.log('2', a) // -> '2' 10
  5. }
  6. b()
  7. a++
  8. console.log('1', a) // -> '1' 1

对于以上代码你可能会有疑惑,让我来解释下原因

  • 首先函数 b 先执行,在执行到 await 10 之前变量 a 还是 0,因为 await 内部实现了 generatorgenerator 会保留堆栈中东西,所以这时候 a = 0 被保存了下来
  • 因为 await 是异步操作,后来的表达式不返回 Promise 的话,就会包装成 Promise.reslove(返回值),然后会去执行函数外的同步代码
  • 同步代码执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候 a = 0 + 10

上述解释中提到了 await 内部实现了 generator,其实 await 就是 generator 加上 Promise的语法糖,且内部实现了自动执行 generator。如果你熟悉 co 的话,其实自己就可以实现这样的语法糖。

js中异步方案比较完整版(callback,promise,generator,async)的更多相关文章

  1. 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async

    JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...

  2. Callback, Promise和Async/Await的对比

    Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...

  3. Web worker 与JS中异步编程的对比

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...

  4. 关于js中异步问题的解决方案

    在js中有一个始终无法绕过的问题,如何优雅地解决异步问题.实际上,js在执行过程中,每遇到一个异步函数,都会将这个异步函数放入一个异步队列中,只有当同步线程执行结束之后,才会开始执行异步队列中的函数, ...

  5. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  6. 一篇文章彻底搞懂异步,同步,setTimeout,Promise,async

    之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章.观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同 ...

  7. js对数组去重的完整版

    数组去重是很常见的一个需求,而各种各样的姿势也很多,常见的如indexOf,或者hash,但是他们还是有缺陷,这里我查了一些资料做补充. 一般方式 //一般方法->使用indexOf Array ...

  8. 基于JS的身份证验证(完整版)

    var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...

  9. java--css+js做的树形菜单(完整版)

    jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

随机推荐

  1. SpringCloud学习系列之七 ----- Zuul路由网关的过滤器和异常处理

    前言 在上篇中介绍了SpringCloud Zuul路由网关的基本使用版本,本篇则介绍基于SpringCloud(基于SpringBoot2.x,.SpringCloud Finchley版)中的路由 ...

  2. GO:字符串Slice后乱码问题

    遇到的问题:用Slice 直接截取字符串的时候会出现乱码现象 package main import ( "fmt" ) func main() { str := "我的 ...

  3. 使用ffmpeg编码时,如何设置恒定码率,并控制好关键帧I帧间隔

    1. 大家在使用ffmpeg进行视频编码时,使用-b命令,想控制比特率,却发现结果并没有如我们设置所愿,通过码流分析器观察视频码流,码率的波动还是很大的,ffmpeg控制的并不好,这时候,我们可以通过 ...

  4. Bzoj 3380: [Usaco2004 Open]Cave Cows 1 洞穴里的牛之一

    3380: [Usaco2004 Open]Cave Cows 1 洞穴里的牛之一 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 64  Solved ...

  5. LInux temp 目录太小不够用问题

    2013-10-18 11:01 可以自己建一个临时 目录看看 dev /#su - root #mkdir /opt/tmp #chown root /opt/tmp/ #chgrp root /o ...

  6. 开发中mybatis的一些常见问题记录

    一.oracle数据库通过mybatis的批量插入的两种方式 方式1 insert into table_tmp (id,v1,v2,v3,v4) SELECT A.*,OSM_VIID_DEVICE ...

  7. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  8. openstack安装newton版本Nova部署(三)

    一.控制节点安装部署Nova Nova 包含API(负责接收相应外部请求,支持OpenStackAPI,EC2API):cert:负责身份认证:schedule:用于云主机调度(虚拟机创建在哪台主机上 ...

  9. Kaggle八门神器(一):竞赛神器之XGBoost介绍

    Xgboost为一个十分有效的机器学习模型,在各种竞赛中均可以看到它的身影,同时Xgboost在工业届也有着广泛的应用,本文以Titanic数据集为研究对象,简单地探究Xgboost模型建模过程,同时 ...

  10. C#关键字:yield

    yield是C#为了简化遍历操作实现的语法糖.在语句中使用 yield 关键字,表示在该关键字所在的方法.运算符或 get 访问器是迭代器.有两种形式: yield return <expres ...