当前位置:Gxlcms > JavaScript > 关于promise对象的简单用法

关于promise对象的简单用法

时间:2021-07-01 10:21:17 帮助过:12人阅读

promise对象是es6中提出的解决异步回调的一种方案,作为一个新手,最近刚刚把这个玩意给弄明白些。来写这篇文章,希望能得到一些高人的指点,同时我也觉得对于新手不了解promise的朋友们会有一些帮助。

废话不多说,关于介绍promise的话不多说了,有同学不明白的可以自行百度,本文只写一个promise的简单实例,相信稍微看过一些promise的朋友,但是对他又比较畏惧的(因为之前我不懂这个玩意儿的时候,感觉这玩意非常高大上)看了实例能对他有一个新的认识。接下来直接附上我写的简单的一个ajax请求:

function get(url) {
        return new Promise((resolve, reject) => {
            var ajax = new XMLHttpRequest();
            ajax.open('GET', url);
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4) { 
                    if(ajax.status == 200){
                        resolve(ajax);
                    }else{
                        alert(2);
                        reject();
                    }   
                }
            }
            ajax.send();
        });
    }

    document.getElementById('btn').onclick = function() {
        get('b.json').then(function(res) {
            
            console.log(res.responseText);
            document.getElementById('p1').innerHTML = res.responseText;
        });
    }


因为介绍es6的对象,所以本文使用了一些es6的语法,如果有同学不明白的可以自行百度,promise对象接收两个参数,resolve跟reject,我个人的理解就是成功跟失败(如果我的理解有错,希望有大神可以指正,毕竟刚学会),ajax的的几个步骤我就不多说了,我们直接在get函数里边return这个promise对象,在这个promise对象中系我们的ajax方法,最后ajax请求成功。这时候resolve就派上用场了,resolve(ajax);之后 就结束了了,如果不成功呢就直接reject()即可(相当请求失败)。

最后,这个promise简单的案例就这么完成了大家可以再自己搭的环境下测试一下

以上就是关于promise对象的简单用法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行