版权声明:未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/82871875
-
基本使用结构:
//测试接口
let url = 'http://jsonplaceholder.typicode.com/posts';
// console.log(fetch(url))//Promise {<pending>} 未执行
fetch(url)
.then(response => response.json())//把response这个对象解析成正常我的可读的状态(为可读流)
.then(data => console.log(data))//解析之后打印出来是所有返回的数据
.catch(err => console.log(err))//请求失败后所调用,err一般请求超过300,是不会走这一块的,也就是说只有域名错了才会走catch
- 2.fetch分为三种请求格式
- 本地目录:
- 本地文本格式:
- HTML代码:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.bootcss.com/skeleton/2.0.4/skeleton.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Fetch Api sandbox</h1> <button id="button1">请求本地文本数据</button> <button id="button2">请求本地json数据</button> <button id="button3">请求网络接口</button> <br><br> <div id="outPut"></div> </div> <script src="fetch.js"></script> </body> </html>
js: 文本请求格式;
-
document.getElementById('button1').addEventListener('click',getText); // document.getElementById('button2').addEventListener('click',getJson); // document.getElementById('button3').addEventListener('click',getExternal); // 获取本地纯文本数据 function getText(){ fetch('text.txt') .then((res) => res.text())//返回的是text方法 .then(data => { console.log(data); document.getElementById('outPut').innerHTML = data; }) .catch(err => console.log(err)) }
点击后的效果:
本地json请求格式 :
document.getElementById('button2').addEventListener('click',getJson);
// document.getElementById('button3').addEventListener('click',getExternal);
//获取json数据
function getJson(){
fetch('jsontext.json')
.then((res) => res.json())//返回的是json方法
.then(data => {
console.log(data);
let outPut = '';
data.forEach((post) =>{
outPut += `<li>${post.title}</li>`
})
document.getElementById('outPut').innerHTML = outPut;
})
.catch(err => console.log(err))
}
网络接口请 求方式:
document.getElementById('button3').addEventListener('click',getExternal);
//网络请求
function getExternal(){
fetch('https://api.github.com/users')
.then((res) => res.json())//返回的是json方法
.then(data => {
console.log(data);
let outPut = '';
data.forEach((user) =>{
outPut += `<li>${user.login}</li>`
})
document.getElementById('outPut').innerHTML = outPut;
})
.catch(err => console.log(err))
}