Fetch概述 公升級的網路請求

xmlhttprequest的問題

所有的功能全部集中在同乙個物件上，容易書寫出混亂不易維護的**

採用傳統的事件驅動模式，無法適配新的 promise api

fetch api 的特點

並非取代 ajax，而是對 ajax 傳統 api 的改進

精細的功能分割：頭部資訊、請求資訊、響應資訊等均分布到不同的物件，更利於處理各種複雜的 ajax 場景

使用 promise api，更利於非同步**的書寫

引數：

1、資源的路徑，必填項

2、請求頭的配置物件，可以選填。

返回值：

無論請求成功與否，它都返回乙個promise物件

當收到伺服器的返回結果後，promise進入resolved狀態，狀態資料為response物件

當網路發生錯誤（或其他導致無法完成互動的錯誤）時，promise進入rejected狀態，狀態資料為錯誤資訊

(1)基礎用法

function

getdatas()
).catch
(error=>
)}

function

getdatas()
).catch
(error=>
)}

async

function
getdatas()
trycatch
(error
)}

credentials：如何攜帶憑據（cookie）

cache：配置快取模式

除了使用基本的fetch方法，還可以通過建立乙個request物件來完成請求（實際上，fetch的內部會幫你建立乙個request物件。

new

request
(url位址, 配置)

request物件方法：

簡單舉例：

// omit注意點：盡量保證每次請求都是乙個新的request物件

function

getrequestinfo()
}return
newrequest
(url,config)
}async
function
getdatas()
catch
(error)}
getprovince
()

response物件方法：

const respone =

newresponse
(`,`
,)

const headers =

newheaders
()

console.

log(req.headers.
has(
"content-type"))
console.
log(req.headers.
get(
"content-type"))
console.
log(req.headers.
set(
"content-type",)
)

請求的表單格式：multipart/form-data

請求體：必須包含乙個鍵值對，鍵的名稱是伺服器要求的名稱，值是檔案資料

html5中，js仍然無法隨意的獲取檔案資料，但是可以獲取到input元素中，被使用者選中的檔案資料

可以利用html5提供的formdata建構函式來建立請求體

async

function
upload
(files =
)]if(files.length===0)
return
const url =
"..."
const formdata =
newformdata()
;//構建請求題
for(
const item of files)
const resp =
await
fetch
(url,
, body:formdata//可以省略請求頭，會自動修改為multipart/form-data})
const result =
await resp.
json()
}

React網路請求fetch之post請求

本節介紹下react下fetch的post請求 1 編寫服務端 載入express模組 var express require express 載入path路徑處理核心模組 var path require path 載入body parser中介軟體 var bodyparser require ...

Volley網路請求概述

自動排程網路請求 支援併發網路連線 即支援多執行緒 支援標準的http快取協議 由伺服器來決定是否快取資料 支援請求優先順序設定 4級 支援取消單個或多個請求 易於定製 重試 擴充套件性強。比如retry backoff機制 強大的網路請求能力讓你輕鬆的傳送非同步請求來填充ui資料 提供除錯和跟蹤工...

html自帶的fetch 非同步請求 api

最簡單的fetchapi呼叫如下 fetch then response response.json then data fetch相容性問題 可以用下面兩行 解決相容性 fetch xx then function response fetch傳送資料 fetch url,options 第二個引...