共计 2004 个字符,预计需要花费 6 分钟才能阅读完成。
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;
正文完