js Async Await关键字对于编程里的同步和异步，可能会很难理解。在生活中，当我们煮一个泡面，首先需要烧热水，等

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

前言

对于编程里的同步和异步，可能会很难理解。在生活中，当我们煮一个泡面，首先需要烧热水，等热水烧开之后将泡面袋子撕开放入碗中，加入调料，加入热水，一个泡面就泡好了，条理分明，做完一件事情再做另一件事情，这就是编程里的同步。但是我们可以在等待热水烧开的同时先将泡面袋子撕开放入碗中，加入调料，不需要等热水烧开再放调料，节省了时间

这就是编程里的异步执行，解决了同步编程的痛点，如果在代码里加入多个异步处理代码也不方便维护阅读，不加又不行，而async await就是用来解决这个问题的，可以让我们用同步编程的方式去写异步代码

async

我们创建一个函数，为了让这个函数变为异步执行，给这个函数添加关键字async，async本来就是异步的意思。在函数里返回一些东西，虽然async永远返回一个Promise，但是函数没有返回值那么这个async函数基本没什么意思了

async function a(){
  return 'kfc v 50'
}
console.log(a());

在控制台可看到执行函数后返回了Promise，如果不清楚什么是Promise可以看看之前的文章，毕竟async await是基于Promise的语法糖

图片.png

既然async await是基于Promise，那么执行完函数就可以使用then来获取返回的值了，于是就在函数执行完后添加then并打印返回值

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

图片.png

then可以接受执行成功和拒绝两种状态的值，打印的结果来看显然是执行成功了，所以async函数返回的是Promise.resolve

async function a(){
  return Promise.resolve('kfc v 50') //返回的结果和上面图片一样
}

await

await的意思就是等待，如何等待呢？将函数里的代码先修改一下

async function a(){ //正确的输出顺序是什么呢？
  console.log('1')
  let two=await Promise.resolve('2')
  console.log(two);
  console.log('3');
  return Promise.resolve('kfc v 50')
}

正确的输出顺序是什么呢？执行这个函数，第一行输出1，接着下面Promise.resolve了一个2并且赋值给了变量two，重点是加了await，await是等待的意思，而且也基于Promise，也就是说遇到await的时候会等待直到Promise状态完成并且返回结果，虽然是异步，但是这里一九不会先往下执行，接着打印two和3，最后返回Promise

图片.png

这样一来异步代码就变得像同步代码了，阅读起来非常方便，要注意的是await不能单独使用，必须配合async一起使用