fetch 实战

创建text.txt文件
人生苦短，
学我用python

创建json文件
[
{
"title":"es2015",
"body":"es6非常好用"
},
{
"title":"es2016",
"body":"es7非常好用"
},
{
"title":"es2017",
"body":"es8非常好用"
}
]

创建index.html文件

Document

Fetch Api sandbox

创建app.js文件

document.querySelector('.btn1').addEventListener('click',getText);

document.querySelector('.btn2').addEventListener('click',getJson);

document.querySelector('.btn3').addEventListener('click',getExternal);

// 获取本地纯文本数据
function getText(){
fetch("text.txt")
.then((res) => res.text())
.then(data => {
console.log(data);
document.querySelector('.output').innerHTML = data;
})
.catch(err => console.log(err))
}

// 获取本地json数据
function getJson(){
fetch("code.json")
.then((res) => res.json())
.then(data => {
console.log(data);
let output = '';
data.forEach((code) => {
output += <li>${code.title}</li>
})
document.querySelector('.output').innerHTML = output;
})
.catch(err => console.log(err))
}

// 请求网络api
function getExternal(){
// https://api.github.com/users
fetch("https://api.github.com/users")
.then((res) => res.json())
.then(data => {
console.log(data);
let output = '';
data.forEach((user) => {
output += <li>${user.login}</li>
})
document.querySelector('.output').innerHTML = output;
})
.catch(err => console.log(err))
}