JS异步解决方案及优缺点
1. 回调函数
优点: 解决了同步的问题(只要有一个任务耗时长后面的任务都会等待,会拖延程序执行)
缺点: 回调地狱 不能用try catch捕获 不能用 return
setTimeout(() => {
// callback 函数体
}, 1000)
2. promise
优点: 解决了回调地狱问题
缺点: 无法取消promise 错误需要通过回调函数捕获
ajax('XXX1', () => {
// callback 函数体
ajax('XXX2', () => {
// callback 函数体
ajax('XXX3', () => {
// callback 函数体
})
})
})
ajax('XXX1')
.then(res => {
// 操作逻辑
return ajax('XXX2')
}).then(res => {
// 操作逻辑
return ajax('XXX3')
}).then(res => {
// 操作逻辑
})
3.Generator
缺点:如果不适用执行器的情况可能阅读性会很差
特点:可以控制函数的执行,可以配合co函数库使用
function *fetch() {
yield ajax('XXX1', () => {})
yield ajax('XXX2', () => {})
yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()
4. async/await
优点: 代码清晰,不像promise一大堆 .then
缺点:await将异步代码改造为同步代码,如果多个异步操作没有依赖性而使用await 会导致性能降低
async function test() {
// 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
await fetch('XXX1')
await fetch('XXX2')
await fetch('XXX3')
}
JS异步解决方案及优缺点的更多相关文章
- JS异步解决方案
前言 异步最早的解决方案是回调函数,如ajax,事件的回调,setInterval/setTimeout中的回调.但是回调函数有回调地狱的问题; 为了解决回调地狱的问题,社区提出了Promise解决方 ...
- JS异步解决方案之概念理解-----------阻塞和非阻塞,同步和异步,并发和并行,单线程和多线程
首先记住一句话,JS是单线程的. 单线程意味着什么?单线程意味着 它不能依靠自己实现异步. JS实现的异步,往往都是靠 浏览器.Node 的机制(事件驱动.回调)实现的. 下面让我这个单身狗 以谈恋爱 ...
- node.js异步编程解决方案之Promise用法
node.js异步编程解决方案之Promise var dbBase = require('../db/db_base'); var school_info_db = require('../db/s ...
- js async await 终极异步解决方案
既然有了promise 为什么还要有async await ? 当然是promise 也不是完美的异步解决方案,而 async await 的写法看起来更加简单且容易理解. 回顾 Promise Pr ...
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
- [转] js async await 终极异步解决方案
阅读目录 回顾 Promise async await 字面理解 async.await 如何执行 await 操作符 总结 既然有了promise 为什么还要有async await ? 当然是pr ...
- js异步编程
前言 以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...
- 关于JS异步加载方案
javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...
- js 异步流程控制之 avQ(avril.queue)
废话前言 写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简 ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
随机推荐
- 使用Electron-packager打包已有的web项目,发布客户端
1.先拉electron代码 git clone https://github.com/electron/electron-quick-start 2.将web项目拷贝到electron-quick- ...
- Wikijs简介-强大&可扩展的开源维基软件
Wikijs - 最强大 最可扩展的开源维基软件 使用 wiki.js 美丽直观的界面,让文档成为写作的乐趣! 优点 随时随地安装 几乎适用于任何平台,并与PostgreSQL.MySQL.Maria ...
- 安装部署keepalived的HA环境
每一台配置下keepalived #master01 配置: cat >/etc/keepalived/keepalived.conf<<"EOF" ! Conf ...
- [Windows]解决:windows连接远程桌面-出现身份验证错误,要求的函数不受支持( CredSSP加密数据库修正)[转载]
文由 需要在本地Windows系统电脑通过远程桌面(mstsc)另一台Windows服务器,将其内的数据拷贝过来.但却发生了这样的异常 解决方案 step1 Win+R step2 打开注册表: gp ...
- DG:模拟failover故障与恢复
问题描述:情形是当主库真正出现异常之后,才会执行的操作,那么我们执行过failover 之后,如何在重新构建DG,这里我们利用flashback database来重构.模拟前主库要开启闪回区,否则要 ...
- Redis 数据类型 Zset
Redis 数据类型 Zset(有序集合) Redis 常用命令,思维导图 >>> zset是Redis提供的一个非常特别的数据结构,常用作排行榜等功能,以用户id为value,关注 ...
- Object o = new Object();
对象的创建过程: 1,申请内存,并初始化: 2,构造器初始化: 3,o指向对象. 对象在内存中的存储布局: 使用jol工具打印java对象在内存的存储布局: 其中,对象头的组成: 对象头包括Mark ...
- [C++核心编程] 3、函数提高
文章目录 3 函数提高 3.1 函数默认参数 3.2 函数占位参数 3.3 函数重载 3.3.1 函数重载概述 3.3.2 函数重载注意事项 3 函数提高 3.1 函数默认参数 在C++中,函数的形参 ...
- .net 6 使用 NEST 查询,时间字段传值踩坑
0x01业务描述 说明: 同事搭建的业务系统,最开始使用 log4net 记录到本地日志. 然后多个项目为了日志统一,全部记录在 Elasticsearch ,使用 log4net.Elastic ...
- office办公套件基础教程
正文 1.网页端的应用-office全家桶 这里我选择先聊web端的应用,首先,我们来想象一下,只要你有网络,有浏览器,就能打开一个网页,在网页上进行编辑.处理一些word.报表.ppt等,你不需要复 ...