js入门(ES6)[六]---异步编程

举报
代码哈士奇 发表于 2021/05/26 14:23:13 2021/05/26
【摘要】 js是单线程执行 同一时间只能做一件事(任务) 但是有子线程 任务分两种 一种是同步任务 一种是异步任务 同步任务在主线程中排队执行 异步任务进入一个任务队列 在同步任务形成的执行栈完成后 再执行异步任务的队列中的任务 比如主线程有 同步任务A 异步任务B 同步任务C 异步任务D 同步任务E 那么 就先执行 A C E 再执行 B D 例子如下 ...

js是单线程执行 同一时间只能做一件事(任务) 但是有子线程
任务分两种 一种是同步任务 一种是异步任务
同步任务在主线程中排队执行 异步任务进入一个任务队列 在同步任务形成的执行栈完成后 再执行异步任务的队列中的任务

比如主线程有 同步任务A 异步任务B 同步任务C 异步任务D 同步任务E
那么 就先执行 A C E 再执行 B D
例子如下

在这里插入图片描述

function one() {
	console.log(1)
}

function two() {
	return new Promise(function(resolve) {
		resolve(2)
	})
}

function three() {
	console.log(3)
}

function four() {
	return new Promise(function(resolve) {
		resolve(4)
	})
}

function five() {
	console.log(5)
}
one();
two().then(() => {
	console.log(2)
});
three();
four().then(() => {
	console.log(4)
});
five()


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

菜鸟教程的相应教程地址
es6菜鸟Promise对象
es6菜鸟Generator函数
es6菜鸟async函数

Promise 对象

promise可以获取异步操作的信息 主要有三种状态 pending(进行中),fulfilled(成功),rejected(失败)
完成后 可以通过resolve()返回数据 也就是定型状态
这是promise对象
在这里插入图片描述

在这里插入图片描述

resolve正常完成返回结果 reject完成失败返回结果

function test() {
	return new Promise(function(resolve, reject) {
		let i = 0;
		setTimeout(function() { i = 5; if (i == 5) { resolve("完成") } else { reject("失败") }
		}, 2000)
	})
}
test().then(res => {
	console.log(res)
})


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

promise.then()
其中then方法 无论执行成功还是失败都会执行 只不过成功就返回resolve(成功结果 )失败就返回reject(失败结果)

这里的setTimeout为定时器 用法为setTimeout(function(){},time) function()为你要执行的 time为触发时间 比如2000 就是2秒后触发

在这里插入图片描述

Generator 函数

使用 yield 关键字,把函数的执行流挂起,从而改变执行流程

基础用法

定义

function* 函数名(){

}

  
 
  • 1
  • 2
  • 3

使用

let xx = 函数名()
xx.next()
xx.next()

  
 
  • 1
  • 2
  • 3
function* func() {
	console.log("I am one");
	yield '1';
	console.log("I am two");
	yield '2';
	console.log("I am three");
	return 'ok'
}
let f = func()
for (let i = 1; i <= 4; i++) {
	console.log(f.next())
}


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这里插入图片描述
可以看到我们执行完毕 返回了ok 再次向下执行 value underfined

async 函数

基础用法

精髓就是 async await
对函数施加 async标记 在此函数内部await可实现阻塞同步等待异步

如果我们这样写

function one() {
	return new Promise(function(resolve) {
		setTimeout(function() { resolve(1)
		}, 2000)
	})
}
async function testOne() {
	let data = 111;
	data = one();
	console.log(data)
}
testOne()


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

可以发现 data打印的是promise对象
在这里插入图片描述

加上await data = await one()

function one() {
	return new Promise(function(resolve) {
		setTimeout(function() { resolve(1)
		}, 2000)
	})
}
async function testOne() {
	let data = 111;
	data = await one();
	console.log(data)
}
testOne()


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

打印的是resolve返回的1
这里await会等待one执行完成
在这里插入图片描述

小示例

如果不使用 promise async
读取文件

<input type="file" id="upFile" onchange="upFiles()" />
<script>
	function upFiles() {
		let data = "空的";
		let file = document.getElementById("upFile").files[0]
		if (file) { let filereader = new FileReader(); filereader.readAsDataURL(file) filereader.onload = function() { data = filereader.result; // console.log(filereader.result) }
		}
		console.log(data)
	}
</script>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

可以发现这里的data并没有变化 是没有执行吗? 是因为先执行了同步任务 打印完data后 才执行赋值
在这里插入图片描述

我们 换个写法 使用 promise和async

function getData(filereader) {
	return new Promise(function(resolve) {
		filereader.onload = function() { resolve(filereader.result)
		}
	})
}

async function upFiles() {
	let data = "空的";
	let file = document.getElementById("upFile").files[0]
	if (file) {
		let filereader = new FileReader();
		filereader.readAsDataURL(file) data = await getData(filereader)
	}
	console.log(data)
}


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

欢迎访问博客代码哈士奇
技术 聊天 交流群 974178910
前端交流群 535620886

文章来源: dmhsq.blog.csdn.net,作者:代码哈士奇,版权归原作者所有,如需转载,请联系作者。

原文链接:dmhsq.blog.csdn.net/article/details/114292042

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200