QuikieApps

反应 API：用法，操作，示例键

QuikieApps

什么是React API？

反应 API，即应用程序编程接口在多个软件中介之间进行交互。调用和请求的类型由API定义。它还管理如何进行这些调用或请求，要使用的数据格式，要遵循的约定等。用户可以在API的帮助下以各种方式扩展功能。它将提供扩展机制来做到这一点。 API允许用户在信息隐藏的帮助下独立于实现使用接口。

 

反应中的API是什么？

反应是React库的入口。有两个顶级API可以全局响应。如果要编写“从'react'导入React”，则需要将ES6与npm一起使用。如果您将ES5与npm结合使用，则需要编写“ var react = require（'react'）”。

 

如何在React中使用API​​？

代表性状态转移API（Restful API）是最流行的Web API类型。它使用可以执行预定义和无状态操作来访问Web资源的体系结构。 HTTP请求对于使用Web API很重要。 API中有不同类型的请求，其中一些是：

这些类型的API称为外部API，因为交互是本地环境外部的。

在反应中还有另一个API，即上下文API。它仍然是一项实验性功能，在React的16.3.0版中似乎是安全的。该API解决了一个主要问题，即支柱钻孔。当组件将间接接收道具时，React开发人员只需要检查一切是否正常。

我们将在稍后的反应中学习API的正确用法。在此之前，我们将看到一些与API相关的重要主题。

 

API的关键是什么？

API一起或单独提供数据和服务。访问API很重要，您可能需要为其购买订阅。但是仍然有许多免费的API。在软件中无限次调用API是没有用的。这是因为外部API没有无限的资源。有一些秘密的API密钥，可以监视API提供商的使用情况。

什么是HTTP API？

对于基于HTTP的API，可以通过多种方式发送API密钥。

在查询字符串中：

发布/某物？

api_key = abcdef12345 HTTP / 1.1

作为请求标头：

GET /某些HTTP / 1.1

X-API-密钥：abcdef12345

作为Cookie：

获取/ something HTTP / 1.1

Cookie：X-API-Key = abcdef12345

使用React API的操作：

资料配置

从“ normalizr”导入{schema}}；
从“ redux”导入{createStore，applyMiddleware，combineReducers}；
从'react-api-data'导入{配置，减少器};
从“ redux-thunk”导入thunk；

const authorSchema =新的schema.Entity（'作者'）;
const 文章Schema = new schema.Entity（'Article'，{
作者：authorSchema
}）;

const endpointConfig == {
getArticle：{
url: ‘http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId/:userId’,
方法：‘GET’，
responseSchema：articleSchema
}，
saveArticle：{
url: ‘http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId’,
方法：‘POST’，
afterSuccess：（{{dispatch，request，getState}}）=> {
dispatch（invalidateRequest（'getArticle'，{articleId：request.params.articleId，userId：getState（）。userId}））;
}
}
};

const store = createStore（combineReducers（{apiData：reducer}），applyMiddleware（thunk））;
store.dispatch（configure（{}，endpointConfig））;

API数据绑定

从“反应”导入反应；
从“ react-api-data”导入{{useApiData}}；

const Article =（道具）=> {
constarticle = useApiData（'getArticle'，{{id：props.articleId}}）;
返回(
<>
{article.request.networkStatus ==='成功'&&
<div>
<h1>{article.data.title}</h1>
<p>{article.data.body}</p>
</div>
}
</>
）;
}

发布数据

从“反应”中导入“反应” {{useState}}；
从“ react-api-data”导入{{useApiData}}；

const PostComment =道具=> {
const [comment，setComment] = useState（”）;
const́postComment == useApiData（'postComment'，undefined，{
autoTrigger：错误，
}）;
const {networkStatus}} = postComment.request;
const onSubmit =（）=> {
postComment.perform（{{id：props.articleId}，{{comment}}）;
};
返回(
<>
{networkStatus ==='就绪'&& (
<div>
<input
onChange = {event =>setComment（event.target.value）}
placeholder =“添加评论...”
/>
<按钮onClick = {onSubmit}>Submit</button>
</div>
）}
{networkStatus ==='正在加载'&& <div>Submitting…</div>}
{networkStatus ==='失败'&& (
<div>
出了些问题。
<按钮onClick = {onSubmit}>Try again</button>
</div>
）}
{networkStatus ==='成功'&& <div>Submitted!</div>}
</>
）;
};

从商店中删除API数据

从'react-api-data'导入{{useActions};

const LogoutComponent = props => {
const actions = useActions（）;
返回(
<>
{/ *…* /}
<button onClick={() => actions.purgeAll()}>Logout</button>
</>
）;
}

 

上载文件：

const connectApiData = withApiData（{
项目：“ getItemsInList”
}，（ownProps，state）> ({
项目：[{{listId：1}，{listId：2}，{listId：3}] }));

constItemsList ==（道具）=> {
如果（props.items.every（item =>item.request.networkStatus ===“成功”））{
返回(
<ul>
{props.items.map（item => (<li>{item.data.title}</li>))}
</ul>
）;
}
返回<p>Loading…</p>;
}

导出默认的connectApiData（ItemsList）;

 

从商店中删除API数据

从'react-api-data'导入{{useActions};

const LogoutComponent = props => {
const actions = useActions（）;
返回(
<>
{/ *…* /}
<button onClick={() => actions.purgeAll()}>Logout</button>
</>
）;
}

在请求中包含Cookie：

导出const globalConfig = {
setRequestProperties：（defaultProperties）=> ({
…默认属性，
凭据：“包括”，
}）
};

 

使用数据参数

const endpointConfig == {
getData：{
网址：`$ {BASE_URL} /：language / getData.json`，
方法：‘GET’，
defaultParams：{
语言：“ en”，
}，
}，
};

 

 

 

缓存API响应：

导出默认值{
getArticle：{
url: ‘http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId/:userId’,
方法：‘GET’，
cacheDuration：60000，// 1分钟
}，
getComments：{
url: ‘http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId’,
方法：‘GET’，
cacheDuration：0，//不缓存，请谨慎使用。最好将其设置为较低的值以防止多次同时通话。
}，
getPosts：{
url: ‘http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId’,
方法：‘GET’
//无限缓存
}，
}

 

在请求中包含Cookie：

导出const globalConfig = {
setRequestProperties：（defaultProperties）=> ({
…默认属性，
凭据：“包括”，
}）
};

 

结论：

API定义了多个软件中介之间的交互。它管理如何进行调用或请求，要使用的数据格式，要遵循的约定等。有两个响应的顶级API。最受欢迎的API类型是Restful API。 API的一些HTTP请求包括Get，Post，Patch，Delete等。这些类型的API称为外部API。 反应中还有另外一个名为Context API的API。此API最适合解决Prop钻井问题。有一些秘密的API密钥，可以监视API提供程序对API的使用情况。因此，没有无限次调用API的时间就没有意义，因为它们没有无限的资源。 HTTP API可以在查询字符串，请求标头和Cookies中找到。上面提到了一些可以借助API进行的操作。

 

 

Exit mobile version