ES6中新的AJAX解决方案：Promise、Fetch、Response、Axios

姓蔡小朋友

已于 2022-11-03 18:13:47 修改

阅读量1.2k

点赞数

分类专栏： JavaScript AJAX Vue 文章标签： ajax javascript es6

于 2022-09-12 21:24:01 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126821325

版权

JavaScript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

AJAX

12 篇文章 1 订阅

订阅专栏

Vue

8 篇文章 1 订阅

订阅专栏

（一）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是操作失败的原因
    // 操作失败时执行的函数体
  }
);

注意：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", ... ...
})

（三）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;
    })

（五）案例：

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

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>

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>