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

學無先后，達者為師

網站首頁 編程語言 正文

async+await：發送Ajax請求

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

async函數

????async關鍵字用于修飾函數，async函數的返回值為Promise對象，這個promise對象的結果，由async函數執行的返回值決定。
????????（1）async函數的返回值為普通類型，那么對應的Promise對象的狀態為成功。

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

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

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

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

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

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

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

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

在這里插入圖片描述

await表達式

????await關鍵字用于修飾一個表達式，該表達式被稱為：“await表達式”。
????await表達式的右側語句一般對應一個Promise對象，但是并不是固定的，也可以是其它類型的值。
????await表達式返回的一般都是值，而非promise對象。
????????（1）若await關鍵字右側為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關鍵字右側是其它值，那么會直接將此值作為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函數中，否則會報錯；如果await關鍵字右側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:發送Ajax請求,解析數據

????后端接口URL：http://localhost:8011/pg_demo/distract/GET/distract，返回數據內容截圖如下，
在這里插入圖片描述????下面，使用async和await表達式，向后端發送Ajax數據請求，獲取接口數據（其中跨域問題已經在后端配置，可參考：《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-創建Ajax對象
            let xhr = new XMLHttpRequest();
            //2-設置請求方法+路徑
            xhr.open("GET", _url);
            // 3-發送請求
            xhr.send();
            //4-處理返回結果
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    //判斷狀態碼
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //轉換promise對象狀態為成功
                        resolve(xhr.response);
                    } else {
                        //轉換promise對象狀態為失敗
                        reject(xhr.status);
                    }
                }
            }
        });
    }

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

</html>

????點擊按鈕之后，控制臺打印的返回數據內容如下，
在這里插入圖片描述

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

欄目分類
最近更新