创建text.txt文件
人生苦短，
学我用python
创建json文件
[
{
"title":"es2015",
"body":"es6非常好用"
},
{
"title":"es2016",
"body":"es7非常好用"
},
{
"title":"es2017",
"body":"es8非常好用"
}
]
创建index.html文件
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))
}