JavaScript 回调函数/Promise/ async/await
并发和并行
并行和并发是两个概念,容易混淆是因为并行和并发在中文意思上相近,其实在英文中,这是完全不相同的东西,并行(parallelism)、并发(concurrency)。
并行(parallelism):是微观概念,假设CPU有两个核心,则我们就可以同时完成任务A和任务B,同时完成多个任务的情况就可以称之为并行。
并发(concurrency):是宏观概念,现在有任务A和任务B,在一段时间内,通过任务之间的切换完成这两个任务,这种情况称之为并发。
回调函数
回调函数广泛存在于我们所编写的JavaScript
代码中,它表现在事件绑定,Ajax请求或者其他的情况下,一个回调函数可表现成如下形式
ajax(url, () => {console.log('这里是回调函数');
})
回调地狱: 回调函数很好的解决了某些异步情况,但过度滥用回调函数会造成回调地狱,即回调函数过长,嵌套过深。过长或者嵌套过深的回调函数,会让回调函数存在强耦合关系,一旦有一个函数有所改动,那么可能会牵一发而动全身。一个回调地狱可能如下所示:
ajax(firstUrl, () => {console.log('这里是首次回调函数');ajax(secondUrl, () => {console.log('这里是第二次回调函数');ajax(threeUrl, () => {console.log('这里是第三次回调函数');// todo更多})})
})
Generator
在ES6之前,一个函数一旦执行将不会被中断,一直到函数执行完毕,在ES6之后,由于Generator
的存在,函数可以暂停自身,待到合适的机会再次执行。用Generator
可以解决回调地狱。
function *fetch() {yield ajax(url, () => {console.log('这里是首次回调函数');});yield ajax(url, () => {console.log('这里是第二次回调函数');});yield ajax(url, () => {console.log('这里是第三次回调函数');});
}
var it = fetch();
var result1 = it.next();
var result2 = it.next();
var result3 = it.next();
Promise
Promise
翻译过来就是承诺的意思,Promise
一共有三种状态:pending(等待中)
、resolve(完成)
和reject(拒绝)
,这个承诺意味着在将来一定会有一个表决,并且只能表决一次,表决的状态一定是resolve(完成)
或者reject(拒绝)
,一个Promise
可能会是如下的形式:
// 普通的Promise
function foo() {return new Promise((resolve,reject) => {// 第一次表决有效,其后无论是resolve()还是reject()都无效resolve(true); resolve(false);})
}// Promise解决回调地狱
ajax(url).then(res => {console.log('这里是首次回调函数');
}).then(res => {console.log('这里是第二次回调函数');
}).then(res => {console.log('这里是第三次回调函数');
})
async/await
如果一个方法前面加上了async
,那么这个方法就会返回一个Promise
,async
就是将函数用Promise.resolve()
包裹了下,并且await
只能配合async
使用,不能单独出现。一个async/await
可能会是如下的形式:
// 普通的async/await
async function foo() {let number = await 3; // await自动用promise.resolve()包装console.log(number);
}
foo();// async/await解决回调地狱
async function fetch() {var result1 = await ajax(url1);var result2 = await ajax(url2);var result3 = await ajax(url3);
}
fetch();
如若转载,请注明出处:开源字节 https://sourcebyte.cn/article/170.html
JavaScript 回调函数/Promise/ async/await相关推荐
- JavaScript 异步 setTimeout promise async await
异步在此就不再赘述,下面主要说一下JS中异步的实现方式. 1,setTimeout 计时器 ,实现代码如下 <!DOCTYPE html> <html lang="en&q ...
- javascript之异步操作理解---回调函数,async,await以及promise对象
javascript之异步操作理解---回调函数,async,await以及promise对象 概述 概述 写在前面:虽然平时做项目,但是发现自己写的代码还是很烂.最近接触了一个对性能要求比较高的项目 ...
- ES6箭头函数以及promise/async/await测试案例
ES6箭头函数的运用 下面以一段代码解释 function one(){return 1 以上函数用箭头函数写步骤,参考下面代码 {}和里面的东西先删去 one = (里面写参数/无参数的里面为空)= ...
- Promise async/await的理解和用法
Promise && async/await的理解和用法 为什么需要promise(承诺)这个东西 在之前我们处理异步函数都是用回调这个方法,回调嵌套的时候会发现 阅读性 和 调试 的 ...
- vue 钩子函数 使用async await
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>v ...
- javascript 回调函数
javascript 回调函数 回调函数 作为参数传递的函数 示例代码 let x = function () {console.log("执行回调函数") }let y = fu ...
- 理解javascript 回调函数
理解javascript 回调函数 原文:理解javascript 回调函数 ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一 ...
- js callback promise async await 几种异步函数处理方式
***callback 这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据 回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作, ...
- rust异步编程--理解并发/多线程/回调/异步/future/promise/async/await/tokio
1. 异步编程简介 通常我们将消息通信分成同步和异步两种: 同步就是消息的发送方要等待消息返回才能继续处理其它事情 异步就是消息的发送方不需要等待消息返回就可以处理其它事情 很显然异步允许我们同时做更 ...
最新文章
- 苹果外包爆料:你手机里的Siri,听到了嘿嘿嘿的声音
- UML建模之数据建模
- layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
- pyecharts第三节、仪表盘
- 《How to Write and publish a scientific paper》 Chapter 2
- 福建厦门的Acrel-2000E/B配电室综合监控系统
- 图像彩色化方法(基于颜色传递、颜色扩展)
- msvcr110.dll丢失的解决方法?有哪些修复的方法?
- uniapp 开发小程序使用iconfont彩色图标
- Skimage图像处理教程2)色彩空间变换
- 2021届计算机女硕士秋招面试惨痛经历完结
- 微信小程序:微信小程序插件使用
- Google - Pagerank
- win7 x64环境下载、安装、配置jdk-7u7
- d3d9查询(Queries Direct3d9)
- iBackup Viewer for mac一款好用的(iPhone备份提取工具)
- 故事传说《五兄弟传说》
- 转载:拜耳阵列(Bayer Pattern)简介
- 基于python3.6与pyCharm安装face_recognition库的操作过程
- 考勤管理系统的设计与实现
热门文章
- 轨道交通率先实现无人驾驶,国产无人驾驶地铁在香港迎来首批乘客
- 手机屏幕亮度调节软件java_Android视频播放器屏幕左侧边随手指上下滑动亮度调节变暗变亮原理实现...
- 一、Docker介绍:
- 长沙四大商圈你足够了解吗?
- 毕业两个月,随便说说
- android 设置屏幕大小,Android 根据屏幕大小设置字体大小
- python包管理工具ports_Linux软件包管理器讲解
- python集合类型中的元素是有序的_数据类型;有序集合类型(sorted set)
- 复合梯形的matlab求解,复合梯形和复合辛普森MATLAB程序
- git 删除分支、删除远程分支