async的应用_async 应用-CSDN博客

本文链接：https://blog.csdn.net/itwangyang520/article/details/90511765

1.认识async

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
  /**
   * async
   * async其实是一个promise的语法糖
   */

//promise实现
  function f1() {
    return new Promise(resolve => {
      setTimeout(()=>{
        console.log("hello");
        resolve("成功");
      },1000)
    })
  }
/*
  f1().then(res=>{
    console.log("第二步");
  })
*/


//  async的实现
  (async function () {
    //await是表示这行代码是一个异步操作
    //下面的代码会在这个异步操作之后执行
    //  -->这里的异步操作执行完毕其实就是reslove
    await f1();
    console.log("第二步");

    await f1();

    console.log("第三步");
  })();
  console.log("hello1111");

</script>
</body>
</html>

2.async处理返回值

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

</head>
<body>



<script>
 function f() {
  return  new Promise(resolve => {
     setTimeout(()=>{
       resolve("您好");
     },1000)
   })
 }

 (async function() {
   let res = await f();
   console.log(res);

   let res1 = await f();
   console.log(res1);
 })();


 var o1={
   say:async ()=>{
     console.log('say方法：');

     const res = await q();

     console.log(res);
   },
   run:async function(){
     console.log('run方法');

     const res = await q();

     console.log(res);
   }
 };

 //需求，先执行完毕say，再执行run
 var fn=async function(){
   await o1.say();

   await o1.run();
 };
 fn();



</script>
</body>
</html>

3.async错误处理

<!--
    Created by wangyang on 2019-05-22.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Title</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <!--所有的IE都起作用：-->
  <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

<body>
    
</body>
<script>
    function q(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject("你好");
            },100)
        })
    }

    (async function(){
        try{
            let res = await q();
            console.log(res);
        }catch(e){
            console.log(e);
        }
    })()
</script>
</html>