Fetch()

lakeside 發布于2019-08-26 13:25 / 524人閱讀

摘要：常見的坑接收到表示錯誤的狀態碼時，返回的不會被標記為即使狀態碼為或。會將狀態標記為但返回值但屬性設置為。網絡故障或請求被阻止才會標記為。原始請求請求使用箭頭函數獲取一個文件，并打印到控制臺。參數接受第二個可選參數，控制不同配置的參數。

Fetch()提供了一種方式進行跨網絡異步請求資源的方式，用于訪問和操作HTTP管道的部分，比如：請求和相應。

fetch常見的坑：

接收到表示錯誤的HTTP狀態碼時，fetch()返回的Promise不會被標記為reject（即使狀態碼為404或500）。fetch()會將Promise狀態標記為resolve（但resolve返回值但OK 屬性設置為 false）。網絡故障或請求被阻止才會標記為reject。

fetch()不會從服務端發送或接收任何cookies。發送cookies 需要設置 fetch(url, {credentials: "include"}) 選項。

原始XHR請求

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

fetch請求

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用箭頭函數：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

獲取一個JSON文件，并打印到控制臺。指明資源路徑，然后返回一個Response對象，使用json()方法獲取JSON但內容。

fetch參數

fetch()接受第二個可選參數，控制不同配置的init參數。

// Example POST method implementation:

postData("http://example.com/answer", {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match "Content-Type" header
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, same-origin, *omit
    headers: {
      "user-agent": "Mozilla/4.0 MDN Example",
      "content-type": "application/json"
    },
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, cors, *same-origin
    redirect: "follow", // manual, *follow, error
    referrer: "no-referrer", // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

包含憑據的請求

包含憑據的請求：

fetch("https://example.com", {
    //將credentials: "include"添加到傳遞給fetch()方法的init對象
    credentials: "include" 
})

若在同源櫥發送憑據：

fetch("https://example.com", {
  credentials: "same-origin"  
})

確保瀏覽器不在請求中包含憑據：

fetch("https://example.com", {
  credentials: "omit"  
})

上傳JSON數據

var url = "https://example.com/profile";
var data = {username: "example"};

fetch(url, {
  method: "POST", // or "PUT"
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    "Content-Type": "application/json"
  })
}).then(res => res.json())
.catch(error => console.error("Error:", error))
.then(response => console.log("Success:", response));

上傳文件

使用、FormData() 和 fetch()

Headers

使用Headers構造函數創建headers對象，headers對象為多鍵值對：

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

內容可被獲取：

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false

總結一下，Fetch 優點主要有：

語法簡潔，更加語義化

基于標準 Promise 實現，支持 async/await

同構方便，使用 isomorphic-fetch

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108779.html

fetch使用的常見問題及其解決辦法

首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考MDN fetch教程。引言說道fetch就不得不提XMLHttpRequest了，XHR在發送web請求時需要開發者配置相關請求信息和成功后的回調，盡管開發者只關心請求成功后的業務處理，但是也要配置其他繁瑣內容，導致配置和調用比較混亂，也不符合關注分離的原則；fetch的出現正是為了解決XHR存在的這些問題。例如下面代碼： f...

pubdreamcc 2019-08-20 14:34 評論0 收藏0
傳統 Ajax 已死，Fetch 永生

摘要：結果證明，對于以上瀏覽器，在生產環境使用是可行的。后面可以跟對象，表示等待才會繼續向下執行，如果被或拋出異常則會被外面的捕獲。，，都是現在和未來解決異步的標準做法，可以完美搭配使用。這也是使用標準一大好處。只允許外部傳入成功或失敗后的回調。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...

fai1017 2019-08-21 10:41 評論0 收藏0
fetch使用的常見問題及其解決辦法

摘要：首先聲明一下，本文不是要講解的具體用法，不清楚的可以參考教程。該模式用于跨域請求但是服務器不帶響應頭，也就是服務端不支持這也是的特殊跨域請求方式其對應的為。首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考 MDN fetch教程。 fetch默認不攜帶cookie 配置其 credentials 項，其有3個值： omit: 默認值，忽略cookie的發送 sam...

pkwenda 2019-08-23 17:52 評論0 收藏0
對python并發編程的思考

摘要：我們以請求網絡服務為例，來實際測試一下加入多線程之后的效果。所以，執行密集型操作時，多線程是有用的，對于密集型操作，則每次只能使用一個線程。說到這里，對于密集型，可以使用多線程或者多進程來提高效率。為了提高系統密集型運算的效率，我們常常會使用到多個進程或者是多個線程，python中的Threading包實現了線程，multiprocessing 包則實現了多進程。而在3.2版本的py...

sshe 2019-07-30 15:24 評論0 收藏0
fetch，終于認識你

摘要：說明一點，下面演示的請求或請求，都是采用百度中查詢到的一些接口，可能傳遞的有些參數這個接口并不會解析，但不會影響這個接口的使用。 fetch和XMLHttpRequest 如果看網上的fetch教程，會首先對比XMLHttpRequest和fetch的優劣，然后引出一堆看了很快會忘記的內容(本人記性不好)。因此，我寫一篇關于fetch的文章，為了自己看著方便，畢竟工作中用到的也就是一些...

wzyplus 2019-08-21 16:51 評論0 收藏0