這篇文章主要為大家展示了“html5中fetch方法怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5中fetch方法怎么用”這篇文章吧。

創(chuàng)新互聯(lián)堅(jiān)實(shí)的技術(shù)研發(fā)基礎(chǔ)贏得了行業(yè)內(nèi)的良好口碑，公司成立十余年來，為千余家企業(yè)提供過網(wǎng)站建設(shè)、軟件開發(fā)、搜索引擎優(yōu)化技術(shù)、互聯(lián)網(wǎng)大數(shù)據(jù)整合營銷服務(wù)，多年的技術(shù)服務(wù)成功經(jīng)驗(yàn)、眾多的客戶使我們能懂得更多，做得更好。"讓您的網(wǎng)站跑起來"是我們一直追求的目標(biāo)！

Fetch概念

fetch身為H5中的一個(gè)新對(duì)象，他的誕生，是為了取代ajax的存在而出現(xiàn)，主要目的僅僅只是為了結(jié)合ServiceWorkers，來達(dá)到以下優(yōu)化：

1. 優(yōu)化離線體驗(yàn)

2. 保持可擴(kuò)展性

當(dāng)然如果ServiceWorkers和瀏覽器端的數(shù)據(jù)庫IndexedDB配合，那么恭喜你，每一個(gè)瀏覽器都可以成為一個(gè)代理服務(wù)器一樣的存在。(然而我并不認(rèn)為這樣是好事，這樣會(huì)使得前端越來越重，走以前c/s架構(gòu)的老路)

1. 前言

既然是h6的新方法,肯定就有一些比較older的瀏覽器不支持了,對(duì)于那些不支持此方法的

瀏覽器就需要額外的添加一個(gè)polyfill:

[鏈接]: https://github.com/fis-components/whatwg-fetch

2. 用法

ferch(抓取) :

HTML:

fetch('/users.html') //這里返回的是一個(gè)Promise對(duì)象,不支持的瀏覽器需要相應(yīng)的ployfill或通過babel等轉(zhuǎn)碼器轉(zhuǎn)碼后在執(zhí)行
    .then(function(response) {
    return response.text()})
    .then(function(body) {
    document.body.innerHTML = body
})

JSON : 

fetch('/users.json')
    .then(function(response) {
    return response.json()})
    .then(function(json) {
    console.log('parsed json', json)})
    .catch(function(ex) {
    console.log('parsing failed', ex)
})

Response metadata :

fetch('/users.json').then(function(response) {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
  console.log(response.status)
  console.log(response.statusText)
})

Post form:

var form = document.querySelector('form')

fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})

Post JSON:

fetch('/users', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({  //這里是post請(qǐng)求的請(qǐng)求體
    name: 'Hubot',
    login: 'hubot',
  })
})

File upload:

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0]) //這里獲取選擇的文件內(nèi)容
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

3. 注意事項(xiàng)

(1)和ajax的不同點(diǎn):

1. fatch方法抓取數(shù)據(jù)時(shí)不會(huì)拋出錯(cuò)誤即使是404或500錯(cuò)誤,除非是網(wǎng)絡(luò)錯(cuò)誤或者請(qǐng)求過程中被打斷.但當(dāng)然有解決方法啦,下面是demonstration:

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) { //判斷響應(yīng)的狀態(tài)碼是否正常
    return response //正常返回原響應(yīng)對(duì)象
  } else {
    var error = new Error(response.statusText) //不正常則拋出一個(gè)響應(yīng)錯(cuò)誤狀態(tài)信息
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

2.一個(gè)很關(guān)鍵的問題,fetch方法不會(huì)發(fā)送cookie,這對(duì)于需要保持客戶端和服務(wù)器端常連接就很致命了,因?yàn)榉?wù)器端需要通過cookie來識(shí)別某一個(gè)session來達(dá)到保持會(huì)話狀態(tài).要想發(fā)送cookie需要修改一下信息:

fetch('/users', {
  credentials: 'same-origin'  //同域下發(fā)送cookie
})
fetch('https://segmentfault.com', {
  credentials: 'include'     //跨域下發(fā)送cookie
})

下圖是跨域訪問segment的結(jié)果

Additional

如果不出意外的話,請(qǐng)求的url和響應(yīng)的url是相同的,但是如果像redirect這種操作的話response.url可能就會(huì)不一樣.在XHR時(shí),redirect后的response.url可能就不太準(zhǔn)確了,需要設(shè)置下:response.headers['X-Request-URL'] = request.url適用于( Firefox < 32, Chrome < 37, Safari, or IE.)

以上是“html5中fetch方法怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：html5中fetch方法怎么用
標(biāo)題來源：http://www.rwnh.cn/article2/jipiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、做網(wǎng)站、建站公司、網(wǎng)站改版、定制網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)