Fetch學習筆記。

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

fetch提供了對request和response物件的通用定義。使之今後可以被使用到更多地應用場景中：無論是service workers、cache api、又或則是其它處理請求和響應的方式，甚至是任何一種需要你自己在程式中生成響應的方式。

它還提供了一種定義，將cors和http原生的頭資訊結合起來，取代了原來那種分離的定義。

傳送請求或則獲取資源，需要使用windoworworkerglobalscope.fetch方法。它在很多介面中都被實現了，比如window和workerglobalscope。所以在各種環境中都可以用這個方法獲取到資源。

fetch()必須接受乙個引數--資源的路徑。無論請求成功與否，它都返回乙個promise物件，resolve對應請求的response。你也可以傳乙個可選的第二個引數init（參見request）。

一旦response被返回，就有一些方法可以使用了，比如定義內容或者處理方法(參見body)。

你也可以通過request()和response()的建構函式直接建立請求和響應，但是我們不建議這麼做。它們應該被用於建立其它api的結果。

*當接收到乙個代表錯誤的http狀態碼時，從fetch()返回的promise不會被標記為reject，即使該http響應的狀態碼是404或500.相反，它會將promise狀態標記為resolve(但是會將resolve的返回值的ok屬性設定為false)，僅當網路故障時或請求被阻止時，才會標記為reject。

*預設情況下，fetch不會從伺服器端傳送或接收任何cookie，如果站點依賴於使用者session，則會導致未經認證的請求(要傳送cookies，必須設定credentials).

進行fetch請求。

乙個基本的fetch請求設定起來很簡單。看看下面的**：

fetch('').then(function(response)).then(function(myjson))

這裡我們通過網路獲取乙個json檔案並將其列印到控制台。最簡單的用法是只提供乙個引數用來指明想fetch()到的資源路徑，然後返回乙個包含響應結果的promise（乙個response物件）。

當然它只是乙個http響應，而不是真的json。為了獲取json的內容，我們需要使用json()方法。

fetch()接收第二個可選引數，乙個可以控制不同配置的init物件：

參考fetch()，檢視所有可選的配置和更多描述。

postdata('',).then(
data=>console.log(data)
).catch(
error = >console.error(error)
)function postdata(url,data),
method:'post',
mode:'cors',
redirect:'follow',
referrer:'no-referrer',
}).then(
response=>response.json()
)}

為了讓瀏覽器傳送包含憑據的請求(即使是跨域源)，要將credentials:'include'新增到傳遞給fetch()方法的init物件。

fetch('url',)

如果你只想在請求url與呼叫指令碼位於同一起源處時傳送憑據，請新增credentials：'same-origin'.

fetch('url',)

要確保瀏覽器不在請求中包含憑據，請使用credentials:'omit'。

fetch('url',)

var url = '';
var data = ;
fetch(url,)
}).then(res=>res.json())
.catch(error => console.error('error:', error))
.then(response => console.log('success:', response))

var formdata = new formdata();
var filefiled = document.queryselector('input[type='file']');
fetch('url',)
.then(response => response.json())
.catch(error => console.error('error:', error))
.then(response => console.log('success:', response))

如果遇到網路故障，fetch()promise將會reject，帶上乙個typeerror物件。雖然這個情況經常是遇到了許可權問題或類似問題--比如404不是乙個網路故障。想要精確判斷fetch()是否成功，需要包含promise resolved的情況，此時再判斷response.ok是不是為true。類似以下**：

}).then(function(myblod)).catch(function(error))除了傳給fetch()乙個資源的位址，你還可以通過使用request()建構函式來建立乙個request物件，然後再作為引數傳給fetch():

fetch(myrequest).then(function(response)).then(function(myblod))headers.delete()//從headers物件中刪除指定的header。

headers.entries()//以迭代器的形式返回headers物件中的所有鍵值對。

headers.get()//從headers物件中返回指定的header的第乙個值。

headers.has()//以布林值的形式從headers物件中返回是否存在指定的header。

headers.keys()//以迭代器的形式返回headers物件中所有存在的header名。

headers.set()//替換現有的header的值，或則新增乙個未存在的header並賦值。

headers.values()//以迭代器的形式返回headers物件中所有存在的header的值。

使用headers的介面，你可以通過headers()建構函式來建立乙個你自己的headers物件。乙個headers物件是乙個簡單的多名值對：

var content = 'hello world';
var myheaders = new headers();

也可以傳乙個多維陣列或者物件字面量：

myheaders = new headers();

它的內容可以被獲取：

console.log(myheaders.has("content-type")); // true
console.log(myheaders.has("set-cookie")); // false
myheaders.set("content-type", "text/html");
console.log(myheaders.get("content-length")); // 11
console.log(myheaders.getall("x-custom-header")); // ["processthisimmediately", "anothervalue"]
myheaders.delete("x-custom-header");
console.log(myheaders.getall("x-custom-header")); // [ ]

fetch api中的body代表響應/請求的正文，允許你宣告其內容型別是什麼以及應該如何處理。

正文由request和response實現。

方法：

body.arraybuffer()//使用乙個buffer陣列來讀取response流中的資料，並將bodyused狀態改為已使用。 body.blod()//使用乙個blod物件來讀取response流中的資料，並將bodyused狀態改為已使用。 body.formdata()//使用乙個formdata物件來讀取response流中的資料，並將bodyused狀態改為已使用。 body.json()//使用乙個json物件來讀取response流中的資料，並將bodyused狀態改為已使用。

body.text()//使用乙個usvstring物件來讀取response流中的資料，並將bodyused狀態改為已使用。

Fetch學習筆記。

fetch學習筆記

fetch學習總結

學習記錄 Fetch

Fetch學習筆記。

fetch學習筆記

fetch學習總結

學習記錄 Fetch

相關推薦