@a-react-kit/fetching 中文文档教程

发布于 5年前 浏览 23 更新于 3年前

使用钩子获取数据的简单获取库。

Short example of use

import { useFetch } from '@skeletor/fetching';

const action = {
    endpoint: '/list',
    method: 'GET'
};

export const ListContainer = () => {
    const [sendRequest, isPending, source, reset] = useFetch(action);

    return <List isLoading={isPending} returned={source} fetch={()=> sendRequest()} clear={()=> reset()} />
}

queryFetch method

queryFetch 方法用于通过网络异步获取资源。 此方法可以选择接受第二个参数,一个允许您控制许多不同设置的 Action 对象。

  import { queryFetch } from '@skeletor/fetching';

  async const postData(url = '', data = {}){

    // The first parameter requires an url or direct Action object.
    // The second parameter, it's optional and receive an Action object for have a specific configuration.
    const response = await queryFetch(url, {
      method: 'POST',
    });

    return response;
  }

  postData('https://domain.com/test', { role: 'tester' })
    .then(() => {
      console.log(data);
    });

useFetch Hook

此挂钩用于获取数据,并提供控制(用于发送和重置)。

   const [sendRequest, isPending, source, reset] = useFetch(action, fieldValues)
  • action [Action] parameter provides the action with the request configuration and more.
  • fieldValues [Array] parameter shares the field values, use for fill the request payload.

returned parameters

  • [sendRequest] (function, control) sends the request to the server.
  • sendRequest is function that accepts as first parameter 'skipCache' (boolean), allows skip cache function for send the request direct to server. Example: sendRequest(false)
  • [isPending] (boolean, state) indicates whether the request is pending.
  • [source] (Response object, state) returns the Response object.
  • [reset] (function, control) restores the initial state.

Action object

具有请求配置的对象。

{
  // `endpoint` is the server URL that will be used for the request
  endpoint: '/list',
  // `method` is the request method to be used when making the request
  method: 'POST',
  // `body` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  body: { role : 'Tester' },
  // `headers` are custom headers to be sent
  headers: { 'X-Requested-With': 'XMLHttpRequest' };
  // `config` is the internal configuration previos and after to send the request
  config: {
    // `skipCache` by default value is 'false', this meaning that will save in cache the last response for every once action.
    // If is 'true' value will to send request to the endpoint every once without save the response in cache.
    skipCache: false,
    // `parameters` this map specifies the parameters that will be added to the body request. Using the same key of this map for the
    // payload request, and the value of this map defined the key element from 'fieldValues' map will be used for getting the value.
    // Only applicable when the body is not defined.
    parameters: { name : 'fieldValue1' },
    // `emitErrorForStatus` defines the response status numbers that will emit error.
    emitErrorForStatus: [500, 404]
  }
  // `responseType` indicates the type of data that the server will response with
  // options are: 'json' | 'text' | 'blob'
  responseType: 'json'
}

Response object

```js

{ // status 是状态 HTTP 响应代码 状态:200, // error 表示响应是意外的还是发现了错误 错误:错误, // errorObject 是异常处理中捕获的错误对象 错误对象:空; // payload 是来自服务器的响应数据 有效载荷:{ 列表 : [ {角色:'测试员'} ] }, // headers 是响应头 headers: { 'Content-Type' : 'application/json; 字符集=utf8' } }

Simple fetching library that use hooks to fetch data.

Short example of use

import { useFetch } from '@skeletor/fetching';

const action = {
    endpoint: '/list',
    method: 'GET'
};

export const ListContainer = () => {
    const [sendRequest, isPending, source, reset] = useFetch(action);

    return <List isLoading={isPending} returned={source} fetch={()=> sendRequest()} clear={()=> reset()} />
}

queryFetch method

queryFetch method is used for fetch resources asynchronously across the network. This method can optionally accept a second parameter, an Action object that allows you to control a number of different settings.

  import { queryFetch } from '@skeletor/fetching';

  async const postData(url = '', data = {}){

    // The first parameter requires an url or direct Action object.
    // The second parameter, it's optional and receive an Action object for have a specific configuration.
    const response = await queryFetch(url, {
      method: 'POST',
    });

    return response;
  }

  postData('https://domain.com/test', { role: 'tester' })
    .then(() => {
      console.log(data);
    });

useFetch Hook

This hook is used to fetch data, and provides the control (for send and reset).

   const [sendRequest, isPending, source, reset] = useFetch(action, fieldValues)
  • action [Action] parameter provides the action with the request configuration and more.
  • fieldValues [Array] parameter shares the field values, use for fill the request payload.

returned parameters

  • [sendRequest] (function, control) sends the request to the server.
  • sendRequest is function that accepts as first parameter 'skipCache' (boolean), allows skip cache function for send the request direct to server. Example: sendRequest(false)
  • [isPending] (boolean, state) indicates whether the request is pending.
  • [source] (Response object, state) returns the Response object.
  • [reset] (function, control) restores the initial state.

Action object

Object with the request configuration.

{
  // `endpoint` is the server URL that will be used for the request
  endpoint: '/list',
  // `method` is the request method to be used when making the request
  method: 'POST',
  // `body` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  body: { role : 'Tester' },
  // `headers` are custom headers to be sent
  headers: { 'X-Requested-With': 'XMLHttpRequest' };
  // `config` is the internal configuration previos and after to send the request
  config: {
    // `skipCache` by default value is 'false', this meaning that will save in cache the last response for every once action.
    // If is 'true' value will to send request to the endpoint every once without save the response in cache.
    skipCache: false,
    // `parameters` this map specifies the parameters that will be added to the body request. Using the same key of this map for the
    // payload request, and the value of this map defined the key element from 'fieldValues' map will be used for getting the value.
    // Only applicable when the body is not defined.
    parameters: { name : 'fieldValue1' },
    // `emitErrorForStatus` defines the response status numbers that will emit error.
    emitErrorForStatus: [500, 404]
  }
  // `responseType` indicates the type of data that the server will response with
  // options are: 'json' | 'text' | 'blob'
  responseType: 'json'
}

Response object

```js

{ // status is the status HTTP response code status: 200, // error indicates whether the response was unexpected or has catched an error error: false, // errorObject is the error object catched in exeception handling errorObject: null; // payload is the response data from server payload: { list : [ { role : 'tester' } ] }, // headers are the response headers headers: { 'Content-Type' : 'application/json; charset=utf8' } }

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文