三分钟搞懂async和await

持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第4天,点击查看活动详情

大家好!

上次写了一个json文件是干什么的Promise的极http://192.168.1.1登录教程,通过promise.then()方法可以像同步方法那样来写异步方法。

Generator函数json是ES6提http代理供的一种异步编程解决方案,也叫构造器函数,它可以让函数的执行暂停,函数的执行流挂起,为改变执行流程提供了可能,形式上也是一个普通函数。

ES2017 引入了async函数,它是Generator函数的语法糖,async和await要实现的是Generator函数的特性,即暂停函数执行,让异步函数变为同步执行,采用async+aJSONwait+解构函数的方式,会让写法更加类似一条同步方json数据法,使得异步操作更为方便。

1 同步执行

我们看下面这个简单同步json执行的例子:

示例 三个依次执行的函数

function funOne() {
  return ("执行第一个函数");
}
​
function funTwo() {
  return ("执行第二个函数");
}
​
function funThree() {
  return ("执行第三个函数");
}
​
function run() {
  console.log(funOne());
  console.log(funTwo());
  console.log(funThree());
}
run()

在上述代码中,教程执行run() 函数,会按代码顺序依次调用funOne() 、funTwo()、funThree(),在打印台打印出:

  • 执行第一个函数
  • 执行第二个函数
  • 执行第三个函数

2 同步执行中JSON加入异步方法

那么,需求来了,现在我们用jqueryhttp 302模拟在funTwo()中,执行一个ajax异步请求,然http 500后我们看run()内的执行顺序。

function funOne() {
  return ("执行第一个函数");
}
​
function funTwo() {
  $.ajax({
    url:'./data.json',
    success: (res) => {
      return("执行第二个回调函数");
     }
   })
}
​
function funThree() {
  return ("执行第三个函数");
}
​
function run() {
  console.log(funOne());
  console.log(funTwo());
  console.log(funThree());
}
run()

我们会发现,funjson怎么读Two()是异步编程,要等同步函数执行完后,再调用它,所以它的执行顺序到了最后:

  • 执行第一个函数
  • 执行第三个函数
  • 执行第二个回调函数

3 asycn调整执行顺序

但在开发中,我们是期望函数按照 funOne()->funTwo()-funThree()的顺序执行,这是我们就可以用到promise对象和async和awjson格式怎么打开ait的组合,来实现同步执行。

首先,用promise对象的方式,来改造一下funTwo():

function funTwo() {
  return new Promise=((resolve,reject) => {
    $.ajax({
      url:'./data.json',
      success: (res) => {
        resolve("执行第二个回调函数");
       }
     })
   })
}

然后,我们把async放到run( )函数前,把await放到funTwo()前面上,告诉程序,要等待funTwo()执行结束后,再执行funhttps和http的区别Three ()

async function run() {
  console.log(funOne());
  console.log(await funTwo());
  console.log(funThree());
}
run()

那么,在打印台中,打印出来的顺序,就和同步执行的顺序一样,并且第三个函数可以httpwatch拿到第二回调函数传过来的数据了。

  • 执行第一个函数
  • 执行第二个回调函数
  • 执行第三个函数