JavaScript中怎么利用fetch實現異步請求，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
普通的Ajax請求，用XHR發送一個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()才會繼續下去執行，如果Promise被reject()或拋出異常則會被外面的try...catch捕獲。
fetch的主要優點是
語法簡潔，更加語義化 基于標準的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（可選）
一個配置項對象，包括所有對請求的設置?？蛇x的參數有：
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) - 服務器返回的狀態報告
ok (boolean) - 如果返回200表示請求成功則為true
headers (Headers) - 返回頭部信息，下面詳細介紹
url (String) - 請求的地址
方法：
text() - 以string的形式生成請求text
json() - 生成JSON.parse(responseText)的結果
blob() - 生成一個Blob
arrayBuffer() - 生成一個ArrayBuffer
formData() - 生成格式化的數據，可用于其他的請求
其他方法：
clone()
Response.error()
Response.redirect()
response.headers
has(name) (boolean) - 判斷是否存在該信息頭
get(name) (String) - 獲取信息頭的數據
getAll(name) (Array) - 獲取所有頭部數據
set(name, value) - 設置信息頭的參數
append(name, value) - 添加header的內容
delete(name) - 刪除header的信息
forEach(function(value, name){ ... }, [thisContext]) - 循環讀取header的信息
//獲取css里ul的id屬性
let uldom = document.getElementById("students");
//單獨創建一個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
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
