fetch簡明學習

跨網路非同步獲取資源的功能以前是使用 xmlhttprequest實現的。fetch提供了乙個更好的替代方法，可以很容易地被其他技術使用，例如 service workers。fetch還提供了單個邏輯位置來定義其他http相關概念，例如 cors和http的擴充套件

fetch 規範與 jquery.ajax() 主要有兩種方式的不同

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

2、預設情況下, fetch 不會從服務端傳送或接收任何 cookies，如果站點依賴於使用者 session，則會導致未經認證的請求（要傳送 cookies，必須設定 credentials 選項）

乙個基本的 fetch請求設定起來很簡單。這裡我們通過網路獲取乙個影象並將其插入到乙個

元素中。最簡單的用法是只提供乙個引數用來指明想fetch到的資源路徑，然後返回乙個包含響應結果的promise(乙個 response 物件)

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

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

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

var content = "
hello world";
var myheaders = new
headers();
"content-type
", "
text/plain");
"content-length
", content.length.tostring());
"x-custom-header
", "
processthisimmediately
");

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

myheaders = new
headers();

它的內容可以被獲取：

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

下面是筆者在react中對fetch的精簡版封裝

import  from
'@/components/alert/module
'import 
from
'@/components/auth/module
'const
async = () =>
if(method) )
}} fetch(url, fetchobj).then(res =>).then(json =>, 
1000
) success &&success(json.result)
//自定義錯誤
} else
if (json.code === 1
) else
if (json.code === 2
) else
if (json.code === 3
) }).
catch(() =>)
}export 
default
async

fetch簡明學習

Koltin簡明學習，解構宣告

fetch學習筆記

fetch學習總結

fetch簡明學習

Koltin簡明學習，解構宣告

fetch學習筆記

fetch學習總結

相關推薦