[JavaScript知识库]单线程、同步异步、如何解决异步回调地狱

为什么js是单线程的

因为js里面有可视的dom，如果是多线程，这个线程正在删除DOM节点，另一个线程正在编辑Dom节点，就会出现问题。

代码运行顺序

同步>>>process.nextTick>>>微任务>>>宏任务>>>setTmmediate

如何实现异步编程

回调函数

什么是异步回调地狱

当要获取异步程序的数据，所以说要用回调，但是因为要用回调，就要控制顺序，那控制顺序就要嵌套，嵌套多了，代码就不方便维护。

如何解决异步回调地狱

ES6之前都是用回调来解决异步问题，但是出现Promise之后，就好多了

promise

resolve可以将异步数据传出来
在外面可以通过then获取
Promise解决回调地狱问题实例

function getF1() {
	return new Promise((resolve) =>{
		setTimeout(() => {
			resolve("奶茶")
		}, 1000)
	})
}
function getF2() {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve("火锅")
		}, 2000)
	})
}
getF2().then((data) => {
	// 获得通过getF2创建的Promise对象
	console.log(data)
	// 返回一个Promise对象
	return getF1()
}).then((data) => {
	// 获得通过getF1创建的Promise对象
	console.log(data)
})

Promise应用实例一：

let p = new Promise((resolve) => {
	// new Promise中有一个函数resolve，只有调用它才会执行then
	// resolve传出来的值是then里面的形参
	resolve("hello world")
})
// 微任务
p.then((data) => {
	console.log(data)
})

async 和 Promise的关系：async返回的是一个Promise对象，这个对象会自动调用then方法

async function fun() {
	// 返回的是一个Promise对象,会自动调用then方法
	return "fun"
}
// 上面的代码等同于下面的代码
function fun() {
	return new Promise((resolve) => {
		resolve("fun")
	})
}
fun().then((data) => {
	console.log(data)
})
// 将fun()的返回值赋给a
let a = fun()

generator

async/await

await 后面加一个Promise对象，可以直接获取resolve的值

function getF1() {
	return new Promise((resolve) =>{
		setTimeout(() => {
			resolve("奶茶")
		}, 1000)
	})
}
function getF2() {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve("火锅")
		}, 2000)
	})
}
async function getData() {
	let f2data = await getF2()
	console.log(f2data)
	let f1data = await getF1()
	console.log(f1data)
}
getData()