傳遞信息到服務器，從服務器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關于JavaScript利用fetch實現(xiàn)異步請求的相關資料，需要的朋友可以參考借鑒。

前言

相信大家應該都有所了解，在這個AJAX時代，如果想進行 API 等網(wǎng)絡請求都是通過 XMLHttpRequest 或者封裝后的框架進行網(wǎng)絡請求。 現(xiàn)在產(chǎn)生的 fetch 框架簡直就是為了提供更加強大、高效的網(wǎng)絡請求而生，雖然在目前會有一點瀏覽器兼容的問題，但是當我們進行一些異步請求時，都可以使用 fetch 進行完美的網(wǎng)絡請求。下面話不多說，來一起看看詳細的介紹吧。

先來看看各個瀏覽器對fetch的原生支持情況，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。當然新技術的發(fā)展總會經(jīng)歷這個過程。

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實現(xiàn)的方式：

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實現(xiàn)，支持async/await

同構方便

但是也有它的不足fetch請求默認是不帶cookie的，需要設置fetch(url, {credentials: 'include'})

服務器返回400,500這樣的錯誤碼時不會reject,只有網(wǎng)絡錯誤這些導致請求不能完成時，fetch才會被reject.

fetch語法：

fetch(url, options).then(function(response) {

// handle HTTP response

}, function(error) {

// handle network error

})

具體參數(shù)案例：

//兼容包

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

})

參數(shù)說明

url

定義要獲取的資源。這可能是：一個 USVString 字符串，包含要獲取資源的 URL。一個 Request 對象。

options(可選)

一個配置項對象，包括所有對請求的設置。可選的參數(shù)有：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請求結果參數(shù)，在100–599 范圍

statusText (String) - 服務器返回的狀態(tài)報告

ok (boolean)- 如果返回200表示請求成功則為true

headers (Headers)- 返回頭部信息，下面詳細介紹

url (String)- 請求的地址

方法：text() - 以string的形式生成請求text

json()- 生成JSON.parse(responseText)的結果

blob() - 生成一個Blob

arrayBuffer()- 生成一個ArrayBuffer

formData()- 生成格式化的數(shù)據(jù)，可用于其他的請求

其他方法：clone()

Response.error()

Response.redirect()

response.headers

has(name) (boolean)- 判斷是否存在該信息頭

get(name) (String)- 獲取信息頭的數(shù)據(jù)

getAll(name) (Array) - 獲取所有頭部數(shù)據(jù)

set(name, value)- 設置信息頭的參數(shù)

append(name, value)- 添加header的內(nèi)容

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

let name = students[i].name;

let age = students[i].age;

html += `

姓名：${name}，年齡：${age}

`

}

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

let name　=　students[i].name;

let age　=　students[i].age;

html　+= `

姓名：${name}，年齡：${age}

`

}

uldom.innerHTML　=　html;

}

main();

data.json文件內(nèi)容如下：

[

{"name":"張三","age":"3"},

{"name":"李萬","age":"1"},

{"name":"王二","age":"4"},

{"name":"二狗","age":"3"},

{"name":"狗蛋","age":"5"},

{"name":"牛娃","age":"7"}

]

運行后結果是：

姓名：張三，年齡：3

姓名：李萬，年齡：1

姓名：王二，年齡：4

姓名：二狗，年齡：3

姓名：狗蛋，年齡：5

姓名：牛娃，年齡：7

總結

以上是生活随笔為你收集整理的fetch.js php,JavaScript如何使用fetch来完成异步请求的实例介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。