ES6之fetch

jiezi

5 年前

js 原生支持，比 XHR 强大，易用的数据交互对象。

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 () => {
   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… 对错误、异常进行处理

最终的结果也是以上面输出的一样：

一般情况下，服务器端的响应头里面的信息，在实际开发中我们有时候也会获取来进行某些操作，那么使用 fetch 进行数据通信的适合，该怎样去获取响应头的信息呢？

以上图为例，要获取响应头里面的 Content-Type：

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

这就拿到了。获取其他响应头里包含的信息也是一样，调用 headers 对象的 get 方法，通过传入键，就可以获取到对应的值。

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;

ES6之fetch

fetch 的两个步骤

基本使用

比较

async 配合 fetch

headers 的操作

与 React 结合使用