async/await使用说明

async使用在函数定义的部分, 被async修改的函数会变成一个异步(promise)函数

async function fn(){
  return '这是函数的返回值';
}
// 此处无法直接接收到demo函数的返回值; 
var res=fn();
// 打印结果: Promise { '这是函数的返回值' }
console.log(res);

// 正确的姿势
fn().then((res)=>{
    // 打印结果:  这是函数的返回值
    console.log(res)
});

// 被async关键字修饰的函数fn会被转换成类似下面的代码结构
function fn(){
  return new Promise(function(resolve,reject){
        var res='这是函数的返回值';
        resolve(res);    
  })
}

await关键字后面必须是一个promise对象(一般是在一个函数中返回一个promise对象)
一般而言async和await是配合使用的

async修饰不同的函数

修饰普通函数

async function demo(){}

修饰函数表达式

var demo=async  function(){
}

修饰箭头函数

var demo=async ()=>{
}

演示实际应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div>
        <button id="btn1">传统方式请求数据</button>
        <button id="btn2">async&await请求数据</button>

    </div>
    <script>

        window.addEventListener('load', function () {
            // 普通方式处理promise
            document.querySelector('#btn1').onclick = function(){
                // 正常的promise调用方式
                getData().then((res) => {
                    console.log('传统方式的promise处理方法:', res);
                });

            };
            // 使用async&await
            document.querySelector('#btn2').onclick = async function clickHandle() {
                // 调用getData方法请求数据; 需要使用await关键字调用返回值为promise方法
                var res = await getData();
                console.log('使用async&await调用promise:', res);
            };
        });

        // 请求数据
        function getData() {
            return new Promise(function (resolve, reject) {
                // 实际开发中应该在此处发送ajax请求数据
                const data = {
                    name: 'zs',
                    age: 30
                }
                resolve(data);
            });
        }

    </script>
</body>

</html>