日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達者為師

網(wǎng)站首頁 編程語言 正文

async+await：發(fā)送Ajax請求

作者：似曾不相識 更新時間： 2022-07-18 編程語言

async函數(shù)

????async關(guān)鍵字用于修飾函數(shù)，async函數(shù)的返回值為Promise對象，這個promise對象的結(jié)果，由async函數(shù)執(zhí)行的返回值決定。
????????（1）async函數(shù)的返回值為普通類型，那么對應(yīng)的Promise對象的狀態(tài)為成功。

<script>
    async function main() {
        return "Hello,Async!";
    }

    let data = main();
    console.log(data)
</script>

在這里插入圖片描述
????????（2）async函數(shù)的返回值為Promise對象，那么返回的Promise對象的狀態(tài)由這個返回值決定。

<script>
    async function main() {
        return new Promise((resolve, reject) => {
            resolve("Hello,Async!");
        });
    }

    let data = main();
    console.log(data)
</script>

在這里插入圖片描述
????????（3）async函數(shù)通過throw語句拋出異常，那么返回的Promise對象的狀態(tài)恒定為失敗。

<script>
    async function main() {
        throw "ERROR";
    }

    let data = main();
    console.log(data)
</script>

在這里插入圖片描述

await表達式

????await關(guān)鍵字用于修飾一個表達式，該表達式被稱為：“await表達式”。
????await表達式的右側(cè)語句一般對應(yīng)一個Promise對象，但是并不是固定的，也可以是其它類型的值。
????await表達式返回的一般都是值，而非promise對象。
????????（1）若await關(guān)鍵字右側(cè)為Promise對象，那么await表達式返回的就是Promise成功的值；

<script>
    async function main() {
        let promise = new Promise((resolve, reject) => {
            resolve("Hello,Async!");
        });
        let result = await promise;
        console.log(result)
        return result;//返回值
        // throw "ERROR";
    }

    let data = main();
    console.log(data)
</script>

在這里插入圖片描述
????????（2）若await關(guān)鍵字右側(cè)是其它值，那么會直接將此值作為await的返回值。

<script>
    async function main() {
        let promise = "Hello,Async!"
            /*new Promise((resolve, reject) => {
                        resolve("Hello,Async!");
                    });*/
        let result = await promise;
        console.log(result)
        return result;
        // throw "ERROR";
    }

    let data = main();
    console.log(data)
</script>

在這里插入圖片描述

????????（3）此外，await表達式必須寫在async函數(shù)中，否則會報錯；如果await關(guān)鍵字右側(cè)promise對象是失敗的，那么可以使用try…catch…語句塊中進行捕獲處理。
在這里插入圖片描述

<script>
    async function main() {
        let promise = new Promise((resolve, reject) => {
            reject("Hello,Async!");
        });
        //異常捕獲
        try {
            let result = await promise;
            return result;
        } catch (err) {
            console.log(err)
            return undefined;
        }
    }

    let data = main();
    console.log(data)
</script>

在這里插入圖片描述

async+await:發(fā)送Ajax請求,解析數(shù)據(jù)

????后端接口URL：http://localhost:8011/pg_demo/distract/GET/distract，返回數(shù)據(jù)內(nèi)容截圖如下，
在這里插入圖片描述????下面，使用async和await表達式，向后端發(fā)送Ajax數(shù)據(jù)請求，獲取接口數(shù)據(jù)（其中跨域問題已經(jīng)在后端配置，可參考：《SpringBoot-跨域訪問3種配置方式》），示例代碼如下，
在這里插入圖片描述

<!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">
    <title>Document</title>
</head>

<body>
    <button id="btn">點擊按鈕</button>
</body>
<script>
    function sendAjax(_url) {
        return new Promise((resolve, reject) => {
            //1-創(chuàng)建Ajax對象
            let xhr = new XMLHttpRequest();
            //2-設(shè)置請求方法+路徑
            xhr.open("GET", _url);
            // 3-發(fā)送請求
            xhr.send();
            //4-處理返回結(jié)果
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    //判斷狀態(tài)碼
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //轉(zhuǎn)換promise對象狀態(tài)為成功
                        resolve(xhr.response);
                    } else {
                        //轉(zhuǎn)換promise對象狀態(tài)為失敗
                        reject(xhr.status);
                    }
                }
            }
        });
    }

    let button = document.querySelector("#btn");
    //由于await關(guān)鍵字只能用于async函數(shù)-因此點擊事件的回調(diào)函數(shù)需要使用async關(guān)鍵字進行修飾
    button.addEventListener("click", async function() {
        //獲取接口返回數(shù)據(jù)
        let result = await sendAjax("http://localhost:8011/pg_demo/distract/GET/distract");
        //解析結(jié)果
        console.log(JSON.parse(result));
    })
</script>

</html>

????點擊按鈕之后，控制臺打印的返回數(shù)據(jù)內(nèi)容如下，
在這里插入圖片描述

原文鏈接：https://blog.csdn.net/weixin_43524214/article/details/125836176

欄目分類
最近更新