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

Question

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

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' } }