首页 > 其他分享 >ES6-ES11 Promise封装AJAX

ES6-ES11 Promise封装AJAX

时间:2023-03-05 17:44:18浏览次数:44  
标签:function ES6 200 xhr AJAX status Promise ES11

原视频

<!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>

标签:function,ES6,200,xhr,AJAX,status,Promise,ES11
From: https://www.cnblogs.com/chuixulvcao/p/17181038.html

相关文章

  • ES6-ES11 promise介绍与基本使用
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • js es6 判断数组对象中包含是否含有某个属性值
    if(data&&data.hasOwnProperty('Rows')){(data.Rows.Row||[]).map((row)=>{if(row.hasOwnProperty("Summary")){......
  • 10-11——ES6
    第十周ES6——1变量ES6ECMA规定了JS的标准,主要包括:语法、APIES6也是ES2015JavaScript=ECMAScript+DOM+BOMlet和const声明变量和常量;不知......
  • 12——Promise
    第十二周Promise初识PromisePromise异步操作的一种解决方案回调函数,异步操作的一种解决方案什么时候使用一般用来解决层层嵌套的回调函数,(回调地狱callbac......
  • 2.熟练运用es5、es6提供的语法规范(推荐)
    ECMAScript(核心)DOM(文档对象模型)BOM(浏览器对象模型) ES5增加特性1.strict模式  usestrict2.Array增加方法every、forEach、filter、indexOf、lastIndexOf、isArr......
  • ES6-ES11 生成器函数的实例(解决回调地狱问题)
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • ES6-ES11 生成器函数声明与调用
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • ES6-ES11 迭代器介绍
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><tit......
  • ES6-ES11 迭代器应用-自定义遍历数据
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • ES6-ES11 Symbol的内置属性
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......