一 序言
在 傳統Ajax 時代，進行 API 等網絡請求都是通過XMLHttpRequest或者封裝後的架構進行網絡請求,然而配置和調用方式非常混亂，對于剛入門的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網絡異步擷取資源，而且可以很容易地被其他技術使用，例如 Service Workers。
本文首發位址為GitHub部落格,寫文章不易，請多多支援與關注！
二 與Ajax對比
使用Ajax請求一個 JSON 資料一般是這樣：
1. var xhr = new XMLHttpRequest();
2. xhr.open('GET', url/file,true);
3. xhr.onreadystatechange = function() {
4. if(xhr.readyState==4){
5. if(xhr.status==200){
6. var data=xhr.responseText;
7. console.log(data);
8. }
9. };
10. xhr.onerror = function() {
11. console.log("Oh, error");
12. }; -
xhr.send();
同樣我們使用fetch請求JSON資料：
1. fetch(url).then(response => response.json())//解析為可讀資料
2. .then(data => console.log(data))//執行結果是 resolve就調用then方法
3. .catch(err => console.log("Oh, error", err))//執行結果是 reject就調用catch方法 從兩者對比來看，fetch代碼精簡許多，業務邏輯更清晰明了，使得代碼易于維護，可讀性更高。
總而言之，Fetch 優點主要有：
1. 文法簡潔，更加語義化，業務邏輯更清晰
2. 基于标準 Promise 實作，支援 async/await
3. 同構友善，使用isomorphic-fetch
三 Promise簡介
由于 Fetch API 是基于 Promise 設計，接下來我們簡單介紹下Promise工作流程，友善大家更好了解Fetch。
fetch方法傳回一個Promise對象, 根據 Promise Api 的特性, fetch可以友善地使用then方法将各個處理邏輯串起來, 使用 Promise.resolve() 或 Promise.reject() 方法将分别返會肯定結果的Promise或否定結果的Promise, 進而調用下一個then 或者 catch。一旦then中的語句出現錯誤, 也将跳到catch中。
四 請求常見資料格式
接下來将介紹如何使用fetch請求本地文本資料，請求本地JSON資料以及請求網絡接口。其實操作相比與Ajax，簡單很多！
1. //HTML部分
2. <div class="container">
3. <h1>Fetch Api sandbox</h1>
4. <button id="button1">請求本地文本資料</button>
5. <button id="button2">請求本地json資料</button>
6. <button id="button3">請求網絡接口</button>
7. <br><br>
8. <div id="output"></div>
9. </div>
10. <script src="app.js"></script> 1.fetch請求本地文本資料
本地有一個test.txt文檔，通過以下代碼就可以擷取其中的資料，并且顯示在頁面上。
1. document.getElementById('button1').addEventListener('click',getText);
2. function getText(){
3. fetch("test.txt")
4. .then((res) => res.text())//注意：此處是res.text()
5. .then(data => {
6. console.log(data);
7. document.getElementById('output').innerHTML = data;
8. })
9. .catch(err => console.log(err));
10. } 2.fetch請求本地JSON資料
本地有個posts.json資料，與請求本地文本不同的是，得到資料後還要用forEach周遊,最後呈現在頁面上。
1. document.getElementById('button2').addEventListener('click',getJson);
2. function getJson(){
3. fetch("posts.json")
4. .then((res) => res.json())
5. .then(data => {
6. console.log(data);
7. let output = '';
8. data.forEach((post) => {
9. output += `<li>${post.title}</li>`;
10. })
11. document.getElementById('output').innerHTML = output;
12. })
13. .catch(err => console.log(err));
14. } 3.fetch請求網絡接口
擷取
https://api.github.com/users
中的資料，做法與擷取本地JSON的方法類似,得到資料後，同樣要經過處理
1. document.getElementById('button3').addEventListener('click',getExternal);
2. function getExternal(){
3. // https://api.github.com/users
4. fetch("https://api.github.com/users")
5. .then((res) => res.json())
6. .then(data => {
7. console.log(data);
8. let output = '';
9. data.forEach((user) => {
10. output += `<li>${user.login}</li>`;
11. })
12. document.getElementById('output').innerHTML = output;
13. })
14. .catch(err => console.log(err));
15. } END