useFetch
useFetch is a React hook that supports the React 16.6 Suspense componentimplementation.
The design decisions and development process for this package are outlined inthe Medium articleReact Suspense with the Fetch API.
Install
npm install fetch-suspenseoryarn add fetch-suspense
Examples
Basic Example
import useFetch from 'fetch-suspense';
import React, { Suspense } from 'react';
// This fetching component will be delayed by Suspense until the fetch request
// resolves. The return value of useFetch will be the response of the server.
const MyFetchingComponent = () => {
const response = useFetch('/path/to/api', { method: 'POST' });
return 'The server responded with: ' + response;
};
// The App component wraps the asynchronous fetching component in Suspense.
// The fallback component (loading text) is displayed until the fetch request
// resolves.
const App = () => {
return (
<Suspense fallback="Loading...">
<MyFetchingComponent />
</Suspense>
);
};
Using a Custom Fetch API
If you don't want to rely on the global fetch API, you can create your ownuseFetch hook by importing the createUseFetch helper function.
import { createUseFetch } from 'fetch-suspense';
import myFetchApi from 'my-fetch-package';
import React, { Suspense } from 'react';
// Create a useFetch hook using one's own Fetch API.
// NOTE: useFetch hereafter refers to this constant, not the default export of
// the fetch-suspense package.
const useFetch = createUseFetch(myFetchApi);
// This fetching component will be delayed by Suspense until the fetch request
// resolves. The return value of useFetch will be the response of the server.
const MyFetchingComponent = () => {
const response = useFetch('/path/to/api', { method: 'POST' });
return 'The server responded with: ' + response;
};
// The App component wraps the asynchronous fetching component in Suspense.
// The fallback component (loading text) is displayed until the fetch request
// resolves.
const App = () => {
return (
<Suspense fallback="Loading...">
<MyFetchingComponent />
</Suspense>
);
};
Including Fetch Metadata
To include fetch metadata with your response, include an options parameterwith metadata: true.
import useFetch from 'fetch-suspense';
import React, { Suspense } from 'react';
// This fetching component will be delayed by Suspense until the fetch request
// resolves. The return value of useFetch will be the response of the server
// AS WELL AS metadata for the request.
const MyFetchingComponent = () => {
const { contentType, response } = useFetch(
'/path/to/api',
{ method: 'POST' },
{ metadata: true }, // <--
);
return `The server responded with ${contentType}: ${response}`;
};
// The App component wraps the asynchronous fetching component in Suspense.
// The fallback component (loading text) is displayed until the fetch request
// resolves.
const App = () => {
return (
<Suspense fallback="Loading...">
<MyFetchingComponent />
</Suspense>
);
};
Options
The supported options for the third, options parameter are:
lifespan?: number
Default: 0
The number of milliseconds to cache the result of the request. Each time thecomponent mounts before this many milliseconds have passed, it will return theresponse from the last time this same request was made.
If 0, the cache will be last the remainder of the browser session.
metadata?: boolean
Default: false
If true, the useFetch hook will return metadata in addition to the responsefrom the fetch request. Instead of returning just the response, an interfaceas follows will be returned:
interface UseFetchResponse {
bodyUsed: boolean;
contentType: null | string;
headers: Headers;
ok: boolean;
redirected: boolean;
// The same response from the server that would be returned if metadata were
// false. It is an Object is the server responded with JSON, and it is a
// string if the server responded with plain text.
response: Object | string;
status: number;
statusText: string;
url: string;
}
You can access these properties easily through destructuring. SeeIncluding Fetch Metadata.
Sponsor
��
If you are a fan of this project, you maybecome a sponsorvia GitHub's Sponsors Program.
-
写这篇文章之前，实在想吐槽一下 React 官方文档，很多 API 的介绍都是不明不白的，不看之前有一堆问号，看完之后问号更多了。 项目需求 最近在开发一个大数据运维的项目，需要展示大量的 echarts 图表。由于从后台调接口返回数据需要时间，然后前端对数据的处理也需要时间，这样就导致了页面加载的延迟。希望可以做一个整页的 loading ，在图表渲染完成之后展示图表内容。最近在看 ssh 大佬
-
by Valerii Tereshchenko 瓦莱里·捷列申科(Valerii Tereshchenko) 如何使用redux-thunk，redux-saga，suspense和hooks在React中加载数据 (How to load data in React with redux-thunk, redux-saga, suspense & hooks) 介绍 (Introduction)
-
项目中封装接口请求，并且解决刷新页面useFetch无返回数据问题 刷新页面useFetch无返回数据问题： 浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。但是有实时去后台获取数据这样的需求， 比如我的关注页面，在其他页面点了关注，每次进这个页面或者刷新都需要去后台重新获取数据，所
-
* useFetch 和 useLazyFetch 的区别： * 1. 在服务端渲染的时候，这两个没差别 * 2. 在客户端渲染的时候（单页），useLazyFetch 相当于请求是数据是 suspense 的 * 而 useLazyFetch 一定要全部请求完毕，才进行路由内容的显示。 (↑↑↑，这个功能本质是通过 数据获取 | Vue Router 这个实现的) * 看起来 useFetch
-
Attribute Name Type Required Default Description file string Yes n/a the file, http or ftp site to fetch assign string No n/a the template variable the output will be assigned to 属性 类型 是否必须 缺省值 描述 fil
-
执行pull，远程数据库的内容就会自动合并。但是，有时只是想确认本地数据库的内容而不想合并。这种情况下，请使用fetch。 执行fetch就可以取得远程数据库的最新历史记录。取得的提交会导入到没有名字的分支，这个分支可以从名为FETCH_HEAD的退出。 例如，在本地数据库和远程数据库的origin，如果在从B进行提交的状态下执行fetch，就会形成如下图所示的历史记录。 在这个状态下，若要把远程
-
JavaScript 可以将网络请求发送到服务器，并在需要时加载新信息。 例如，我们可以使用网络请求来： 提交订单， 加载用户信息， 从服务器接收最新的更新， ……等。 ……所有这些都没有重新加载页面！ 对于来自 JavaScript 的网络请求，有一个总称术语 “AJAX”（Asynchronous JavaScript And XML 的简称）。但是，我们不必使用 XML：这个术语诞生于很久以
-
描述 (Description) 它使用sync方法从集合中的模型中提取数据。 语法 (Syntax) collection.fetch(options) 参数 (Parameters) options - 它将success和error回调，它们都将作为参数传递。 例子 (Example) <!DOCTYPE html> <html> <head> <title>Collec
-
描述 (Description) 它通过委托模型中的sync（）方法接受来自服务器的数据。 语法 (Syntax) model.fetch(options) 参数 (Parameters) options - 它接受用于模型的参数，例如id，name等。 例子 (Example) <!DOCTYPE html> <html> <head> <title> Model Examp
-
Fetch 是 window.fetch 的 JavaScript polyfill。 全局 fetch 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest。这个 polyfill 编写的接近标准的 Fetch 规范（https://fetch.spec.whatwg.org）。 fetch 函数支持所有的 HTTP 方式： HTML： fetch('/users.ht