then(onFulfilled，onRejected)方法：接受两个参数：操作成功onFulfilled和失败时onRejected的回调函数，返回一个新的Promise对象以实现链式调用。
//p是Promise对象，封装一个未来得到的值；
//在Promise对象上调用then方法，then方法接收两个参数：成功和失败时的回调函数。
p.then(
value => {//第一个参数：成功时的回调函数，该函数接收的参数value就是Promise对象p封装的未来得到的值
// 操作成功时执行的函数体
},
reason => {//第二个参数：失败时的回调函数，该函数接收的参数reason是操作失败的原因
// 操作失败时执行的函数体
}
);
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 值。then()方法:接受两个参数：操作成功onFulfilled和失败时onRejected的回调函数。statusText属性：返回响应状态。text()方法：返回响应内容中的文字内容。json()方法：将响应内容转换为JSON对象。fetch('./students.json')
.then(function(response) {
return response.json();
})
.then(function(students) {
console.log(students); // [{"studentNo": "201711104043", ... ...
})
Response.ok（只读）属性返回true如果响应的状态码在200-299之间Response.status （只读）属性返回响应的状态码Response.statusText （只读）属性返回与状态码一致的状态信息，如状态码为200是状态信息为’OK’Response.text()方法和Response.json()方法均返回Promise对象，前者将响应主体以文本形式返回，后者将响应主体以JSON对象返回。axios.get("https://raw.githubusercontent.com/chinese-poetry/chinese-poetry/master/shijing/shijing.json")
.then(
response => {
//处理成功执行
let poems = response.data;
})
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>Documenttitle>
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+="
";
}
//数据都加载完毕，这时候可以停止“加载中提示了”
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>
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>Documenttitle>
head>
<body>
<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+="
";
}
//题目和内容输出到浏览器页面
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>