js的三种异步处理
js的三种异步处理
Promise 对象
- 含义: Promise是异步编程的一种解决方案,
- 优点: 相比传统回调函数和事件更加合理和优雅,Promise是链式编程(后面会详细讲述),有效的解决了令人头痛的回调地狱问题,Promise的结果有成功和失败两种状态,只有异步操作的结果,可以决定当前是哪一种状态,外界的任何操作都无法改变这个状态
- 基本用法:
//ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
const p = new Promise(function(resolve,reject){
if(success){
resolve('成功的结果')
}else{
reject('失败的结果')
}
})
p.then(function (res) {
// 接收resolve传来的数据,做些什么
},function (err) {
// 接收reject传来的数据,做些什么
})
p.catch(function (err) {
// 接收reject传来的数据或者捕捉到then()中的运行报错时,做些什么
})
p.finally(function(){
// 不管什么状态都执行
})
- 常用API
- resolve 返回异步操作成功的结果
- reject 返回异步操作失败的结果
- then 执行Promise状态是成功的操作
- catch 执行Promise状态是失败的操作
- finally 不管Promise状态是成功或失败都执行的操作
- Promise.all
- Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3])
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
Generator 函数
- 含义: Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,
- 基本用法:
function* helloGenerator() {
yield 'hello';
yield 'Generator';
return 'over';
}
let hw = helloGenerator();
hw.next()//{value:"hello",done:false}
hw.next()//{value:"Generator",done:false}
hw.next()//{value:"over",done:true}
hw.next()//{value:undfined,done:true}
- 特征:
- 一是,function关键字与函数名之间有一个星号;
- 二是,函数体内部使用yield表达式,定义不同的内部状态;
- 三是,通过next方法获取每段状态的返回结果,上面分成4次执行了Gennrator函数,第一次,获取第一个yield函数的返回结果并暂停,done:false,代表函数内的状态还没有执行结束;第二次,同理;第三次,获取return 的返回结果,done:true表示函数内的状态已经执行完毕;第四次,函数内已经没有可以执行的状态,所有返回undfined,同时告诉函数内的状态已经执行完毕;如果函数内没有return,在第三次时返回undfined,done:true表示函数内的状态已经执行完毕
async 函数
- 含义: async 函数是在ES2017 标准中引入的,async使得异步操作变得更加方便,其实他就是Generator 函数的语法糖
- 基本用法:
function get1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve(1)},2000)
})
}
async function getSet(){
const n = await get1()
//const n = await '111'
return n
}
getSet().then(console.log)
- 说明:
- await命令只能用在async函数之中,如果用在普通函数,就会报错。
- await后面是一个Promise对象,如get1 return出去的Promise实例;如果不是 Promise 对象,就直接返回对应的值,如直接返回'111'。
- 1、若Promise 对象, 并且其以值 x 被 fulfilled, 则返回值为 x.
- 2、Promise 对象, 并且其以异常 e 被 rejected, 则抛出异常 e
- async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,如果任何一个await语句后面的 Promise 对象变为reject状态或遇到return,那么整个async函数都会中断执行。
- 另外需要注意的是, await 在等待 Promise 对象时会导致 async function 暂停执行, 一直到 Promise 对象决议之后才会 async function 继续执行.
- 如果我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
- 优点: 相比Generator函数,async函数有如下四点改进
- 内置执行器: Generator 函数的执行必须靠next()进行每一次的模块执行,async自带执行器,只需要和普通函数一样调用即可执行
- **更好的语义:**async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
- 返回值是Promise: async函数的返回值是 Promise 对象,可以用then方法指定下一步的操作;而且async函数完全可以看做多个异步函数的操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖,即Promise.all()的用法
- **更广的适用性:**相较于Generator函数async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)
- 补充
- 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
//此处省略getFoo(), getBar()两个函数
// 写法一
async function getSet(){
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
return [foo, bar]
}
// 写法二
async function getSet(){
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
return [foo, bar]
}
*文章参考ECMAScript 6 入门 *
js的三种异步处理的更多相关文章
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- (一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
- js中三种定义变量 const, var, let 的区别
js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...
- HTML中使用js的三种方式及优缺点介绍
1.内部js: 在直接在页面的<script></script>标签内写js代码 优点:相对于使用行内js,内部js代码较为集中,与页面结构的实现代码耦合度较低,比较便于维护 ...
- JS高级---三种创建对象的方式
JS高级---三种创建对象的方式 字面量的方式 (实例对象) 调用系统的构造函数 自定义构造函数方式 //创建对象---->实例化一个对象,的同时对属性进行初始化 var per=new Per ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- JS中三种字符串连接方式及其性能比较
工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符“+”把要连接的字符串连起来 ...
随机推荐
- VerilogHDL学习
No.1 Verilog HDL程序结构 Verilog 描述硬件的基本设计单元是模块 module 复杂的电子电路构建主要是通过模块之间的相互连接调用来实现的,在Verilog中将模块包含在关键字 ...
- Number of Containers ZOJ - 3175(数论题)
Problem Description For two integers m and k, k is said to be a container of m if k is divisible by ...
- PAT B1022 D进制的A+B
课本AC代码 #include <cstdio> int main() { int a, b, d; scanf("%d%d%d", &a, &b, & ...
- 【NOIP2015普及组】 推销员(纪中数据-标准)
题目 [题目描述] 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有 N 家住户,第 i 家住户到入口的距离为 ...
- python 文件写入
def write_file(): """ 文件写入""" file_name = "wri2te_test.txt" ...
- Linux中设置系统时间和时区
之前公司里有需求要做机器与服务器做时间同步,服务器发送时间戳和时区过来,机器这边根据接收到的时间戳和时区来改时间. 其实很简单,百度上应该也有很多博客有类似的教程,但是这里强调一点,百度上的博客里写的 ...
- Codeforces 1240A. Save the Nature
传送门 显然可以二分答案 如果知道卖的票数,那么就能算出有多少 $a$ 倍数但不是 $b$ 倍数的位置,多少 $b$ 倍数但不是 $a$ 倍数的位置,多少既是 $a$ 又是 $b$ 倍数的位置 然后贪 ...
- 怎样修改输入框 placehoder 提示文本的颜色?
1. 在这个问题上, 不同浏览器的设置方法有所差异, 可以写成下面这种形式. ::-webkit-input-placeholder { /* WebKit browsers */ color: #9 ...
- kafka运维填坑
转载自:https://www.jianshu.com/p/d2cbaae38014 前提: 只针对Kafka 0.9.0.1版本; 说是运维,其实偏重于问题解决; 大部分解决方案都是google而来 ...
- Flask:上下文管理
1. werkzurg from werkzur.serving import run_simple def run(environ,start_response): reuturn [b'hello ...