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

来源：互联网发布：淘宝销售属性怎么添加编辑：程序博客网时间：2024/05/16 11:00

Peomise+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);        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>

阅读全文

0 0