betway必威-betway必威官方网站
做最好的网站

javascript学习指南之回调问题,探索Javascript异步编

回调地狱

探索Javascript异步编程,探索javascript异步

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显。许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入。大家需要根据自己的情况选择一个适于自己的方法。

笔者在之前的一片博客中简单的讨论了Python和Javascript的异同,其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题。

JavaScript Promise 迷你书(中文版)

超详细介绍promise的gitbook,看完再不会promise......

本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScript中对Promise相关技术的支持情况。

通过阅读本书,我们希望各位读者能在下面三个目标上有所收获。

学习Promise相关内容,能熟练使用Promise模式并进行测试

学习Promise适合什么、不适合什么,知道Promise不是万能的,不能什么都想用Promise来解决

以ES6 Promises为基础进行学习,逐渐发展形成自己的风格

重温 ES6 核心概念和基本用法


ES6 在 2015 年 6 月就得以批准,至今已两年了。近一年多以来陆续看过很多 ES6 的资料,工作项目中也逐步的用上了很多 ES6 的特性(let,const,promise,Template strings,Class, 箭头函数等等),不得不说,这些特性给开发带来了非常的的便利。但是我的 ES6 知识其实并不够系统,这也是本文的成因,希望阅读本文能让你也能对 ES6 有更系统的理解,本文并不是那种大而全的教程,而是希望在实际工作中,能想起某个新特性可以解决你当前的问题或者优化当前的代码,然后再系统学习,应用,毕竟自己用过了才算掌握了。

解决怎么拿到 JavaScript 异步函数的返回值?


上面所有的例子,在最新 chrome 上都可以运行。一个个小例子,点了点几个名词。当然也只是 “点” 而已,如果能提供读者深入学习相关知识点的一个 trigger,那么老姚就心满意足了。

Exploring ES6 的翻译文档 [由 GitHub 的 es6-org 维护]


很多人说,阮老师已经有一本关于 ES6 的书了 - 《ECMAScript 6 入门》,觉得看看这本书就足够了。
阮老师的那本书确实不错,值得 ES6 初学者去阅读。但是阮老师对这本书的定位是“中级难度”,也就是说书中不会很深入地去剖析各个知识点,而《 Exploring ES6 》这本书就努力在向大家细致地深入地讲解 ES6 的方方面面,这也是我觉得这本书很不错的原因。

总结 ES6 常用的新特性


ES6 是即将到来的新版本 JavaScript 语言的标准,他给我们带来了更” 甜” 的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>)、class 等等。

工作中,ES6 可能掌握这些就足够了


工作中总结了一点点儿关于 ES6 常用的小知识。欢迎大家来一起探讨一起学习。

前端的异步解决方案之 Promise 和 Await/Async


异步编程模式在前端开发过程中,显得越来越重要。从最开始的 XHR 到封装后的 Ajax 都在试图解决异步编程过程中的问题。随着 ES6 新标准的出来,处理异步数据流的解决方案又有了新的变化。Promise 就是这其中的一个。我们都知道,在传统的 ajax 请求中,当异步请求之间的数据存在依赖关系的时候,就可能产生很难看的多层回调,俗称” 回调地狱”(callback hell)。另一方面,往往错误处理的代码和正常的业务代码耦合在一起,造成代码会极其难看。为了让编程更美好,我们就需要引入 promise 来降低异步编程的复杂性。

30 分钟掌握 ES6/ES2015 核心内容


我刚刚花了一个小时把作者的文章全都试了一遍,现在分享出来,希望对大家有所帮助。

玩转 Promise,随心所欲控制异步操作


在 es6 中,Promise 的使用显得尤为重要,它以一种链式的表达方式来为工程师们展示一种新的异步操作。而真正掌握它后,就会在处理各种需要的异步操作就更加得心应手,如网络请求,连续的异步操作以及错误的处理等......

Promise 必知必会(十道题)


Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。 以下 promise 均指代 Promise 实例,环境是 Node.js。 解释:Promise 构造函数是…

「大概可能也许是」目前最好的 JavaScript 异步方案 async/await


ES7 完美解决异步回调

JavaScript Promise 探微


我在 JavaScript 中使用 Promise 已经有一段时间了,目前我已经能高效的使用这一开始让我晕头转向的东西。但真要细说起来,我发现还是不能完全理解它的实现原理,这也正是本文写作的目的所在。如果诸位读者也处在一知半解的状态,那请读完这篇文章,相信你也会像我一样对 Promise 有更好的理解。

写一个符合 Promises/A 规范并可配合 ES7 async/await 使用的 Promise


写一个符合 Promises/A 规范并可配合 ES7 async/await 使用的 Promise

理解 Promise 的工作原理


Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题。本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解。

实例感受-es6的常用语法和优越性


前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是es6新特性的10%-20%,但是开发上占了80%左右的。下面的文章,按照es6常用新特…

理解 Promise 简单实现的背后原理


在写 javascript 时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的、事件监听的方式,再后来出现了 Promise、Generator、async/await 等的异步解决方案。co 模块使用了 Promise 自动执行 Generator,async/await 这个 Node7.6 开始默认支持的最新解决方案也是依赖于 Promise, 所以了解 Promise 是非常有必要的,而理解它背后的实现原理则能在使用它的时候更加游刃有余。

理解 async/await


ES7 提出的async 函数,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。 async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。 想较于 Ge…

[深入 Promise(一)——Promise 实现详解

对 JavaScript 程序员来说,处理回调是家常,但是处理层次过深的回调就没有那么美好了,下面的示例代码片段用了三层回调,再补脑一下更多层的场景,简直是酸爽,这就是传说中的回调地狱。

JavaScript 异步编程简介

](https://juejin.im/entry/58a10aa61b69e60059d1d2af)

深度好文呐!详细的阐述 Promise 的原理和实现。赞!

回调地狱的今生前世 @JavaScript


快来这里系统的了解一下 JavaScript 的异步编程吧:回调、promise、Generator、await/async

JavaScript 异步编程魔法


在单线程执行的 JavaScript 中,异步最著名的是 Ajax, 但是你仅仅知道这些吗?

Promise 异步流程控制


然而能全部答上的很少,能够给出一个回调 计数版本的,我都觉得合格了。那么接下来就一起来学习总结一下基于 Promise 来处理异步的三种方法。 最简单的,就是将异步一个个来处理,转为一个类似同步的方式来处理。 先来简单的实现一个单个 Image 来加载的 thenable …

ES6 你可能不知道的事 - 基础篇


ES6 你可能不知道的事 - 基础篇

JavaScript 进阶之路——认识和使用 Promise,重构你的 Js 代码


Promise 可能大家都不陌生,因为 Promise 规范已经出来好一段时间了,同时 Promise 也已经纳入了 ES6,而且高版本的 chrome、firefox 浏览器都已经原生实现了 Promise,只不过和现如今流行的类 Promise 类库相比少些 API。

深刻理解 ES 6 中的 Promise


Why Promise

ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解


ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式,然后讨论了 JavaScript 按值传递的特性,最后介绍了复合类型拷贝的技巧;有兴趣的可以阅读下一章节 …

ES6系列文章 异步神器async-await


关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。
经常会看到有了 async-await、promise 还有必要学习吗、async await优于pr…

手写一款 Promise


Promise 对象是用来处理异步操作的工具, 解决开发者对异步回调的烦恼。可以说 Promise 是个代理对象,在设计模式来讲就是代理模式,它代理了一个值(通过 resolve 方法传递的值),并且设置了几个状态让用户知道当前代理值解析的结果。而笔者此次按照 Promise/A+ 的规范要求,自己尝试做了一款简化版的 Promise。

ES6常用知识点概述


ES6,并不是一个新鲜的东西,ES7、ES8已经赶脚了。但是,东西不在于新,而在于总结。每个学前端的人,身边也必定有本阮老师的《ES6标准入门》或者翻译的《深入理解ECMAScript6》。本篇主要是对ES6的一些常用知识点进行一个总结。如果你喜欢我的文章,欢迎评论,欢迎Sta…

《深入理解ES6》中的代码片段,你能猜对几个?


花了3个周末看完了《深入理解ES6》,其中有许多代码段以及文字描述和我“常识”有些出入,因此记录了下来并加以验证。 有些代码段还是蛮有趣的,在此分享下。正在阅读屏幕的你,能“猜”对几个代码片段呢? 每个代码片段均有编号,格式为为try-xxx-yyy或note-xxx-yyy,其…

Promise--优雅解决回调嵌套


利用 Promise 优雅解决回调嵌套,让代码更加移动,可维护性更好

ES6 你可能不知道的事 - 进阶篇


模块化是个进行了很久的话题,发展历程中出现过很多模式,例如 AMD, CommonJS 等等。

Module 是 ES6 的新特性,是语言层面对模块化的支持。

我所知道的 JavaScript 异步编程


没有搞定异步编程的 JS 开发者不是称职的开发者。

入门 JS 算是一年了,从当时直接使用回调到后来开始大量使用 async 库,期间冒出的 promise、generator 都完全没有去管它。然后然后最近就被鄙视了一番 (哭泣。。。。)。

三年内前端新人需要掌握的ES6知识-视频教程


ES6已经在工作中全面使用,作为一个前端,你需要掌握文章中的这些知识,并带上了视频教程,希望可以帮助更多的小伙伴。

八段代码彻底掌握 Promise


1.Promise的立即执行性 var p = new Promise(function(resolve, reject){ console.log("create a promise"); resolve("success"); }); console.log("after n…

深入理解 ES7 的 async/await


async/await 可以说是 ES7 加入的解决 js 异步的终极武器,虽然 ES7 到目前为止还未发布,但是幸好,最新的 nodejs 已支持该特性,让我们试试这个武器的威力吧

深入理解 Promise (下)


经过几天源码研究学习之后,基本上对 Promise 有了深入的了解,也手动封装了自己了 Promise 工具类,下面就是我们去在应用场景中去验证这个工具类的使用了

也许是史上最全的前端资源大汇总


最近有很多朋友问有没有相关的书籍推荐,希望能够自学一下前端。这里列出了学习前端所需要的,几乎所有的知识,分享给大家。

Promise 之深度解析


深度解析 Promise 的知识点。

Async/Await 替代 Promise 的 6 个理由


Node.js 的异步编程方式有效提高了应用性能;然而回调地狱却让人望而生畏,Promise 让我们告别回调函数,写出更优雅的异步代码;在实践过程中,却发现 Promise 并不完美;技术进步是无止境的,这时,我们有了 Async/Await。

异步与回调的设计哲学


本文的例子用 JavaScript 语法给出,希望读者至少有使用过 Promise 的经验,如果用过 async/await 则更好,对于客户端的开发者,我相信语法不是阅读的瓶颈,思维才是,因此也可以了解一下异步编程模型的演变过程。 异步编程入门 CPS CPS 的全称是 (C…

深入理解 Promise (中)


经过上一篇 深入理解 Promise (上) 的理论知识和用法学习,这一篇让我们深入源码层面,一步一步去封装一个 Promise,去了解 Promise 的内部实现,以便我们在项目中对 Promise 的使用运用自如。

30 分钟搞定 ES6 常用基础知识


ES6 常用基础知识划重点。明确学习方向。

快速将 Promise 运用在开发中


这篇文章面向对 Promise 不甚了解的朋友,我将告诉你如何把它快速运用在开发中。 什么是 Promise? 简单几句介绍一下。Promise 是抽象异步处理对象以及对其进行各种操作的组件。你可以理解为:它的出现,是为了让我们更方便的进行异步处理。 在 Promise 出现之前,说到 Ja…

深入理解 Promise (上)


自从 ES6 流行起来,Promise 的使用变得更频繁更广泛了,比如异步请求一般返回一个 Promise 对象,Generator 中 yield 后面一般跟 Promise 对象,ES7 中 Async 函数中 await 后面一般也是 Promise 对象,还有更多的 NodeAPI 也会返回 Promise 对象,可以说现在的编程中 Promise 的使用无处不在,那么我们是否真的弄懂了 Promise 呢?是否有误用或错误使用 Promise 呢?是否知道 Promise 的实现原理和 Promise 的花样玩法呢?下面让我们一起来探讨一下吧。

精通 Javascript 中的 Promise


精通 Javascript 中的 Promise

深入理解 JavaScript 异步


什么是异步,异步的实现原理,event-loop,以及和事件绑定的关系。

exports、module.exports 和 export、export default 到底是咋回事


前言 难得有空,今天开始重新规范的学习一下node编程。 但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export 、export default。 阿西吧,头都大了.... 头大完了,那我们坐下先理理他们的使用范围。 require: node 和 es…

JavaScript 初学者必看 “箭头函数”


译者按: 箭头函数看上去只是语法的变动,其实也影响了 this 的作用域。 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 本文…

彻底理解 Javascript 中的 Promise


彻底理解 Javascript 中的 Promise

getDirectories(function(dirs) {
  getFiles(dirs[0], function(files) {
    getContent(files[0], function(file, content) {
      console.log('filename:', file);
      console.log(content);
    });
  });
});

function getDirectories(callback) {
 setTimeout(function() {
  callback(['/home/ben']);
 }, 1000);
}

function getFiles(dir, callback) {
  setTimeout(function() {
    callback([dir   '/test1.txt', dir   '/test2.txt']);
  }, 1000)
}

function getContent(file, callback) {
  setTimeout(function() {
    callback(file, 'content');
  }, 1000)
}

回调函数和异步执行

所谓的异步指的是函数的调用并不直接返回执行的结果,而往往是通过回调函数异步的执行。

我们先看看回调函数是什么:

1 2 3 4 5 6 7 8 9 10 11 12 var fn = function(callback) {     // do something here     ...     callback.apply(this, para); };    var mycallback = function(parameter) {     // do someting in customer callback };    // call the fn with callback as parameter fn(mycallback);

回调函数,其实就是调用用户提供的函数,该函数往往是以参数的形式提供的。回调函数并不一定是异步执行的。比如上述的例子中,回调函数是被同步执行的。大部分语言都支持回调,C 可用通过函数指针或者回调对象,Java一般也是使用回调对象。

在Javascript中有很多通过回调函数来执行的异步调用,例如setTimeout()或者setInterval()。

1 2 3 setTimeout(function(){     console.log("this will be exectued after 1 second!"); },1000);

在以上的例子中,setTimeout直接返回,匿名函数会在1000毫秒(不一定能保证是1000毫秒)后异步触发并执行,完成打印控制台的操作。也就是说在异步操作的情境下,函数直接返回,把控制权交给回调函数,回调函数会在以后的某一个时间片被调度执行。那么为什么需要异步呢?为什么不能直接在当前函数中完成操作呢?这就需要了解Javascript的线程模型了。

解决方案

Javascript线程模型和事件驱动

Javascript最初是被设计成在浏览器中辅助提供HTML的交互功能。在浏览器中都包含一个Javascript引擎,Javscript程序就运行在这个引擎之中,并且只有一个线程。单线程能都带来很多优点,程序员们可以很开心的不用去考虑诸如资源同步,死锁等多线程阻塞式编程所需要面对的恼人的问题。但是很多人会问,既然Javascript是单线程的,那它又如何能够异步的执行呢?

这就需要了解到Javascript在浏览器中的事件驱动(event driven)机制。事件驱动一般通过事件循环(event loop)和事件队列(event queue)来实现的。假定浏览器中有一个专门用于事件调度的实例(该实例可以是一个线程,我们可以称之为事件分发线程event dispatch thread),该实例的工作就是一个不结束的循环,从事件队列中取出事件,处理所有很事件关联的回调函数(event handler)。注意回调函数是在Javascript的主线程中运行的,而非事件分发线程中,以保证事件处理不会发生阻塞。

Event Loop Code:

1 2 3 4 5 6 7 8 while(true) {  var event = eventQueue.pop();  if(event && event.handler) {      event.handler.execute(); // execute the callback in Javascript thread  } else {      sleep(); //sleep some time to release the CPU do other stuff  } }

通过事件驱动机制,我们可以想象Javascript的编程模型就是响应一系列的事件,执行对应的回调函数。很多UI框架都采用这样的模型(例如Java Swing)。

那为什要异步呢,同步不是很好么?

异步的主要目的是处理非阻塞,在和HTML交互的过程中,会需要一些IO操作(典型的就是Ajax请求,脚本文件加载),如果这些操作是同步的,就会阻塞其它操作,用户的体验就是页面失去了响应。

综上所述Javascript通过事件驱动机制,在单线程模型下,以异步回调函数的形式来实现非阻塞的IO操作。

生态圈中有很多异步解决方案可以处理回调地狱的问题,比如 bluebird、Q 等,本文重点介绍 ECMAScript 6/7 规范中对异步编程的支持。

Javascript异步编程带来的挑战

Javascript的单线程模型有很多好处,但同时也带来了很多挑战。

ES6 Promise

代码可读性

想象一下,如果某个操作需要经过多个非阻塞的IO操作,每一个结果都是通过回调,程序有可能会看上去像这个样子。

1 2 3 4 5 6 7 8 9 10 11 operation1(function(err, result) {     operation2(function(err, result) {         operation3(function(err, result) {             operation4(function(err, result) {                 operation5(function(err, result) {                     // do something useful                 })             })         })     }) })

我们称之为意大利面条式(spaghetti)的代码。这样的代码很难维护。这样的情况更多的会发生在server side的情况下。

Promise 是一种异步编程的解决方案,是解决回调地狱问题的利器。

流程控制

异步带来的另一个问题是流程控制,举个例子,我要访问三个网站的内容,当三个网站的内容都得到后,合并处理,然后发给后台。代码可以这样写:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var urls = ['url1','url2','url3']; var result = [];    for (var i = 0, len = urls.length(); i < len; i ) {     $.ajax({         url: urls[i],         context: document.body,         success: function(){           //do something on success           result.push("one of the request done successfully");           if (result.length === urls.length()) {               //do something when all the request is completed successfully           }         }}); }

上述代码通过检查result的长度的方式来决定是否所有的请求都处理完成,这是一个很丑陋方法,也很不可靠。

本文由betway必威发布于网页设计,转载请注明出处:javascript学习指南之回调问题,探索Javascript异步编

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。