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).所谓"单线程",就是指一次只 ...
随机推荐
- 【ACM算法竞赛日常训练】DAY1题解与分析
DAY1 共四题: 月月查华华的手机:https://ac.nowcoder.com/acm/problem/23053 Rinne Loves Edges:https://ac.nowcoder.c ...
- AI工具导航
.xe-comment-entry img { float: left; display: block; background: rgba(136, 136, 136, 0.15); margin-r ...
- Windows注册表中修改UAC(用户账号控制)及批处理脚
我在windows电脑上安装软件时,或者设置开机启动软件时,会先弹出提示框: 用户账户控制 你要允许此应用对你的设备进行更改吗? 很烦人,我不想每次都提醒.需要关闭"用户账户控制" ...
- day96:flask:flask-migrate&flask-session&蓝图Blueprint&蓝图的运行机制&基于flask仿照django进行项目架构
目录 1.flask-migrate 2.flask-session 3.蓝图:Blueprint 4.蓝图的运行机制 5.基于flask仿照django进行项目架构 1.准备工作 2.加载配置文件 ...
- day8:列表相关函数&深浅拷贝&字典相关函数&集合相关操作/函数
字符串/列表/字典/集合 目录 字符串相关操作: 拼接 重复 跨行拼接 索引 切片字符串相关函数:常规11+is系列3+填充去除6+最重要3字符串拓展:字符串的格式化format 列表的相关操作:拼接 ...
- Generative Pre-trained Transformer(GPT)模型技术初探
一.Transformer模型 2017年,Google在论文 Attention is All you need 中提出了 Transformer 模型,其使用 Self-Attention 结构取 ...
- Dokcer应用部署(搭建Wordpress网站)
实现多个容器之间的协同,搭建Wordpress网站,要用到3个容器,Wordpress.MariaDB和Nginx 拉取镜像 使用docker pull拉取3个镜像: $ sudo docker pu ...
- AndroidApp加密数据明文抓取测试方法——hook方式
0x00 前言 在做移动安全的app渗透或者说移动app的漏洞挖掘时,往往会碰到一种情况:好不容易绕过了app的反抓包机制,通过burp抓到了app传输的数据包,这时想对这部分数据做一些爆破.篡改之类 ...
- java Stack(栈)类、Queue和Deque队列
1. java Stack类 特性是:LIFO(后进先出)先进后出,最先进入的在栈底. Stack底层也是通过数组实现的,同时也是线程安全的 Stack stack=new Stack(); //添加 ...
- Vue的项目打包为移动端(安卓手机应用)app
现在基于vue全家桶技术体系,基本上可以开发各端的各种应用,pc端的应用,开发完成以后,直接运行打包命令 yarn build 即可打包,部署到服务器端上线即可.那么,今天我们来聊一聊,开发好的vue ...