为什么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()