在 傳統ajax 時代，進行 api 等網路請求都是通過xmlhttprequest或者封裝後的框架進行網路請求,然而配置和呼叫方式非常混亂，對於剛入門的新手並不友好。今天我們介紹的fetch提供了乙個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網路非同步獲取資源，而且可以很容易地被其他技術使用，例如 service workers。
本文首發位址為github部落格
使用ajax請求乙個 json 資料一般是這樣：
同樣我們使用fetch請求json資料：
fetch(url).then(response => response.json())//解析為可讀資料
.then(data => console.log(data))//執行結果是 resolve就呼叫then方法
.catch(err => console.log("oh, error", err))//執行結果是 reject就呼叫catch方法
總而言之，fetch 優點主要有：
1. 語法簡潔，更加語義化，業務邏輯更清晰
2. 基於標準 promise 實現，支援 async/await
3. 同構方便，使用isomorphic-fetch
由於 fetch api 是基於 promise 設計，接下來我們簡單介紹下promise工作流程，方便大家更好理解fetch。
fetch方法返回乙個promise物件, 根據 promise api 的特性, fetch可以方便地使用then方法將各個處理邏輯串起來, 使用 promise.resolve() 或 promise.reject() 方法將分別返會肯定結果的promise或否定結果的promise, 從而呼叫下乙個then 或者 catch。一旦then中的語句出現錯誤, 也將跳到catch中。
接下來將介紹如何使用fetch請求本地文字資料，請求本地json資料以及請求網路介面。其實操作相比與ajax，簡單很多！
//html部分
請求本地文字資料
請求本地json資料
請求網路介面
document.getelementbyid('button1').addeventlistener('click',gettext);
function gettext())
.catch(err => console.log(err));
}
document.getelementbyid('button2').addeventlistener('click',getjson);
function getjson()`;
})document.getelementbyid('output').innerhtml = output;
}).catch(err => console.log(err));
}
document.getelementbyid('button3').addeventlistener('click',getexternal);
function getexternal()`;
})document.getelementbyid('output').innerhtml = output;
}).catch(err => console.log(err));
}
fetch 如何請求資料
在 傳統ajax 時代，進行 api 等網路請求都是通過xmlhttprequest或者封裝後的框架進行網路請求,然而配置和呼叫方式非常混亂，對於剛入門的新手並不友好。今天我們介紹的fetch提供了乙個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網路非同步獲取資源，而且可以很容易地被其他...
解析Fetch實現請求資料
這篇文章主要介紹了fetch 如何實現請求資料，文中通過示例 介紹的非常詳細，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。一 序言在 傳統ajax 時代，進行 api 等網路請求都是通過xmlhttprequest或者封裝後的框架進行網路請求,...
anxios和fetch資料請求
proto object注意 anxios返回的是promise物件 案例如下 這裡引用了bootstrap html檔案如下 class container class row axios get button div div div 格式如下 axios.get url then res con...