ES6中的promise、async、await用法詳解

時間 2019-12-01

標籤 es6 promise async await 用法詳解欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <title>Promise、async、await</title>
</head>
<body>
<script type="text/javascript">

//promise用法(返回異步方法返回的數據,resolve獲取數據成功後調用的方法, reject獲取數據失敗後調用的方法)

//第一種寫法
    var p = new Promise((resolve,reject) => {
        //模擬ajax請求異步獲取數據
        setTimeout(() => {
            let name = 'lindont';
            resolve(name); //成功調用的函數
            //reject('error'); //失敗調用的函數
        },1000);
    });

    p.then((data) => {
        console.log(data);
    });


//第二種寫法
    var getData = (resolve,reject) => {
        setTimeout(() => {
            let name = 'HuangHaoXin';
            resolve(name);
        },1000);
    }

    var p2 = new Promise(getData);

    p2.then((data) => {
        console.log(data);
    });


//async 和 await (async能夠將一個同步的方法改成異步方法, await具備阻塞功能變相把一個異步方法變成同步方法, await必須用在async方法中)

//第一種寫法
    var getData2 = async () => {
        console.log(2);
        return 'async data'
    }

    var test = async () => {
        console.log(1);
        var d = await getData2();
        console.log(d);
        console.log(3);
    }

    test(); //結果按順序輸出 1 2 3,說明await等待getData2方法執行完畢再往下執行(即自定義一個異步方法，使用await等待另外一個異步方法執行完畢，此時異步方法變相成爲了同步)


//第二種寫法
    var getData3 = () => {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                var username = 'good day';
                resolve(username);
            },1000);
        });
    }

    var test2 = async () => {
        var data = await getData3();
        console.log(data);
    }

    test2();


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