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

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

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

promise封裝ajax請求

作者：頑強(qiáng)的小豆子 更新時間： 2022-07-10 編程語言

promise是es6語法，直接使用即可。

XMLHttpRequest是瀏覽器實現(xiàn)的api接口，用于向后臺請求數(shù)據(jù)的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封裝AJAX操作</title>
</head>
<body>
    <script>
        /**
         * 封裝一個函數(shù) sendAJAX 發(fā)送 GET AJAX 請求
         * 參數(shù)   URL
         * 返回結(jié)果 Promise 對象
         */
        function sendAJAX(url){
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open("GET", url);
                xhr.send();
                //處理結(jié)果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判斷成功
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的結(jié)果
							//解決跨域請求問題
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }
		//第一個箭頭函數(shù)，處理成功的返回結(jié)果（跟xhr.response一致），第二個箭頭函數(shù)處理失敗的結(jié)果（跟xhr.status一致）
        sendAJAX('http://localhost:3000/showblog')
        .then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        });
    </script>
</body>
</html>

原文鏈接：https://blog.csdn.net/qiuyushuofeng/article/details/123435236

欄目分類
最近更新