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;