js里的async/await

js里的async/await
到底什么是异步编程呢，有什么作用呢？
异步编程允许我们在执行一个长时间的任务的时候，程序是不需要等待的，可以继续执行后面的代码，直到这些任务都完成了之后再回来通知你。
早期的异步编程是通过回调函数来实现的，这种编程的模式避免了程序的阻塞，大大提高了CPU的执行效率，尤其适用于一些前后端数据库交互的操作。然而回调函数会出现回调地狱的情况。
为了解决上面的问题，ES6出现了promise，但是为什么到了ES7，又出现了async/await呢？他与promise对比又有了什么新的优势呢？
（1）什么是async/await
● async/await 是编写异步代码的新方式，是基于promise实现的
● async/await 使得异步代码看起来像同步代码，这就是他的厉害之处。
（2）async
使用async声明一个函数为异步函数

async function fn1(){
return 88;
}
async function fn2(){
return Promise.resolve(66);
}
console.log('return1:',fn1());
console.log('return2:',fn2());
1
2
3
4
5
6
7
8

从打印出来的结果，我们可以看出执行一个async函数，返回的都是promise对象，如果返回的是像函数fn1中那样普通的值的话，他会帮你封装成一个promise对象。

(3) await在等什么？
async是用来声明一个函数为异步函数的，那么await又是做什么的呢

async function fn3(){
  const p3=Promise.resolve(66);
  p3.then(data=>{
    console.log('data of then:',data);
  })
  const data =await p3;
  console.log('data of await:',data);
}
fn3();
1
2
3
4
5
6
7
8
9

看了打印的结果后，我们能知道，await等的是结果，promise.then成功的情况对应await，也就是await可以获取Promise函数中的resolve或者reject的值，注意await关键字只能放在async的内部。如果用在普通函数就会出错。
（4）async/await的执行顺序是什么样的呢
await 会让出 线程，阻塞后面的代码，那么async2和script start是哪个先打印的呢？
是从左向右执行，一旦碰到await直接跳出, 阻塞async2()的执行？
还是从右向左，先执行async2后，发现有await关键字，于是让出线程，阻塞代码呢？

async function async1() {
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    async function async2() {
        console.log( 'async2' )
    }
    async1()
    console.log( 'script start' )
1
2
3
4
5
6
7
8
9
10

详细讲解一下这个的运算
首先同步和异步是怎么运行的
(1)js语句

console.log("11");
console.log("22");
console.log("33");
(2)js函数
function print(s){
  console.log(s)
}
print("11")
print("22")
print("33")
1
2
3
4
5
6
7
8
9
10

都是按顺序执行的，从上往下，同步执行
（3）用延时器进行，异步执行

function asyncPrint(s){
    setTimeout(()=>{console.log(s)},100)
}
async Print("11")
async Print("22")
async Print("33")
现在也是同步执行的
setTimeout(()=>{console.log(1)},100)
setTimeout(()=>{console.log(2)},200)
setTimeout(()=>{console.log(3)},100)

现在的打印的顺序就是 1  3  2
先是0.1秒打印1和3，再是0.1秒打印出2
setTimeout()的作用让函数延迟调用，把同步变成了异步
异步执行的时候，并不是代码中的书写顺序，到底是什么时候执行的，取决于他的堵塞
异步函数同时调用的，不会被阻塞
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. 现在要是想要完成打印出来123，把异步改成改成同步,就要在前一个函数的回调中写下一个函数

f1().then(()=>{
  f2().then(()=>{
    f3()
  })
})
1
2
3
4
5

这样就执行完f1()这个异步，再执行f2(),再执行f3()
这样想要很多的异步函数的顺序时，层级会深，不停的用大括号嵌套，用promise和async/await解决，但是await必须用在async函数里

async function doPrint(){
  await f1();
  await f2();
  await f3();
}
下面去看这段代码
   async function async1() {
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    async function async2() {
        console.log( 'async2' )
    }
    async1()
    console.log( 'script start' )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面的两个function是同步的，执行完async1（），再执行script start，再执行async时阻塞了，此时script start
就插入了，不阻塞就可以正常执行，（从上往下），阻塞的会比不阻塞的快