前端技術整理之fetch

綾曉路發表於2018-01-18
前端

前端技術整理之fetch

前言

 The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
複製程式碼

Fetch API 提供了一個獲取資源的介面（包括跨域）。任何使用過 XMLHttpRequest 的人都能輕鬆上手，但新的API提供了更強大和靈活的功能集。

這是官方API中的第一句話，可以看出fetch是Web API中新增的，用於取代XMLHttpRequest的網路請求框架，它比之更強大。下面我們來下它的使用。

Fetch

fetch返回的其實是一個Promise函式。我們先來看一個完整的請求程式碼：

const url = '192.168.32.45:8081/login.shtml'

fetch(url, {
	method: 'POST',
	headers: {
		'Accept': 'application/json',
    	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
		username: 'fll',
		password: '123'
	})
})
.then((response) => {
	if(response.status == 200) {
		return response
	}
})
.then((data) => {
	return data.text()
}).then((text) => {
	console.log('請求成功', text)
}).catch((err) => {
	console.log('請求錯誤', err)
})
複製程式碼

fetch的引數有兩個引數，第一個是url，就是請求的路徑；

Request

另一個是Request物件，包括一下幾種：

  • method: 請求方法：GET、POST。
  • headers：請求頭資訊，形式為Headers物件或者ByteString。上述例子就是一個json請求的請求頭。
  • body: 請求引數：可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 物件。注意 GET 或 HEAD 方法的請求不能包含 body 資訊。
  • mode：請求的模式。如 cors, no-cors, same-origin, navigate
  • cache: 快取模式，如default, reload, no-cache

更多的資訊請看Reques

如果你對請求頭不太熟悉的，可以看這裡Headers

Response

上面我們說了fetch的返回的是一個Promise物件。然後會攜帶Response 物件。

Response物件：

  • 屬性：

    • status (number) - HTTP請求結果引數，在100–599 範圍， 200 為成功
    • 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)新增headers的內容
  • delete(name) 刪除header的資訊
  • forEach迴圈讀取header的資訊

參考資料

ES6的Fetch非同步請求

Fetch官方API

fetch API 和 Ajax（XMLHttpRequest）的差異

相關文章