点击上方“前端自习课”关注,学习起来~

作者:Aima

https://segmentfault.com/a/1190000019188824

众所周知 JavaScript 是 单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队等着,会拖延整个程序的执行。那么如何让程序像人类一样可以多线程工作呢?以下为几种异步编程方式的总结,希望与君共勉。
  • 回调函数
  • 事件监听
  • 发布订阅模式
  • Promise
  • Generator (ES6)
  • async (ES7)
异步编程传统的解决方案:回调函数事件监听
初始示例:假设有两个函数, f1 和 f2,f1 是一个需要一定时间的函数。
function f1() {
setTimeout(function(){
console.log('先执行 f1')
},1000)
}
function f2() {
console.log('再执行 f2')
}

回调函数

因为 f1 是一个需要一定时间的函数,所以可以将 f2 写成 f1 的 回调函数,将同步操作变成异步操作,f1 不会阻塞程序的运行,f2 也无需空空等待,例如 JQuery 的 ajax。
回调函数的demo:
function f1(f2){
setTimeout(function(){
console.log('先执行 f1')
},1000)
f2()
}
function f2() {
console.log('再执行 f2')
}
效果如下:
总结:回调函数易于实现、便于理解,但是多次回调会导致代码高度耦合

事件监听

脚本的执行不取决代码的顺序,而取决于某一个事件是否发生。
事件监听的demo
$(document).ready(function(){
console.log('DOM 已经 ready')
});

发布订阅模式

发布/订阅模式是利用一个消息中心,发布者发布一个消息给消息中心,订阅者从消息中心订阅该消息,。类似于 vue 的父子组件之间的传值。
发布订阅模式的 demo
//订阅done事件
$('#app').on('done',function(data){
console.log(data)
})
//发布事件
$('#app').trigger('done,'haha')

Promise

Promise 实际就是一个对象, 从它可以获得异步操作的消息,Promise 对象有三种状态,pending(进行中)、fulfilled(已成功)和rejected(已失败)。Promise 的状态一旦改变之后,就不会在发生任何变化,将回调函数变成了链式调用。
Promise 封装异步请求demo
export default function getMethods (url){
return new Promise(function(resolve, reject){
axios.get(url).then(res => {
resolve(res)
}).catch(err =>{
reject(err)
})
})
}
getMethods('/api/xxx').then(res => {
console.log(res)
}, err => {
console.log(err)
})

Generator

Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,使用该对象的 next() 方法,可以遍历 Generator 函数内部的每一个状态,直到 return 语句。
形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式, yield是暂停执行的标记。
next() 方法遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
Generator 的 demo
function *generatorDemo() {
yield 'hello';
yield 1 + 2;
return 'ok';
}
var demo = generatorDemo()
demo.next() // { value: 'hello', done: false }
demo.next() // { value: 3, done: false }
demo.next() // { value: 'ok', done: ture }
demo.next() // { value: undefined, done: ture }

async

async函数返回的是一个 Promise 对象,可以使用 then 方法添加回调函数,async 函数内部 return 语句返回的值,会成为 then 方法回调函数的参数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
1.await命令后面返回的是 Promise 对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。
async 的 demo1
async function demo() {
try {
await new Promise(function (resolve, reject) {
// something
});
} catch (err) {
console.log(err);
}
}
demo().then(data => {
console.log(data) //
})
原创系列推荐



4. 
5. 
6. 
7. 

回复“加群”与大佬们一起交流学习~

点这,与大家一起分享本文吧~

【JS】370- 总结异步编程的六种方式的更多相关文章

  1. node.js整理 06异步编程

    回调 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了 function heavyCompute(n, callback) { var count = 0, i, j; for (i = ...

  2. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

  3. 17.Node.js 回调函数--异步编程

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...

  4. 09-Node.js学习笔记-异步编程

    同步API,异步API 同步API:只有当前API执行完成后,才能继续执行下一个API console.log('before'); console.log('after'); 异步API:当前API ...

  5. 借助Q.js学习javascript异步编程。

    金字塔式 //add1 function step1(n, callback) { setTimeout(function(){ callback.call(null, n + 1); }, 100) ...

  6. C#异步编程的实现方式——ThreadPool线程池

    在需要创建的线程很多,且都是比较小的线程的情况下,可以使用线程池(ThreadPool类).ThreadPool是一个静态方法,提供了对一个线程集合的操作,它会在线程数不足时增加线程,空闲线程数过多时 ...

  7. C#异步编程的实现方式(4)——Task任务

    最基本的是知道怎么启动一个Task. 1.Task类构造函数 使用Task类的构造函数.实例化Task对象时,任务不会立即运行,而是指定Created状态.接着调用Task类的Start()方法来启动 ...

  8. JS中的同步异步编程

    首先我们先看看同步与异步的定义,及浏览器的执行机制,方便我们更好地理解同步异步编程. 浏览器是多线程的,JS是单线程的(浏览器只分配一个线程来执行JS)   进程大线程小:一个进程中包含多个线程,例如 ...

  9. js 异步编程思想

    一.js中的异步编程有四种情况 1.定时器 2.所有的事件绑定 3.ajax异步请求 4.回调函数

随机推荐

  1. 领扣(LeetCode)二叉树的中序遍历 个人题解

    给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归的思路很简单,不再累 ...

  2. PL真有意思(一):引言

    前言 断断续续学编译原理到之前发过写一个编译器和正则表达式引擎系列文章也有一段时间了,然后最近看完PLP这本书,这本书应该算是入门书,但是对我这种半吊子收获很大.所以为了弥补最近学操作系统和接外包摸的 ...

  3. vuejs学习之项目结构解读

    转载:https://www.cnblogs.com/chenleideblog/p/10484554.html 关于Vue中main.js.APP.vue和index.html之间关系 在初始化vu ...

  4. 区块链共识机制之工作量证明(POW)

    像比特币.以太坊.NXT.Bitshares等这些区块链系统,其本质上是一种加密经济组织,它建立在点对点网络上,是去中心化.无管辖的,由密码学.经济学和社会共识来共同维护.这些加密网络因各种原因有着多 ...

  5. href=”javascript:void(0);

    href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数. 为什么要使用href=” ...

  6. 使用idea来部署git项目

    使用idea来部署git项目 一).将项目交由git管理 VCS ---->import into Version Cntorl ------>create Git Repository ...

  7. 页面加载和图片加载loading

    准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 doc ...

  8. LeetCode Bash练习

    195. Tenth Line #!/bin/bash i= cat file.txt | while read line do #echo $line ] then echo $line fi le ...

  9. Nginx 代理本地文件夹(Windows环境)

    安装环境: win10 nginx-1.17.2 步骤: 一.打开nginx.conf 路径:\nginx-1.17.2\conf\nginx.conf 二.编辑 配置跨域以及代理文件夹路径 三.启动 ...

  10. Excel导入数据库(php版)

    一.环境说明 Apache+php(PHPExcel)+HTML5+JavaScript(jQuery)+MySQL 二.前端预览 三.Excel表格 四.HTML部分 <p>按照Exce ...