devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ES6中新的AJAX解决方案：Promise、Fetch、Response、Axios_ajax fetch 将结果集返回

作者：Cpp五条 | 2024-02-26 23:27:25

赞

踩

ajax fetch 将结果集返回

目录

（一）Promise对象：包装结果集

一、Promise对象概念：

  • Promise是ES6新增的用于异步操作的对象，它包装了异步操作的结果。
  • Promise对象包装了一个将来会得到、当前未知的结果（如AJAX请求的响应），并允许设置操作成功完成和失败时的回调函数，将来得到的结果会作为参数传入操作成功时的回调函数。

二、Promise对象使用：

1. Promise对象总是处于以下三种状态之一：

  • pending: 初始状态, 既没有完成也没有拒绝。
  • fulfilled: 意味着操作成功完成。
  • rejected:意味着操作失败。

2. 使用方法：

then(onFulfilled，onRejected)方法：接受两个参数：操作成功onFulfilled和失败时onRejected的回调函数，返回一个新的Promise对象以实现链式调用。

  • onFulfilled回调函数接收一个参数res1，是异步操作的返回值，onRejected函数接收一个参数res2，是操作失败的原因。
//p是Promise对象，封装一个未来得到的值；
//在Promise对象上调用then方法，then方法接收两个参数：成功和失败时的回调函数。
p.then(
  value => {//第一个参数：成功时的回调函数，该函数接收的参数value就是Promise对象p封装的未来得到的值
    // 操作成功时执行的函数体
  },
  reason => {//第二个参数：失败时的回调函数，该函数接收的参数reason是操作失败的原因
    // 操作失败时执行的函数体
  }
);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 注意：fetch返回的Promise对象只有遇到网络错误没有响应时才会进入rejected状态，只要成功收到响应，不管响应的状态是什么，都会进入fulfilled状态，从而由onFulfilled函数处理。
  • 注意：then方法的二个参数均是可选的，常常提供只提供第一个参数而忽略第二个参数。

（二）Fench()方法:发送请求，返回结果集

Fetch官方文档

一、概念：

  • Fetch API是新的AJAX解决方案，fetch不是ajax的进一步封装，而是原生JavaScript，没有使用XMLHttpRequest对象。

二、用法：

  • fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。
  • 语法格式：let promise1 = fetch(input，[init]);，promise1接收的是Promise类型的值。
    • 参数：input：要获取资源的 URL或者Request对象
    • 可选参数init ：一个配置项对象，包括所有对请求的设置。可选的参数有：
      • method: 请求使用的方法，如 GET、POST。
      • headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
      • body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
      • mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
      • credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项。
      • cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
      • redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向).。在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
      • referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
      • referrerPolicy: 指定了HTTP头部referer字段的值。可能为以下值之一： no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
      • integrity: 包括请求的 subresource integrity 值。
  • promise对象的属性和方法：
    • then()方法:接受两个参数：操作成功onFulfilled和失败时onRejected的回调函数。
    • statusText属性：返回响应状态。
    • text()方法：返回响应内容中的文字内容。
    • json()方法：将响应内容转换为JSON对象。

三、示例：

  • fetch方法返回一个Promise对象，其值为Response对象（代表收到的响应），所以第一个then()方法接收的函数的参数为Response对象。
  • Response对象的json()方法将响应内容转换为JSON对象，该方法返回值为JSON对象的Promise对象，所以第二个then()方法接收的函数的参数为JSON对象。
fetch('./students.json')
.then(function(response) {
  return response.json();
})
.then(function(students) {
  console.log(students);  // [{"studentNo": "201711104043", ... ...
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

（三）Response对象：

一、概念：

  • fetch方法返回一个Promise对象，这个Promise对象异步操作的结果是Response对象。。

二、常用属性及方法：

  • Response.ok（只读）属性返回true如果响应的状态码在200-299之间
  • Response.status （只读）属性返回响应的状态码
  • Response.statusText （只读）属性返回与状态码一致的状态信息，如状态码为200是状态信息为’OK’
  • Response.text()方法和Response.json()方法均返回Promise对象，前者将响应主体以文本形式返回，后者将响应主体以JSON对象返回。

（四）Axios:

axios.get("https://raw.githubusercontent.com/chinese-poetry/chinese-poetry/master/shijing/shijing.json")
.then(
    response => {
        //处理成功执行
        let poems = response.data;
    })  

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

（五）案例：

  1. 分别使用 Fetch API 和 Axios 库发送请求，获取 JSON 格式《诗经》数据集，数组中随机选择一首古诗，并显示在页面上。
  2. 为了更好的用户体验，我们添加数据加载时的提示信息，开始发送请求后，显示“加载中…”消息，得到响应，并设置古诗内容之前关闭该消息。

1.Fetch：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){
            //全局变量
            var html = "";//拼接诗经内容
            var elLoading = document.getElementById("myspan1");//加载中..实现标签
            var interval;//定时器
            //生成位于区间 min 与 max 间的随机整数
            function getRandomInt(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
            }
            //显示“加载中...”提示消息
            function startIndicator(){
                // elLoading 为显示消息的 HTML 元素，
                elLoading.style.display = 'hidden'; // 显示元素                    
                // 如果有未清除的定时器，先清除
                if(interval != null) clearInterval(interval);
                dotCount = 1;
                interval = setInterval(() => {
                    elLoading.textContent = '加载中' + '.'.repeat(dotCount++);
                    if(dotCount > 3){
                        dotCount = 0;
                    }
                },500);
            }
            //关闭“加载中...”提示消息
            function stopIndicator(){
                elLoading.style.display = 'none'; // 隐藏元素
                clearInterval(interval); // 清除定时器
            }
            //打开浏览器时首先提示“加载中...”
            startIndicator();
            //Fench发送请求
            let promise1 = fetch("https://raw.githubusercontent.com/chinese-poetry/chinese-poetry/master/shijing/shijing.json");
            let promise2 = promise1.then(
                response => {
                    //处理成功执行
                    return response.json();
                })     
            let promise3 = promise2.then(
                response =>{      
                    //这里的response才是数据集数组
                    let poems = response;
                    let id = getRandomInt(0,poems.length);
                    //随机获取数组中某个json对象
                    let poem = poems[id];                  
                    // 数据中的诗歌的内容包含多行，需要遍历这些行，为每行生成一个 p 元素并添加到相应元素中。
                    for (let index = 0; index < poem.content.length; index++) {
                        html+=poem.content[index];
                        html+="<br/>";
                    }
                    //数据都加载完毕，这时候可以停止“加载中提示了”
                    stopIndicator();
                    //题目和内容输出到浏览器页面
                    document.getElementById("title1").innerHTML = poem.title; 
                    document.getElementById("section1").innerHTML = html;
                    return html;
                }
            )                   
        }

    </script>
    <!--加载中...提示标签-->
    <span id="myspan1"></span>
    <!--题目标签-->
    <h1 id="title1"></h1>
    <!--内容标签-->
    <div id="section1"></div>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

2.Axios ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--引入axios包声明-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            //全局变量
            var html = "";//拼接诗经内容
            var elLoading = document.getElementById("myspan1");//加载中..实现标签
            var interval = null;//定时器
            // 声明请求拦截器
            axios.interceptors.request.use((config) => {
                // 展示 Loading 效果
                startIndicator();
                return config;
            })
            // 声明响应拦截器
            axios.interceptors.response.use((response) => {
                // 隐藏 Loading 效果
                stopIndicator();
                return response;
            })
            //生成位于区间 min 与 max 间的随机整数
            function getRandomInt(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
            }
            //显示“加载中...”提示消息
            function startIndicator(){
                // elLoading 为显示消息的 HTML 元素，
                elLoading.style.display = 'hidden'; // 显示元素                    
                // 如果有未清除的定时器，先清除
                if(interval != null) clearInterval(interval);
                dotCount = 1;
                interval = setInterval(() => {
                    elLoading.textContent = '加载中' + '.'.repeat(dotCount++);
                    if(dotCount > 3){
                        dotCount = 0;
                    }
                },500);
            }
            //关闭“加载中...”提示消息
            function stopIndicator(){
                elLoading.style.display = 'none'; // 隐藏元素
                clearInterval(interval); // 清除定时器
            }

            //axios发送请求
            axios.get("https://raw.githubusercontent.com/chinese-poetry/chinese-poetry/master/shijing/shijing.json")
            .then(
                response => {
                    //处理成功执行
                    let poems = response.data;//获取到的是诗经数据集数组，数组中的每个元素是json对象
                    let id = getRandomInt(0,poems.length);
                    //随机获取数组中某个json对象
                    let poem = poems[id];                  
                    // 数据中的诗歌的内容包含多行，需要遍历这些行，为每行生成一个 p 元素并添加到相应元素中。
                    for (let index = 0; index < poem.content.length; index++) {
                        html+=poem.content[index];
                        html+="<br/>";
                    }
                    //题目和内容输出到浏览器页面
                    document.getElementById("title1").innerHTML = poem.title; 
                    document.getElementById("section1").innerHTML = html;
                })                             
        }
    </script>
    <!--加载中...提示标签-->
    <span id="myspan1"></span>
    <!--题目标签-->
    <h1 id="title1"></h1>
    <!--内容标签-->
    <div id="section1"></div>
</body>
</html>





  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/148209
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号