fetch初步瞭解

時間 2019-11-20

標籤 fetch 初步瞭解简体版

原文原文鏈接

前言

對於ajax請求，咱們不只可使用XMLHTTPrequest，還可使用fetchhtml

正文

promise

在使用ajax時，若是想要使得第二個ajax請求調用第一個ajax請求，就得使用在onreadystatechange中再次指定一個ajax請求，若是再想使用第三個，就得繼續判斷，這樣愈來愈多，代碼就會變得愈來愈複雜，這就被稱爲回調地獄ajax

有什麼方法能夠解決這個問題呢？就是使用promisejson

promise在ES6(ECMAScript 6.0)中被統一規範,因此新版的瀏覽器基本都是支持promise寫法的跨域

一個標準的promise的寫法是這樣的數組

new Promise(function(resolve, reject) {
    if(true) { resolve() };
    if(false) { reject() };
})

promise中有三種狀態，pending（等待中），resolve（已經完成，獲得想要的結果），reject（已經獲得，但不是想要的結果）promise

在promise中可使用then方法，來處理對應的狀態變化，來對應執行
，而且then的執行結果也會返回一個promise對象，因此能夠進行屢次then的使用瀏覽器

fetch

繼續來看fetchcookie

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

一個正常的fetch的格式是這樣的，以一個url爲參數，返回一個promise的responeseapp

可是這只是一個html響應，並非json對象，因此使用json()將其轉變爲json對象cors

fetch還能夠加上第二個參數init

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。爲了在當前域名內自動發送 cookie ，必須提供這個選項，從 Chrome 50 開始，這個屬性也能夠接受 FederatedCredential 實例或是一個 PasswordCredential 實例。
cache: 請求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式: follow (自動重定向), error (若是產生重定向將自動終止而且拋出一個錯誤), 或者 manual (手動處理重定向). 在Chrome中，Chrome 47以前的默認值是 follow，從 Chrome 47開始是 manual。
referrer: 一個 USVString 能夠是 no-referrer、client或一個 URL。默認是 client。
referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity: 包括請求的 subresource integrity 值（例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

fetch請求默認是不加cookie的，除非設置credentials，credentials默認爲omit,忽略的意思，也就是不帶cookie;還有兩個參數，same-origin，意思就是同源請求帶cookie；include,表示不管跨域仍是同源請求都會帶cookie

返回的response

status —— 整數(默認值爲200) 爲response的狀態碼.
statusText —— 字符串(默認值爲"OK"),該值與HTTP狀態碼消息對應.
ok —— 如上所示, 該屬性是來檢查response的狀態是否在200-299(包括200,299)這個範圍內.該屬性返回一個Boolean值
headers —— 包含此Response所關聯的Headers 對象.
body —— 包含響應或請求的正文

body中經常使用的方法

arrayBuffer()
使用一個buffer數組來讀取 Response流中的數據，並將bodyUsed狀態改成已使用。
blob()
使用一個Blob對象來讀取 Response流中的數據，並將bodyUsed狀態改成已使用。
formData()
使用一個 FormData 對象來讀取 Response流中的數據，並將bodyUsed狀態改成已使用。
json()
使用一個 JSON 對象來讀取 Response流中的數據，並將bodyUsed狀態改成已使用。
text()
使用一個USVString (文本) 對象來讀取 Response流中的數據，並將bodyUsed狀態改成已使用。

一個示例

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ... 
});