单线程、事件循环、宏任务微任务、Promise函数是什么？

单线程、事件循环、宏任务微任务、Promise函数

想要掌握标题知识那么我们必须要知道什么是同步，什么是异步，包括process.nextTick与setImmediate方法，配合学习才能真正的掌握并且熟练运用，学完之后尽量自己举一反三输出结果

学习目标

一、什么是同步，什么是异步

二、单线程

三、process.nextTick与setImmediate方法

四、事件循环

五、宏任务与微任务

六、promise async函数

---

一、什么是同步，什么是异步？

同步：按顺序执行，必须在上一个程序执行完成之后才可以继续执行下面的程序

异步 ：无需等待直接执行，常用于、计时器(setTimeout, setInterval)、ajax、读取文件

同步程序执行完成之后，执行异步程序

示例

//同步程序按顺序执行
console.log(1);
console.log(2);
console.log(3);
setTimeout(() => {
  console.log(1)
}, 1000)
setTimeout(() => {
  console.log(2)
}, 100)
setTimeout(() => {
  console.log(3)
}, 10)//返回 123 321

//同步程序执行完成之后，执行异步程序
console.log(1);
setTimeout(() => {
  console.log(2)
}, 0)
setTimeout(() => {
  console.log(3)
}, 0)
setTimeout(() => {
  console.log(4)
}, 0)
console.log(5);//返回 15234

二、什么是单线程？

js是单线程的，一个任务执行完成之后才能执行另一个任务

for (let i = 0; i < 100; i++) {
  console.log(1);
}
console.log(1);
setTimeout(() => {
  console.log(2)
}, 0)
setTimeout(() => {
  console.log(3)
}, 0)
console.log(4);// 返回一百个1、然后1 4 2 3

三、process.nextTick与setImmediate方法？

nextTick同步和异步之间，setImmediate异步之后

setImmediate(() => {
  console.log(1);
})
process.nextTick(() => { //在同步代码执行完成之后，异步代码执行完成之前执行
  console.log(2);
})
console.log(3);
setTimeout(() => {
  console.log(4)
}, 0)
setTimeout(() => {
  console.log(5)
}, 0)
console.log(6);//返回 362451
/*
执行顺序
  1.同步
  2.nextTick
  3.异步
  4.setImmediate(当前事件循环结束执行)
*/

四、事件循环

事件循环： 每次循环都检测任务队列是否有函数有一个函数fn直接执行，有fn1，fn2两个函数就依次执行

什么是运行栈，什么是任务队列？

运行栈： 为同步如案例的  console.log(3), console.log(7)

任务队列：为异步如案例的  console.log(4) ,console.log(6) setTimeout时间到的时候执行

setImmediate(() => {
  console.log(1);
})
process.nextTick(() => { //在同步代码执行完成之后，异步代码执行完成之前执行
  console.log(2);
})
console.log(3);
setTimeout(() => {
  console.log(4)
}, 0)
setTimeout(() => {
  console.log(5)
}, 1000)
setTimeout(() => {
  console.log(6)
}, 0)
console.log(7);//返回3724615

五、什么是宏任务与微任务

微任务比宏任务的执行时间早

宏任务（异步操作）：由宿主发起，比如计时器、Ajax 读取文件、DOM事件

微任务（同步执行）：Promise.then async/await process.nextTick

执行顺序：

1.同步

2.process.nextTick

3.微任务 (promise.then)

4.宏任务 (计时器，ajax 读取文件，DOM事件)

5.setImmediate

异步和单线程是相辅相成的，js是单线程脚本语言，所以需要异步来辅助

setImmediate(() => {
  console.log(1);
})
console.log(2);
setTimeout(() => {
  console.log(3)
}, 0)
console.log(4);
new Promise((resolve) => {
  console.log(5);
  resolve()
}).then(() => {
  console.log(6);
})
setTimeout(() => {
  console.log(7)
}, 100)
process.nextTick(() => { //在同步代码执行完成之后，异步代码执行完成之前执行
  console.log(8);
})
setTimeout(() => {
  console.log(9)
}, 0)
console.log(10);//返回2 4 5 10 8 6 3 9  1 7

六、promise async函数

async就是promise的简写，以下知识点一层套一层，自己尽量敲一遍，先试着自己说出答案

Promise模板、目的是返回hello world，但是没有返回？

let p = new Promise(() => {
  console.log("hello world");
})

p.then(() => {
  console.log(1);
})//返回hello world 没有调用resolve不会执行then

调用resolve，成功返回hello world！

let p1 = new Promise((resolve) => {
  console.log("hello world");
  resolve()
})//只有调用了resolve才会执行.then  ,resolve形参也可以是A, B，C
p1.then(() => {
  console.log(2);
})

 验证data返回什么？

let p2 = new Promise((resolve) => {
  resolve("hello world")
})
p2.then((data) => {
  console.log(data); //返回 hello world data传出来的值是resolve里面的返回值
})

axios 请求拦截和响应拦截？

axios：拦截器可以让我们在项目中对后端http请求和响应做自动拦截处理，减少请求和响应的代码量，提升开发效率同时也方便项目后期维护。axios在服务器响应返回之后，请求的then之前（请求发送之前），添加自己的逻辑。只把服务器返回的数据解构出来返回给下一个.then，统一处理接口报错

//get方法就是返回一个promise对象p 
//axios是怎么封装呢，它会把数据通过resolve传出来然后.then才能拿到数据
axios.get("").then((res) => { 
  console.log(res);
})

验证async return返回的值是promise对象

async function fun() {
  return 1 //不是返回1
}
let a = fun()
console.log(a);//返回 promise {1}

1.传统写法

function fun() {
  return new Promise((resolve) => {
    resolve(1)
  })
}

2.简写 （推荐）

async function fun() {
  return 1
}//async就是promise的简写。
fun().then((data) => {
  console.log(data); //返回 1 这下就丝滑了，简单优雅逻辑清晰
})

3.使用场景

// 实用常用
let p = new Promise((resolve) => {
  resolve(1)
})
let p2 = new Promise((resolve) => {
  resolve(2)
})
async function fun() {
  let a = await p1; //这样就可以直接拿到Promise的值了，让异步的代码写起来更像同步的代码
  let b = await p2;
  console.log(a);
  console.log(b);
}
fun()

 简单示例

async function fun1() {
  let data = await fun2()
  console.log(data);//.then中执行的代码
}
async function fun2() {
  console.log(200); //同步的代码
  return 100 
}
fun1()

复杂示例

console.log(1);
async function async1() {
  await async2()
  console.log(2);
}
async function async2() {
  console.log(3);
}
new Promise(resolve => {
  console.log(4);
  resolve()
}).then(function () {
  console.log(5);
}).then(function () {
  console.log(6);
})
async1()
setTimeout(function () {
  console.log(7);
})
console.log(8); //1 4 3 8 5 2  6  7