前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2.用Promise对AJAX进行简单的封装

2.用Promise对AJAX进行简单的封装

作者头像
打不着的大喇叭
发布2024-03-11 16:10:29
1910
发布2024-03-11 16:10:29
举报
文章被收录于专栏:喇叭的学堂

想必都用过ajax 的请求吧,那么为什么需要用promise对ajax封装?

使用promise 发送请求前,我们需要在ajax绑定事件中对返回的事件进行操作,

而使用promise后,只需要在promise外的用then等方法进行操作,看起来更简洁好看,便于ajax请求简化

代码语言:javascript
复制
        const p = new Promise((resolve, reject) => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化
            xhr.open("GET", "https://api.apiopen.top/getJ");

            //3. 发送
            xhr.send();

            //4. 绑定事件, 处理响应结果
            xhr.onreadystatechange = function() {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200-299
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //表示成功
                        resolve(xhr.response);
                    } else {
                        //如果失败
                        reject(xhr.status);
                    }
                }
            }
        })

现在看上面的ajax的请求是不是简化好看一点,没有对请求回来的数据处理 下面用then 方法进行指定回调

代码语言:javascript
复制
        p.then(function(value) {
            console.log(value);
        }, function(reason) {
            console.error(reason);
        });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-01-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档