Promise+ajax && async+await+promise+ajax

最新推荐文章于 2025-02-09 22:52:58 发布

原创最新推荐文章于 2025-02-09 22:52:58 发布 · 748 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #async

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一个使用Promise结合Ajax实现异步请求的例子，并演示了如何利用async/await简化异步操作流程。通过具体代码展示了如何创建XMLHttpRequest对象进行GET请求，并处理响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise+Ajax

//创建XHR对象
function creatXHR() {
    var xhr;
    if(window.XMLHttpRequest){
            xhr = new window.XMLHttpRequest();
    }else if(window.ActiveXObject('MicrosoftXMLHTTP')){
            xhr = new ActiveXObject();
    }else{
            console.log('your brower can not support XMLHttpRequest');
    }
    return xhr;
}

function getAjax(url) {
    var xhr = creatXHR();
    return new Promise(function (resolve,reject) {
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                if(200 <= xhr.status <= 304){
                    resolve(xhr.responseText);
                }else{
                     reject('error reject');
                }
            }
        };
        xhr.open('GET',url);
        xhr.send(null);
        });
}
getAjax('data.js').then(function (msg) {
    console.log(msg);
});

async+await+promise+ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="scriptText"></div>
<script>
    var url = 'http://o4j806krb.qnssl.com/public/index.min.aeb155e1.min.js';
    var xhr = new XMLHttpRequest();
    var text;
    function getScript(url) {
        return new Promise(function (resolve,reject) {
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4 && xhr.status === 200){
                    text = xhr.responseText;
                    resolve(xhr.responseText);
                }
            };
            xhr.open('GET',url);
            xhr.send(null);
        });


    }
   var processMessage =  function(url) {
        var ele = document.getElementsByClassName('scriptText')[0];
          getScript(url).then(function () {
            ele.innerHTML = text;
        });
    };
    var processMessageAsync =  async function(url) {
        var ele = document.getElementsByClassName('scriptText')[0];
        await getScript(url);//await必须在async环境中
        ele.innerHTML = text;
    };
    processMessage(url);//这里测试不用async时的情况，页面显示undefined
    setTimeout(function () {
        processMessageAsync(url);//3s后页面显示获取到的内容
    },3000);
//上面ajax能跨域获取数据的原因是o4j806krb.qnssl.com服务器将其资源的CORS设置为acces-control-allow-origin为*
</script>
</body>
</html>