ES6中的fetch請求
阿新 • • 發佈：2018-12-12
-
基本使用結構:
//測試介面 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))
}