該方法是一個(gè)在實(shí)驗(yàn)中的方法，但是目前來說受到的關(guān)注度很高，甚至有【傳統(tǒng) Ajax 已死，F(xiàn)etch 永生】這樣的標(biāo)題，但是目前來說世面上的瀏覽器對象fetch的支持并不理想，尤其如果在B端使用的話需導(dǎo)入大量的庫對其進(jìn)行支持，個(gè)人認(rèn)為該方法雖然相比傳統(tǒng)的Ajax方式有較大的改進(jìn)，但在目前環(huán)境可能出現(xiàn)的坑會(huì)有很多，所以目前不會(huì)在實(shí)際工作中使用，

fetch方法用于發(fā)起獲取資源的請求，它返回一個(gè)Promise，這個(gè)Promise會(huì)在請求響應(yīng)后resolve，當(dāng)遇到網(wǎng)絡(luò)錯(cuò)誤時(shí)fetch()返回的promise會(huì)被reject，由于返回的是Promise對象，所以可以直接使用異步回調(diào)

在使用fetch時(shí)需要傳入?yún)?shù)

fetch(url [,init])

url:必傳參數(shù)，該參數(shù)表示我們要發(fā)起請求的后臺(tái)接口地址 / 或者一個(gè)Request對象

init:可選參數(shù)，格式為一個(gè)對象，作為本次請求的配置對象

fetch("/api/agent/job/listPositions")
    .then(res=>{
        if(res.status>=200&&res.status<300||res.status==304) {
            console.log(res); //Response
        }else{
            console.log("出現(xiàn)一個(gè)問題，狀態(tài)碼為"+res.status)
        }
    })
    .catch(res=>{
        console.log(res);
    })

需要注意的時(shí)成功的fetch不僅需要返回的promise被resolve，還要包括返回的Response對象的ok狀態(tài)為true，但是404返回時(shí)會(huì)被判斷為請求成功，不會(huì)被作為網(wǎng)絡(luò)錯(cuò)誤處理，所以注意在接收到數(shù)據(jù)時(shí)記得判斷狀態(tài)是否為404

init參數(shù)和Request對象

使用fetch，可以在init參數(shù)中對本次請求進(jìn)行配置，init中包含希望被包括到請求中的各種自定義選項(xiàng)

• method：請求的方法，例如GET,POST

  fetch(url,{
    method:POST,
  })
  

• headers：配置請求頭

  fetch(url,{
    method:POST,
    headers: {
    'Cache-Control': 'no-cache'
    }, 
  })
  

• body：在該屬性中設(shè)置需要提交的數(shù)據(jù)信息

  var params={"city_name":"上海市","size":"10","page":"1"}
  fetch(url,{
    method:POST,
    headers: {
    'Cache-Control': 'no-cache'
    }, 
    body:JSON.stringify(params)
  })
  

• mode:可以設(shè)置cors，no-cors，same-origin

  fetch(url,{
    method:POST,
    headers: {
    'Cache-Control': 'no-cache'
    }, 
    mode:'cors'
  })
  

• credentials:omit、same-origin 或者 include

  默認(rèn)情況下，fetch不會(huì)從服務(wù)端接收或發(fā)送任何cookies，如果站點(diǎn)依賴于用戶session，則會(huì)導(dǎo)致未經(jīng)認(rèn)證的請求，這時(shí)需要我們設(shè)置credentials屬性

同樣，如果我們想要使用Request對象進(jìn)行配置，如下

var request=new Request('url',{
  method:POST,
  headers: {
    'Cache-Control': 'no-cache'
  }, 
  mode:'cors'
})

fetch(request).then(function(){});

注意，Request和fetch的簽名是一致的，這在Service Workers中很有用，但是其他情況兩者是一樣的

返回值Response

Response代表響應(yīng)，

Response提供如下方法:

• clone() 創(chuàng)建一個(gè)新的Response克隆對象
• error()返回一個(gè)新的、與網(wǎng)絡(luò)錯(cuò)誤相關(guān)的Response對象
• redirect()重定向，使用新的URL創(chuàng)建新的Response對象
• blob()返回一個(gè)promise，resolves是一個(gè)FormData對象
• json()返回一個(gè)promise，resolves是一個(gè)JSON對象
• text()返回一個(gè)promise，resolves是一個(gè)文本對象

下面我們說一些我們工作中常用的

1. 處理json

    fetch("/api/agent/job/listPositions")
               .then(res=>{
                   console.log(res.json()); //Promise 
               })
   

   通過json()方法可以得到一個(gè)Promise對象，該方法可以將原始的Response對象轉(zhuǎn)化為javascript對象格式

2. 處理text

    fetch("/api/agent/job/listPositions")
               .then(res=>{
                   console.log(res.text());
               })
   

   通過text()方法可以得到一個(gè)Promise對象，可以得到解析后的文本結(jié)果

3. 處理圖像

   var myImage = document.querySelector('img');
   
   fetch('https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=9d5f84f83312b31bd361c57be7715d1f/03087bf40ad162d91c017aa31bdfa9ec8b13cda6.jpg')
    .then(function(response) {
        var res=response.blob();
        return res;
    })
    .then(function(myBlob) {
        console.log(myBlob);
        var objectURL = URL.createObjectURL(myBlob);
        myImage.src = objectURL;
    });
   

   通過blob()方法可以得到一個(gè)Promise對象，該方法用于處理我們獲取的圖像信息

   以上只是部分個(gè)人覺的比較重要的API整理，目前來說本人并沒有在實(shí)際項(xiàng)目中使用過feath，也只是做了一些測試的DOM，前不久阿里將部分項(xiàng)目由$.ajax的方式大規(guī)模替換為feath，也許之后真的會(huì)是feath永生呢，笑