所谓异步就是指给定了一串函数调用a,b,c,d,各个函数的执行完结返回过程并不顺序为a->b->c->d(这属于传统的同步编程模式),a,b,c,d调用返回的时机并不确定。

对于js代码来说,这种异步编程尤其重要并大量存在,很大的原因是js为单线程模式,其中包含了ui刷新和响应。想像一下,如果我们写了一段js代码,他会发起ajax请求,如果为同步模式,就意味着这时js单线程一直等待这个ajax完成,这期间是不能响应任何用户交互的,这种体验是不可接受的。现在随着服务端js-nodejs的兴起,其超强的异步模式更为nodejs相较于php,java等成熟后端语言的卖点。所有和IO相关的都应该设计成异步模式(比如磁盘IO,网络请求等)

实现异步编程模式可以有以下方式:

1. 回调callback,

看以下nodejs代码:需要注意的是,即使在服务端的nodejs环境中,其运行模型也是单线程模型https://blog.csdn.net/j2IaYU7Y/article/details/81623516

// 遍历目录,找出最大的一个文件
// nodejs的readdir为一个典型的异步调用过程,函数调用马上返回,但是结果却等到目录扫描完成后,调用回调函数来通知应用去处理 const fs = require('fs');
const path = require('path'); function findLargest(dir, callback) {
fs.readdir(dir, function (err, files) {
if (err) return callback(err); // [1]
let count = files.length; // [2]
let errored = false;
let stats = [];
files.forEach( file => {
fs.stat(path.join(dir, file), (err, stat) => {
if (errored) return; // [1]
if (err) {
errored = true;
return callback(err);
}
stats.push(stat); // [2] if (--count === 0) {
let largest = stats
.filter(function (stat) { return stat.isFile(); })
.reduce(function (prev, next) {
if (prev.size > next.size) return prev;
return next;
});
callback(null, files[stats.indexOf(largest)]);
console.log('readdir finished!')
}
});
});
});
console.log('before readdir callback called!')
} findLargest('./', function (err, filename) {
if (err) return console.error(err);
console.log('largest file was:', filename);
});
// 其执行log如下
before readdir callback called!
largest file was: halls-test.js
readdir finished!

我们看看通过node --inspect-brk 调试的过程:

$ node --inspect-brk maxfile.js
Debugger listening on ws://127.0.0.1:9229/ed354fe8-fdfc-466b-b0ea-fcc7fccb4b36
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
before readdir callback called!
largest file was: halls-test.js
readdir finished!
Waiting for the debugger to disconnect...

callback导致的问题是无法通过try catch截取错误,并且当回调嵌套时流程更加显得复杂,程序可读性差;callback将在fs.readdir的function参数中调用,该callback(本例中实际上是fs.readdir的function参数)将被fs.readdir调用操作真正异步执行完成时(本身函数调用立即返回,而执行通过系统调用异步执行),放入javascript event queue中,底层readdir实际操作(往往是由js引擎c++代码执行)结束后,将有event发生,这时会将该callback function放到event queue中(并包含了对应的readdir返回数据),从而由event loop引擎在js主线程的运行周期的适当时机来调用

2. promise

promise代表了一个异步操作最终的结果,它是一个对象,代表着延迟计算(deferred computation)的最终结果(除了延迟计算,更多的是一个异步的IO操作). promise也是一种状态机,它有三个不同的状态:pending, fulfilled,rejected.一旦promise完成(fulfilled,或者rejected),它就不能再被变更状态。

when a promise is ready, its .then/catch/finally handlers are put into the queue

当promise resolve/reject时,也就是该promise ready时,会将promise的then定义的handler插入event queue,在下一个event loop周期时,如果主线程没有任务执行了,将被取出执行

再看看以下代码对应的解读:

let promise = Promise.resolve();

promise.then(() => alert("promise done"));

alert("code finished"); // this alert shows first

如果我们希望promise done的打印在code finished打印之前,怎么办?答案是then的链接,每一个then都会返回一个新的promise

Promise.resolve()
.then(() => alert("promise done!"))
.then(() => alert("code finished"))

promise 的实现机制: https://juejin.im/post/5a30193051882503dc53af3c#heading-14

Promise.resolve schedule a microtask and the setTimeout schedule a macrotask. And the microtasks are executed before running the next macrotask

使用XMLHttpRequest实现promise形式的ajax

function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url); req.onload = function() { // 这里是原生的callback api,也就是当onload事件发生时会被event loop调用,从而通过resolve再push到event queue中,对应then中的handler被下一个loop调用
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
}; // Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
}; // Make the request
req.send();
});
}

https://developers.google.com/web/fundamentals/primers/promises?hl=zh-tw

get('story.json').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
})

3. ES7 async/await关键字

var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 返回 ‘ok’
resolve('ok');
}, time);
})
};
var sleepwithReject = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 返回 ‘ok’
reject('Error');
}, time);
})
}; var start = async function () {
let result = await sleep(3000);
console.log(result); // 收到 ‘ok’
};
var reject = async function () {
try{
let result = await sleepwithReject(3000);
console.log(result); // 不会执行,因为被reject了,会触发一个异常
}catch (err){
console.log(err);// 这里捕捉到Error
}
}
;
start()
reject()

基本规则:

1. async关键字表示这是一个async函数,await关键字只能在这个async关键字指示的函数中;

2. await表示在这里等待promise执行完成并返回结果,promise完成后才能继续执行

3. await后面跟着的应该是一个promise对象(当然如果是非promise对象,则只会立即执行)

4. await紧跟的promise resolve/reject之后其resolve或者reject返回的结果直接在这里可以synchrosely(同步地)返回

5. 如果发生错误,则可以在try catch中获取

javascript异步编程学习及实例的更多相关文章

  1. JavaScript的sleep实现--Javascript异步编程学习

    一.原始需求 最近在做百度前端技术学院的练习题,有一个练习是要求遍历一个二叉树,并且做遍历可视化即正在遍历的节点最好颜色不同 二叉树大概长这个样子: 以前序遍历为例啊, 每次访问二叉树的节点加个sle ...

  2. JavaScript异步编程

    前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...

  3. 我了解到的JavaScript异步编程

    一. 一道面试题 前段时间面试,考察比较多的是js异步编程方面的相关知识点,如今,正好轮到自己分享技术,所以想把js异步编程学习下,做个总结. 下面这个demo 概括了大多数面试过程中遇到的问题: f ...

  4. javascript异步编程的前世今生,从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  5. JavaScript异步编程(2)- 先驱者:jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

  6. 5分种让你了解javascript异步编程的前世今生,从onclick到await/async

      javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...

  7. 深入解析Javascript异步编程

    这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程 ...

  8. JavaScript 异步编程的前世今生(上)

    前言 提到 JavaScript 异步编程,很多小伙伴都很迷茫,本人花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步! 目录 part1 基础部分 什么是异步 part2 ...

  9. Javascript异步编程之一异步原理

    本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...

随机推荐

  1. C语言 严蔚敏数据结构 线性表之链表实现

    博主最近在考成都大学皇家计算机科学与技术专业,复习专业课数据结构,正好学习到线性结构中的线性表用链表这种存储结构来实现. 首先,数据结构包括1.数据的操作2.逻辑结构3.存储结构(数据结构三要素. 直 ...

  2. python的multitask模块安装

    今天参考网络上的例子,编写基于python的网络程序,遇到下面的错误. No module named 'multitask' 但是multitask的模块却始终下载不了,在网上找到的CSDN下载链接 ...

  3. 手写xpath定位公式

    做web自动化,之前我们已经将环境搭建好了,现在的话总结下怎么定位元素的 最基本的元素定位是有6种: driver.find_element_by_id("") driver.fi ...

  4. Python自动化:自动化发送邮件之SMTP

    自动发送邮件,作为自动化测试的流程之一,可以将运行后的测试报告自动发送至指定的对象,形成一次自动化的完整闭环,基于Python来实现的有关自动化发送邮件的内容,加上注释做了一个小小的整理. 话不多说直 ...

  5. 201671030113 李星宇 实验十四 团队项目评审&课程学习总结

    项目 内容 所属课程 [所属课程(https://www.cnblogs.com/nwnu-daizh/) 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 ...

  6. Layui 隐藏左侧菜单

    简单实现 //隐藏菜单 var bl = $("#LAY_app_flexible").hasClass("layui-icon-shrink-right"); ...

  7. 洛谷p1559运动员最佳匹配问题

    题目 搜索 可行性剪枝 虽然这题目是我搜二分图的标签搜到的 但是n比较小 明显可以暴力 然而只有80分 再加上可行性剪纸就行啦 就是记所有运动员他所能匹配到的最大值. 在我们搜索到第i层的时候 如果他 ...

  8. PATA1012The Best Rank(25分)

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  9. pcm音频的格式类型

    [文章内容属于多方转载内容] PCM Parameters PCM audio is coded using a combination of various parameters. Resoluti ...

  10. Spring Boot 《一》开发一个“HelloWorld”的 web 应用

    一,Spring Boot 介绍 Spring Boot不是一个新的框架,默认配置了多种框架使用方式,使用SpringBoot很容易创建一个独立运行(运行jar,内嵌Servlet).准生产级别的基于 ...