持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25 天，点击查看活动详情
Fetch
文档
说明
- fetch：原生函数，不再使用
XmlHttpRequest对象提交ajax请求 - 老版本浏览器可能不支持
相关API
借用之前文章《每天学点React - React Ajax基础使用方式（二）》中的案例，我们来演示下fetch的基本使用。
1. GET请求
将原先getData1中的axios请求注释掉，改成fetch的方式来请求接口，具体代码如下：
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
getData1 = () => {
// axios.get('http://localhost:3000/api1/data')
// .then(
// response => { console.log(response.data) },
// error => { console.log(error) }
// )
// 改用 fetch 发送请求
fetch(`http://localhost:3000/api1/data`).then(
response => { console.log('请求成功！', response) },
error => { console.log('请求失败', error) }
)
}
getData2 = () => {
axios.get('http://localhost:3000/api2/getData')
.then(
response => { console.log(response.data) },
error => { console.log(error) }
)
}
render() {
return (
<div>
<button onClick={this.getData1}>获取数据1</button>
<button onClick={this.getData2}>获取数据2</button>
</div>
)
}
}
让我们发个请求来看看这样的方式能不能请求成功。
请求正常发出去了，但是得到的响应内容却不是直接的请求结果，而是描述了请求服务器成功与否的一些相关信息，我们想要的数据并没有直接交到我们手上。
那么我们来试试看请求失败的结果是什么样的，随便改成一个没有的接口路径，再来试试看效果。
怎么回事，怎么错误的接口地址也请求成功了？？？但是响应的参数状态为404,ok为false。
经过一番的冥思苦想，终于掘金到了，原来该响应是指的联系服务器是否成功，真正的结果它藏在了 response.json()里面了，我们将它在控制台打印出来看一下吧。
getData1 = () => {
// 改用 fetch 发送请求
fetch(`http://localhost:3000/api1/data`).then(
response => {
console.log(response)
return response.json()
},
error => { console.log('联系服务器失败', error) }
).then(
response => { console.log('请求成功', response)},
error => { console.log('请求失败', error) }
)
}
终于拿到响应的真正结果了，原来被它隐藏到了json()函数中了。
但是上面的请求感觉代码量还是有点多，我们把它优化一下吧：
getData1 = async () => {
try {
const response = await fetch(`http://localhost:3000/api1/data`)
const data = await response.json()
console.log(data)
} catch (error) {
console.log('请求失败', error)
}
}
可以看到，这样的写法也可以正常的获取到响应。
