Javascript中的Async-Await到底是什么意思？
顾名思义，当存在异步时，这意味着您需要等待。

为什么我们需要等待？
由于javascript是非阻塞的，因此默认情况下它不会等待执行某些操作。

异步

异步概念是指，如果需要等待某些东西，它将使您离开并聆听下一件事，这就是javascript的工作方式。但是在某些情况下，您需要等待执行。

现在来看一个不使用async-await的示例，然后我们可以使用async await改进该示例

例如 ：

我们将建立一个没有异步等待的电影院队列。也就是说，如果队列中有4个人，并且您处于第3位，而您没有门票，但是您的一位朋友正在带您的门票，您向那个人保证您的朋友会带票。

console.log("Person 1: Shows the ticket");
console.log("Person 2: Shows the ticket");
// create a  诺言  that friend is bringing tickets
const  诺言 FriendBringTics = new Promise((resolve, reject) => { 
    setTimeout(() => {  // function
        resolve('ticket'); // means got the ticket
    }, 3000) // execuate after 3 second
});
promiseFriendBringTics.then((t) =>{
    console.log(`Person 3: Shows the ${t}`); // interpolation t = ticket
});
console.log("Person 4: Shows the ticket");
console.log(" 其他  Person's .... goes on");

结果将是

Person 1: Shows the ticket
Person 2: Shows the ticket
Person 4: Shows the ticket
Other Person's .... goes on
Person 3: Shows the ticket // after 3 seconds it will accept the ticket

承诺：更多的把戏

假设您收到了票，但您的朋友又提出了一个新的要求，以等待吃点东西。因此，您需要做出另一个承诺，要等到爆米花入场。

Instead of the console.log, we will create and return new 诺言 name getPopcorn

const getPopcorn =  诺言 FriendBringTics.then((t) =>{ // new situation
    console.log("we should go in !");   // some msg
    console.log("friend: No am hungry !"); //some msg
    // return new  诺言  to get popcorn!
    return new Promise((resolve, reject) => (resolve(`${t} , popcorn`)));
});  

现在，当您收到爆米花时，运行此命令，因此：

   
getPopcorn.then((t) => (console.log('Gets : '+ t))); //getting poplcorn => i.e. : data

所以我们得到的输出是：

Person 1: Shows the ticket
Person 2: Shows the ticket
Person 4: Shows the ticket
Other Person's .... goes on
we should go in!
friend: No am hungry!
Gets: ticket, popcorn

现在让我们创建另一个请求，在爆米花上加些黄油

所以执行的流程就像
首先解决 门票 然后爆米花 然后爆米花上的最终按钮

console.log("Person 1: Shows the ticket");
console.log("Person 2: Shows the ticket");
// create a  诺言  that friend is bringing tickets
const  诺言 FriendBringTics = new Promise((resolve, reject) => { 
    setTimeout(() => {  // function
        resolve('ticket'); // means got the ticket
    }, 3000) // execuate after 3 second
});
const getPopcorn =  诺言 FriendBringTics.then((t) =>{ // new situation
    console.log("Friend: Here is the ticket");   // some msg
    console.log("we should go in !");   // some msg 
    console.log("friend: No am hungry !"); //some msg
    // return new  诺言  to get popcorn!
    return new Promise((resolve, reject) => (resolve(`${t} , popcorn`)));
}); 
const getButterOnPopcorn  = getPopcorn.then((t) =>{  // new situation
    console.log("I Have Get Some Popcorn");   // some msg
    console.log("Now! we should go in !");   // some msg
    console.log("friend: No i need buttor on my popcorn !"); //some msg
    // return new  诺言  to get popcorn!
    return new Promise((resolve, reject) => (resolve(`${t} , butter on popcorn`)));
}); //getting poplcorn => i.e. : data
getButterOnPopcorn.then((t)=>console.log("Gets :" + t ));
console.log("Person 4: Shows the ticket");
console.log(" 其他  Person's .... go's on");

作为console.log的承诺之间的承诺将被执行。该代码执行得很完美，但是编写代码的格式看起来很丑陋，难以理解，因此我们可以使用Async-Await对其进行修复

异步等待

异步

上面我们做的每件事都会放入一个单独的函数中。因此，让我们创建一个称为preMovie的单独函数。异步工作的方式就是您放置的任何功能 异步的 在它前面
for e.g. const preMovie = 异步的 () => {} its becomes a 异步的 function.

 
const preMovie =  异步的  () => {}; //  异步的  function
preMovie(); // Executing Function

When we execute preMovie() it returns the 诺言 , And you know when the 诺言 finish .then() is used

例如 ：

const preMovie =  异步的  () => "preMovie"; //  异步的  function 
preMovie().then((m)=>console.log(m));

等待

当我们创建一个异步函数时，在该函数内部，我们将创建一个wait方法，该方法将等待执行该事物，之后将执行下面提到的其他事物，因此在这里我们实际上可以创建一个Promise，然后我们可以将只需要在那之后执行。

console.log("Person 1: Shows the ticket");
console.log("Person 2: Shows the ticket");  
const preMovie =  异步的  () =>{  //  异步的  function 
    const  诺言 FriendBringTics = new Promise((resolve, reject) => { 
        setTimeout(() => {  // function
            resolve('ticket'); // means got the ticket
        }, 300) // execuate after 3 second
    });
    const getPopcorn = new Promise((resolve,reject) =>resolve(`popcorn`)); //Create new Promise @getPopcorn
    const getButterOnPopcorn = new Promise((resolve,reject) =>resolve(`Butter On PopCorn`)); //Create new Promise @getButterOnPopcorn

    let ticket = await  诺言 FriendBringTics; // waits to execuate @promiseFriendBringTics
    console.log(`Friend: Here is the ${ticket}`);    
    console.log("we should go in !");    
    console.log("friend: No am hungry !"); 

    let popcorn = await getPopcorn;     // waits to execuate @ticket
    console.log(`I Have Get Some ${popcorn}`);  
    console.log("Now! we should go in !");    
    console.log("friend: No i need buttor on my popcorn !");
    
    let butter = await getButterOnPopcorn; // waits to execuate @popcorn
    console.log(`I Have Get Some ${butter}`);   
    console.log("Now! we should go in !"); 

    return ticket; 
}  
preMovie().then((ticket) => console.log(`Person 3: Shows ${ticket}`));
console.log("Person 4: Shows the ticket");
console.log(" 其他  Person's .... go's on");

获取更多帖子 的JavaScript