【ECMAScript 5_6_7】13、ES6——async/await语法糖函数(异步回调问题最终解决方案)

async函数(源自ES2017)

概念:

真正意义上去解决异步回调的问题,用用同步流程来表达异步操作

本质:

Generator函数的语法糖

语法:

async function foo (){
    await 异步操作
    await 异步操作
}

特点:

1、不需要向Generator函数去调用next()方法,而是遇到await就等待,直到当前异步操作完成就继续往下执行

2、返回的总是Promise对象,可以使用then()方法进行下一步操作

3、async函数取代Generator函数的*,await函数取代Generator函数的yield

4、语意上更为明确,使用简单,经验证,暂时没有任何副作用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>async函数</title>
</head>
<body>
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
  async function fun() {
    return new Promise(resolve => {
      /*setTimeout(function () {
        resolve()
      },2000)*/
      //可以简写为:
      setTimeout(resolve,2000)
    })
  }
  async function test1() {
    console.log('开始执行' + new Date().toTimeString())  // 开始执行12:30:20 GMT+0800 (中国标准时间)
    await fun()
    console.log('结束执行' + new Date().toTimeString())  // 结束执行12:37:11 GMT+0800 (中国标准时间)
  }
  test1()


  //async函数里await的返回值默认是undefined
  function test2() {
    return 'xxx'
  }
  async function asyncPrint() {
    let result1 = await test2()  // await后面调用普通的函数,返回值就是普通函数的返回值
    console.log(result1)  // xxx
    let result2 = await Promise.resolve('成功了')  // await后面调用Promise构造函数的resolve成功方法可以传入参数
    console.log(result2)  // 成功了
    //let result3 = await Promise.reject('失败了')  // await后面调用Promise构造函数的reject失败方法会报错,但也可以传入参数
    //console.log(result3)

  }
  asyncPrint()


  //先后获取新闻内容及评论的需求:
  async function getNews(url) {
    return new Promise((resolve,reject) => {
      $.ajax({
        method:'GET',
        url,  // 这里用到了ES6简化对象的写法
        /*success:function (data) {
          resolve()
        },
        error:function (error) {
          reject()
        }*/
        //上面可以简写为:
        success:data => resolve(data),
        error:error => resolve(false)  // !!!注意:async函数使用技巧:发送状态不成功也进成功的状态内,携带一个标识值,后续判断直接返回来
      })
    })
  }
  async function sendXml() {
    let result = await getNews('http://localhost:3000/news?id=3')
    console.log(result)  // {id: "3", title: "news title1...", content: "news content1...", commentsUrl: "/comments?newsId=3"}
    if(!result){
      alert('暂时没有新闻内容')
      return
    }
    result = await getNews('http://localhost:3000' + result.commentsUrl)
    console.log(result)  // (2) [{…}, {…}]
    if(!result){
      alert('暂时没有评论内容')
      return
    }
  }
  sendXml()

</script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/edc3001/article/details/87970332
今日推荐