Promise封装ajax

我不是女神ヾ 2022-10-11 00:46 237阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发送 AJAX 请求</title>
    </head>
    
    <body>
        <script>
            // 接口地址: https://api.apiopen.top/getJoke
            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);
                        }
                    }
                }
            })
            
            //指定回调
            p.then(function(value){
                console.log(value);
            }, function(reason){
                console.error(reason);
            });
        </script>
    </body>
    
    </html>

**ajax创建，初始化，发送，绑定事件**，处理响应结果，这些都包含在promise中，如果成功的话resolve将正确的返回结果返回，如果失败reject将失败的结果返回出来。可以通过then来接收返回的结果。

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 Promise_03封装 AJAX

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

向右看齐/ 2023年10月06日 17:26/ 0 赞/ 44 阅读

相关 promise封装XMLHttpRequest请求，封装ajax

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

清疚/ 2023年01月16日 14:21/ 0 赞/ 167 阅读

相关使用Promise封装Ajax操作

请使用Promise封装Ajax操作原始的Ajax操作如下：原型： var onSuccess = function(result){ }; //成功的回调

朴灿烈づ我的快乐病毒、/ 2022年12月21日 02:28/ 0 赞/ 201 阅读

相关 promise对axios二次封装、promise封装ajax、promise封装wx.request、promise封装uni.reqest

在上一篇[Promise][]文章中我们学习了`promisse`的基本知识后，下一步就是`promise`如何使用呢？根据老湿从业8年的经验。将promise在项目中的使

╰半橙微兮°/ 2022年12月20日 01:24/ 0 赞/ 441 阅读

相关 Promise对象实现Ajax封装

Promise对象实现Ajax封装故心故心故心故心小故冲啊 -------------------- 文章目录 Promise对象实现Ajax封装

傷城~/ 2022年12月19日 08:52/ 0 赞/ 188 阅读

相关 Promise封装ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我不是女神ヾ/ 2022年10月11日 00:46/ 0 赞/ 238 阅读

相关 Ajax 搭配 Promise 封装

简述 Ajax（Asynchronous JavaScript And XML） Promise JavaScript

客官°小女子只卖身不卖艺/ 2022年05月25日 02:26/ 0 赞/ 258 阅读

相关 es6 Promise封装ajax

利用Promis 做一个简单的数据请求封装。 function requestP(options = {}) { const { ur

缺乏、安全感/ 2022年02月17日 08:47/ 0 赞/ 302 阅读

相关利用promise封装ajax

1.网上很多封装，但是自己觉得为什么要分开封装呢？get和post封装成一个函数不好么？根据自己以前封装的ajax顺手改了一下，并在自己的项目中使用了一下，还可以。

蔚落/ 2022年01月19日 06:03/ 0 赞/ 278 阅读

相关 promise封装ajax

关于promise使用时的几点： 1. 使用方法：先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败，成功调用resovle(),

水深无声/ 2021年10月23日 21:26/ 0 赞/ 707 阅读