Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。
它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的。
前端老兵，公众号：
前端爱好者 react开发利器 之 fetch请求封装
由于以下原因，我们在判断后端返回数据时候，如果 HTTP 状态码错误，可能判断比较麻烦。
当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500
。
相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false），仅当
网络故障时或请求被阻止时，才会标记为 reject
。
那么
如何获取从 fetch() promise 返回的数据？
由于涉及到异步问题（试图以同步方式获取此异步调用的结果），所以通过 .then 回调可以解决。
function checkUserHosting(hostEmail, callback) {
fetch('http://localhost:3001/activities/')
.then((response) => {
// 注意此处
response.json().then((data) => {
console.log(data);
return data;
}).catch((err) => {
console.log(err);
const checkUserHosting = async (hostEmail, callback) => {
let hostEmailData = await fetch(`http://localhost:3001/activities`)
// 注意此处//use string literals
let hostEmailJson = await hostEmailData.json();
return hostEmailJson;
await fetch('http://localhost:3001/activities', {
method: 'POST',
headers: {
'Accept': 'application/json, */*',
'Content-Type': 'application/json;charset=UTF-8',
'cache': 'default',
'credentials': 'include', //表示请求是否携带cookie
body: JSON.stringify(data)
}).then((response) => {
response.json().then((data) => {
if (data.code === 500) errorMessage = data.msg
return data;
}).catch((err) => {
console.log(err);
}).then((data) => {
console.log('data is', data)
.catch(e => {
pcConsole.log('get postcat client download link error');
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。
专为设计的用于简单数据获取的HOC。 如果您将不传递给它的请求函数传递给它，则原始响应将返回到data道具中的最终组件。
$ yarn add with-fetch $ npm install with-fetch
这个怎么运作
该组件导出两个HOC
withFetch
displayWhileLoading
withFetch
此HOC是获取的地方。 HOC将获取，解析然后将数据传递到最终组件。
import { withFetch } from 'with-fetch'
import { compose } from 'recompose'
import fetch from 'isomorphic-fetch'
export const MyComopnent = compose (
withFetch ( props => fetch ( `ht
success: (data) => { /* do something with the data */ },
error: (err) => { /* do something when an error happens */}
import {bindActionCreators} from 'redux';
class Home extends Component{
constructor(props){
super(props)
//判断是否是浏览器
if(typeof window==="object")this.fetchData();
//fetchData固定名称，必须返回异步,且所有action需要awiat
async fetchData(){
await this.props.getDataAct();
render(){
let {data}=this.props;
fetch是一种原生 js 对 HTTP 数据请求的方式，是 XMLHttpRequest 的一种更理想的替代方案
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应，它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源
使用例子：
一般请求：
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
} from ' @kne/react-fetch '
const RenderComponent = ({ data , refresh }) => {
//当请求返回正常，可以拿到data值
React . rende
npm install --save react-fetch-component
您提供单个函数作为<Fetch>的子代，该子代将单个参数作为对象接收。 每当获取请求的状态发生更改时（例如，在发出请求之前，请求进行中时以及请求返回响应之后）都会调用该函数。
虽然可以将单个属性传递给函数（例如(fetchProps) => ... ），但通常使用对象(fetchProps) => ...来剥离打算使用的对象的属性。
销毁和使用最常见的属性loading ， error和data的示例。
< Fetch xss=removed>
{ ( { loading , error , data } ) => (
将fetchProgress方法导入您的项目
import fetchProgress from 'fetch-progress
现在在提取调用中使用fetchProgress方法，尝试在使用响应之前将其放入。 你可以
fetch(this.props.src)
.then(
fetchProgress({
// implement onProgress method
onProgress(progress) {
console.log({ progress });
// A possible progress report y
fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
在这个例子中，我们使用 .json() 方法解析响应，然后打印响应数据。
3. 错误处理。我们可以使用 .catch() 方法处理请求失败的情况。例如：
fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
在这个例子中，我们使用 .catch() 方法处理请求失败的情况，并打印错误信息。
注意：使用 Fetch API 发送请求时，需要考虑浏览器的跨域限制。如果请求的 URL 与当前页面的域名不同，可能会受到跨域限制。可以使用 CORS 或 JSONP 等技术解决跨域问题。
前端布道人:
