同步和异步

js是单线程语言，代码的执行顺序是由上往下执行的

//先执行打印1，再执行打印2
console.log(1)
console.log(2)

%accordion% 历史解说 %accordion%

线程和进程

js是单线程语言
单位时间内只能做一件事

单线程 异步执行 提高效率 阻塞
双线程 同步执行

执行栈 ——备选中 先保存 在做考虑


new Promise() 异步函数，把异步变成同步
async await() 异步函数


回调函数
promise
async await


前后端分离

前端    请求/响应   后端
列表
渲染页面

promise 需要通过回调函数获取值，asyncawait不需要
        promise有回调地狱

%/accordion%

一、同步任务和异步任务

因为js是单线程的原因，如果执行完计时器再执行其他代码，那么会造成阻塞。

所以js会把需要消耗时间的操作都分类为异步任务，不需要消耗时间的分为同步任务。

js会把异步任务分配到任务队列里面，而同步任务分配到主线程里面，先执行完主线程的任务再执行任务队列的任务。

//先执行打印2，隔2秒后再执行打印1
setTimeout(()=>{
  console.log(1)
},2000)

console.log(2)

%accordion% 练习🚀 %accordion%

//先打印2再隔一秒打印1
setTimeout(function () {
    console.log(2); //2
}, 1000)
console.log(1); //1


function fn(f) {
    f(1)
}
fn(function (val) {//调用fn
    console.log(val);//1
})

%/accordion%

二、异步函数

异步函数是把异步任务变成同步任务执行。

//这种写法就是先等待2秒后执行1，然后再执行2。
function a(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(1)
      resolve()
    },2000)
  })
}

a().then(()=>{
  console.log(2)
})

%accordion% 练习🚀%accordion%

// 先执行2在执行1 隔得1秒
function fn(f) {
    setTimeout(function () {
        console.log(2);
        f()
    }, 1000)
}
fn(function () {
    console.log(1);
})

%/accordion%

三、异步函数-promise

1)使用promise

//promise对象里面提供了一个resolve回调和reject回调，分别代表成功和失败
let bool = false
let p = new Promise((resolve,reject)=>{
  if(bool){
    resolve()
  }else{
    reject()
  }
})

//成功后用.then()的方式获取成功的回调，.catch()获取失败回调
p.then(()=>{
  console.log(123)
}).catch(()=>{
  console.log(456)
})

%accordion% 练习🚀 %accordion%

成功执行的2然后就执行1，失败就凉了
function fn() {
    return new Promise((resolve) => {
        setTimeout(function () {
            console.log(2);//2
            resolve()
        }, 1000)
    })
}

fn().then(function () {
    console.log(1);//1
})

new Promise((resolve,reject)=>{
    resolve()//成功的
    reject()//失败的
})

%/accordion%

2、案例

//这个案例实现了把异步任务变成同步任务执行
function a(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(1)
      resolve()
    },2000)
  })
}

a().then(()=>{
  console.log(2)
})

3、promise带来的问题-回调地狱

//promise会带来一个问题，称为回调地狱，无法从then的外面获取值，而且不美观
function a(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(1)
    },2000)
  })
}

a().then((res)=>{
  console.log(res)//1
})

四、async await

//async await 就是用来解决promise产生的回调地狱的问题
function a(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(1)
    },2000)
  })
}

async function fn(){
  let x = await a()
  console.log(x)//1
}

fn()

[!cogs]

// new Promise() 异步函数，把异步变成同步
// async await() 异步函数
function fn1() {
    return new Promise((resolve) => {
        setTimeout(function () {
            console.log(1);
            resolve()
        }, 1000)
    })
}


function fn2() {
    return new Promise((resolve) => {
        setTimeout(function () {
            console.log(2);
            resolve()
        }, 1000)
    })
}


function fn3() {
    return new Promise((resolve) => {
        setTimeout(function () {
            console.log(3);
            resolve()
        }, 1000)
    })
}

/——仅参考
// fn1().then(() => {
//     fn2().then(() => {
//         fn3().then(() => {
//             console.log(4);
//         })
//     })
// })


async function f() {
    await fn1() //1
    await fn2() //2
    await fn3() //3
    console.log(4); //4
}
f()