ES6之fetch

js原生支持，比XHR強大，易用的數據交互對象。

fetch的兩個步驟

基本使用

fetch("url").then(res=>{},err=>{});

Response(res)對象成員

• ok:是否成功
• headers:響應頭對象
• status/statusText:狀態碼/狀態文本
• redirected:是否重定向過

    fetch('../public/info.text').then(res => {
       console.log('res info is:',res);
       const {ok} = res;
       if(ok){
        console.log('request ok!')
       }else{
        console.log('request error');
       }
    },(err)=>{
        //網絡錯誤、連接失敗、無法解析對方數據
        console.log('request error');
    })

運行結果：

可以看到fetch的第一個then裏面成功的回調響應對象的一些信息，哎，仔細觀察，發現並沒有我們真正需要的數據啊，這是怎麼肥事兒？其實呢，對於fetch來說，第一個then，res回調函數中響應對象res裏面有一個json()方法，該返回返回一個promise對象，在這個對象的then回調裏面就是我們真正需要的數據了。

fetch('../public/info.json').then(res=>res.json(),err=>{
    console.log(err)
}).then(data=>{
    console.log('data is:',data)
},err1=>{
    console.log(err1)
})

res對象的幾個方法:

• json():json方式解析數據------適合：一般數據
• arrayBuffer():把數據解析成二進制數組
• blob():不解析，原始二進制數據-----適合：圖片、視頻、音頻等
• fromData():以表單方式解析數據
• text():以文本方式解析數據------適合：文本內容

比較

方法	解釋	用途
arrayBuffer	因爲高級語言(包括JS)都不擅長處理二進制數據，所以arrayBuffer是一種讓js能讀取二進制的對象，但一般情況下，處理二進制數據都是非常複雜的，所以極少使用	極少
bolb	性能較好，因爲無需任何轉換操作	圖片、視頻、音頻
json	絕大部分數據文件都以json和數組的方式傳輸	數據
text	文本數據	文本、html

async配合fetch

(async () => {
   try {
    let res = await fetch('./info.json')
    let data =await res.json()
    console.log('data is:',data);
   } catch (error) {
    console.log(error)   
   }
})()

與async配合起來，從寫法上看起來就比較簡介，並且使用try...catch...對錯誤、異常進行處理

最終的結果也是以上面輸出的一樣：

headers的操作

一般情況下，服務器端的響應頭裏面的信息，在實際開發中我們有時候也會獲取來進行某些操作，那麼使用fetch進行數據通信的適合，該怎樣去獲取響應頭的信息呢？

以上圖爲例，要獲取響應頭裏面的Content-Type：

res.headers.get('Content-Type')

這就拿到了。獲取其他響應頭裏包含的信息也是一樣，調用headers對象的get方法，通過傳入鍵，就可以獲取到對應的值。

與React結合使用

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { thisExpression } from '@babel/types';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      users:[],
      mIcon:''
    }
  }

  async componentDidMount(){
    let res = await fetch('./info.json')
    let users = await res.json();
    let res1 = await fetch('./mCat.jpg')
    let mBolb = await res1.blob();
    this.setState({
      users,
      mIcon:URL.createObjectURL(mBolb)
    })
  }

  render(){
    return(
      <div>
        <ul>
          {
            this.state.users.map((item,index)=>(
              <li key={index}>
                <div>姓名:{item.name}</div>
                <div>年齡:{item.age}</div>
                <img src={this.state.mIcon}/>
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}
export default App;