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

代码哈士奇

发布于 2021-10-25 11:33:40

1.5K0

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()

异步编程

菜鸟教程的相应教程地址 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)
})

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

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

Generator 函数

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

基础用法

定义

function* 函数名(){

}

使用

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

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())
}

可以看到我们执行完毕返回了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()

可以发现 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()

打印的是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>

可以发现这里的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)
}