async await异步请求

先理解同步和异步，异步和同步的区别就在于：

• 同步：会阻塞后续代码的执行
• 异步：不会阻塞代码执行

使用async await进行异步处理。

1.深入理解await与async

async

async作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行 异步函数的调用跟普通函数一样.

 async function asyFn(){
     
     return "hello";
 }
 console.log(asyFn());
 console.log("我在异步后面");

打印结果

通过上面的代码可以看出函数asyFn()是先执行,函数返回的一个结果是Promise对象，要获取Promise的返回值应该使用then方法，此时我们加上then看一下效果。

 async function asyFn(){
     
     return "hello";
 }
asyFn().then((res) => {
     
    console.log(res);
})
 console.log("我在异步后面");

打印结果：

此时我们发现，先输出的是后面那个打印文字，说明异步函数的执行没有阻塞后面的代码执行。
注：
async的内部实现原理就是如果该函数中有一个返回值，当调用该函数时，默认会在内部调用Promise.solve() 方法把它转化成一个Promise 对象作为返回，若函数内部抛出错误，则调用Promise.reject()返回一个Promise 对象

await:

• await即等待，用于等待一个Promise对象。它只能在异步函数 async function中使用，否则会报错

• 它的返回值不是Promise对象，而是Promise对象处理之后的结果。

• await表达式会暂停当前 async function的执行，等待Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function，若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。​如果 await 操作符后的表达式的值不是一个 Promise，那么该值将被转换为一个已正常处理的 Promise。

---

与Promise对比，优点:

1、不再需要多层.then方法
假设一个业务分很多步骤完成，并且每个步骤都是异步，依赖上一个步骤的结果。

function takeLongTime(n){
     
//返回一个Promise对象
    return new Promise(resolve=>{
     
        setTimeout(() => {
     
            resolve(n+200);
        }, n);
    });
}
//创建一个方法
function step1(n){
     
    console.log(`step1 ${
       n}`);
    return takeLongTime(n);
}
//创建一个方法
function step2(n){
     
    console.log(`step2 ${
       n}`);
    return takeLongTime(n);
}
//创建一个方法
function step3(n){
     
    console.log(`step3 ${
       n}`);
    return takeLongTime(n);
}
//创建一个async方法
async function doit(){
     
    console.time("do");//计时
    const time1=300;
    const time2=await step1(time1);//time2获取step1调用takeLongTime返回的Promise的resolve结果
    const time3=await step2(time2);
    const re=await step3(time3);
    console.log(re);
    console.timeEnd("do");//计时结束
}
//执行方法
doit();

展示结果：

---

额外讲解：

那什么叫单线程呢？？

• 简单来说就是一次只能干一件事，一个一个排队，不能多个一起执行（因为不是多线程）
• 标准定义：浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。