JavaScript利用fetch實現異步請求的方法實例
更新時間：2017年07月26日 08:54:49 作者：月光光
傳遞信息到服務器，從服務器獲取信息，是前端發(fā)展的重中之重，尤其是現在前后端分離的大前提下，前后端的數據交互是前端的必修科目了，下面這篇文章主要給大家介紹了關于JavaScript利用fetch實現異步請求的相關資料，需要的朋友可以參考借鑒。
前言
相信大家應該都有所了解，在這個AJAX時代，如果想進行 API 等網絡請求都是通過 XMLHttpRequest 或者封裝后的框架進行網絡請求。 現在產生的 fetch 框架簡直就是為了提供更加強大、高效的網絡請求而生，雖然在目前會有一點瀏覽器兼容的問題，但是當我們進行一些異步請求時，都可以使用 fetch 進行完美的網絡請求。下面話不多說，來一起看看詳細的介紹吧。
先來看看各個瀏覽器對fetch的原生支持情況，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。當然新技術的發(fā)展總會經歷這個過程。
Ajax請求
普通的Ajax請求，用XHR發(fā)送一個json請求一般是這樣的：
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = 'json';
xhr.onload = function(){
console.log(xhr.response);
};
xhr.onerror = function(){
console.log("error")
}
xhr.send();
使用fetch實現的方式：
fetch(url).then(function(response){
return response.json();
}).then(function(data){
console.log(data)
}).catch(function(e){
console.log("error")
})
也可以用async/await的方式
try{
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch(e){
console.log("error")
}
用了await后，寫異步代碼感覺像同步代碼一樣爽。await后面可以跟Promise對象，表示等待Promise resolve()才會繼續(xù)下去執(zhí)行，如果Promise被reject()或拋出異常則會被外面的try...catch捕獲。
使用fetch
fetch的主要優(yōu)點是
- 語法簡潔，更加語義化
- 基于標準的Promise實現，支持async/await
- 同構方便
但是也有它的不足
- fetch請求默認是不帶cookie的，需要設置
fetch(url, {credentials: 'include'}) - 服務器返回400,500這樣的錯誤碼時不會reject,只有網絡錯誤這些導致請求不能完成時，fetch才會被reject.
fetch語法：
fetch(url, options).then(function(response) {
// handle HTTP response
}, function(error) {
// handle network error
})
具體參數案例：
//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()
import 'whatwg-fetch'
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
},
credentials: "same-origin"
}).then(function(response) {
response.status //=> number 100–599
response.statusText //=> String
response.headers //=> Headers
response.url //=> String
response.text().then(function(responseText) { ... })
}, function(error) {
error.message //=> String
})
參數說明
url
定義要獲取的資源。這可能是：一個 USVString 字符串，包含要獲取資源的 URL。一個 Request 對象。
options（可選）
一個配置項對象，包括所有對請求的設置。可選的參數有：
- method: 請求使用的方法，如 GET、POST。
- headers: 請求的頭信息，形式為 Headers 對象或 ByteString。
- body: 請求的 body 信息：可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。
- mode: 請求的模式，如 cors、 no-cors 或者 same-origin。
- credentials: 請求的 credentials，如 omit、same-origin 或者 include。
- cache: 請求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。
response
一個 Promise，resolve 時回傳 Response 對象：
屬性：
status (number)- HTTP請求結果參數，在100–599 范圍statusText (String)- 服務器返回的狀態(tài)報告ok (boolean)- 如果返回200表示請求成功則為trueheaders (Headers)- 返回頭部信息，下面詳細介紹url (String)- 請求的地址
方法：
text()- 以string的形式生成請求textjson()- 生成JSON.parse(responseText)的結果blob()- 生成一個BlobarrayBuffer()- 生成一個ArrayBufferformData()- 生成格式化的數據，可用于其他的請求
其他方法：
clone()Response.error()Response.redirect()response.headershas(name) (boolean)- 判斷是否存在該信息頭get(name) (String)- 獲取信息頭的數據getAll(name) (Array)- 獲取所有頭部數據set(name, value)- 設置信息頭的參數append(name, value)- 添加header的內容delete(name)- 刪除header的信息forEach(function(value, name){ ... }, [thisContext])- 循環(huán)讀取header的信息
使用實例
//獲取css里ul的id屬性
let uldom = document.getElementById("students");
//單獨創(chuàng)建一個json文件，獲取地址
let url = "data.json";
function main(){
fetch(url).then(respone=>{
return respone.json();
}).then(students=>{
let html = ``;
for(let i=0, l=students.length; i<l; i++){
let name = students[i].name;
let age = students[i].age;
html += `
<li>姓名：${name}，年齡：${age}</li>
`
}
uldom.innerHTML = html;
});
}
main();
結合await最終代碼
let uldom = document.getElementById("students");
let url = "data.json";
async function main(){
let respone = await fetch(url);
let students = await respone.json();
let html =``;
for(let i=0, l=students.length; i<l; i++){
let name = students[i].name;
let age = students[i].age;
html += `
<li>姓名：${name}，年齡：${age}</li>
`
}
uldom.innerHTML = html;
}
main();
data.json文件內容如下：
[
{"name":"張三","age":"3"},
{"name":"李萬","age":"1"},
{"name":"王二","age":"4"},
{"name":"二狗","age":"3"},
{"name":"狗蛋","age":"5"},
{"name":"牛娃","age":"7"}
]
運行后結果是：
姓名：張三，年齡：3 姓名：李萬，年齡：1 姓名：王二，年齡：4 姓名：二狗，年齡：3 姓名：狗蛋，年齡：5 姓名：牛娃，年齡：7
源碼下載
下載地址：http://xiazai.jb51.net/201707/yuanma/js-fetch(jb51.net).rar
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(五)可移動地圖的實現
首先來說，我對游戲開發(fā)可以算是不怎么深入，因為現在的程序員愛用canvas，我卻就只會拿幾個div湊和。不過沒關系，因為做出來的同樣是游戲。哈！廢話最近有點多，感興趣的朋友可以了解下2013-01-01
javascript支持firefox,ie7頁面布局拖拽效果代碼
javascript 拖拽 頁面拖拽 拖拽效果的頁面 超級拖拽 javascript支持firefox,ie7頁面布局拖拽效果代碼 鼠標拖拽2007-12-12
這篇文章主要為大家詳細介紹了js+canvas實現紙牌游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JS原生實現輪播圖的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了js網頁右下角提示框的實現方法,以實例展示了css樣式與HTML布局,以及對應的js顯示與關閉提示框等功能,需要的朋友可以參考下2014-10-10
圖形顯示特效鼠標驅動圖片變化隨機顯示banner圖片隨意移動圖片定期消失字符連續(xù)消隱文字不停變色JavaScript容錯...圖片循環(huán)顯現QQ菜單生成器圖形顯示特效連續(xù)滾動的圖片圖片水中倒影純JavaScript時鐘圖片翻滾導航星星滿天閃爍左側的極酷...2008-04-04
這篇文章主要為大家詳細介紹了微信小程序實現文本輸入彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了js簡單實現標簽云效果,基于miaov.js文件實現標簽云的3D滾動效果,非常簡單實用,需要的朋友可以參考下2015-08-08
有1到100000共10萬個數。從中隨機抽走兩個。再把原來的數字順序打亂。如何快速找到被抽走的兩個數2011-04-04
JavaScript對象中的可擴展性指的是：是否可以給對象添加新屬性。所有的內置對象和自定義對象顯示的都是可擴展的，對于宿主對象，則由JavaScript引擎決定2022-11-11