国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Fetch()

lakeside / 506人閱讀

摘要：常見的坑接收到表示錯誤的狀態(tài)碼時，返回的不會被標(biāo)記為即使?fàn)顟B(tài)碼為或。會將狀態(tài)標(biāo)記為但返回值但屬性設(shè)置為。網(wǎng)絡(luò)故障或請求被阻止才會標(biāo)記為。原始請求請求使用箭頭函數(shù)獲取一個文件，并打印到控制臺。參數(shù)接受第二個可選參數(shù)，控制不同配置的參數(shù)。

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

fetch常見的坑：

接收到表示錯誤的HTTP狀態(tài)碼時，fetch()返回的Promise不會被標(biāo)記為reject（即使?fàn)顟B(tài)碼為404或500）。fetch()會將Promise狀態(tài)標(biāo)記為resolve（但resolve返回值但OK 屬性設(shè)置為 false）。網(wǎng)絡(luò)故障或請求被阻止才會標(biāo)記為reject。

fetch()不會從服務(wù)端發(fā)送或接收任何cookies。發(fā)送cookies 需要設(shè)置 fetch(url, {credentials: "include"}) 選項(xiàng)。

原始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");
});

使用箭頭函數(shù)：

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

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

fetch參數(shù)

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

// 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
}
包含憑據(jù)的請求

包含憑據(jù)的請求：

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

若在同源櫥發(fā)送憑據(jù)：

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

確保瀏覽器不在請求中包含憑據(jù)：

fetch("https://example.com", {
  credentials: "omit"  
})
上傳JSON數(shù)據(jù) 
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構(gòu)造函數(shù)創(chuàng)建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");

內(nèi)容可被獲取：

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
總結(jié)一下，F(xiàn)etch 優(yōu)點(diǎn)主要有：

語法簡潔，更加語義化

基于標(biāo)準(zhǔn) Promise 實(shí)現(xiàn)，支持 async/await

同構(gòu)方便，使用 isomorphic-fetch

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108779.html

相關(guān)文章

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

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

    pubdreamcc 評論0 收藏0

  • 傳統(tǒng) Ajax 已死，Fetch 永生

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

    fai1017 評論0 收藏0

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

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

    pkwenda 評論0 收藏0

  • 對python并發(fā)編程的思考

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

    sshe 評論0 收藏0

  • fetch，終于認(rèn)識你

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

    wzyplus 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<