本文共 2618 字，大约阅读时间需要 8 分钟。

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

菜鸟教程的相应教程地址

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

读取文件

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

欢迎访问博客

技术 聊天 交流群 974178910 前端交流群 535620886

转载地址：https://dmhsq.blog.csdn.net/article/details/114292042 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！