Skip to content

接口数据加载

可以通过自定义属性fetch加载异步数据并赋值给指定属性

类型

ts
type Fetch = string | {
  //接口地址
  action: String | ((rule: object,api: object)=>Promise<any>);
  //异步数据插入的位置,例如:'options', 'props.options'
  to?: String;
  //解析接口返回的数据,返回最终数据. 默认取 `res.data`
  parse?: String | ((body: any, rule:Rule, fapi:fApi) => any);
  //请求方式, 默认 GET
  method?: String;
  //调用接口附带数据
  data?: Object;
  //调用接口附带数据的提交方式,默认为 `formData`
  dataType?: 'json';
  //自定义 header 头信息
  headers?: Object;
  //接口请求失败回调
  onError?: (e: Error | ProgressEvent) => void;
 } | ((rule, api)=>object)
type Fetch = string | {
  //接口地址
  action: String | ((rule: object,api: object)=>Promise<any>);
  //异步数据插入的位置,例如:'options', 'props.options'
  to?: String;
  //解析接口返回的数据,返回最终数据. 默认取 `res.data`
  parse?: String | ((body: any, rule:Rule, fapi:fApi) => any);
  //请求方式, 默认 GET
  method?: String;
  //调用接口附带数据
  data?: Object;
  //调用接口附带数据的提交方式,默认为 `formData`
  dataType?: 'json';
  //自定义 header 头信息
  headers?: Object;
  //接口请求失败回调
  onError?: (e: Error | ProgressEvent) => void;
 } | ((rule, api)=>object)

注意

  1. fetch 为字符串时,数据会默认赋值给rule.options
  2. 可以配置表单配置的options.beforeFetch方法在请求前处理规则,例如设置token

示例

通过接口加载数据

通过自定义方法加载数据

重写内置的请求方法

通过重写 formCreate.fetch方法即可修改内部用于请求的方法,例如:

js
formCreate.fetch = (options) => {
    fetch(options.action, {
        headers: options.headers,
        method: options.method,
    }).then(res=>{
        res.json(data=>{
            options.onSuccess(data);
        })
    }).catch(e=>{
        options.onError(e);
    })
}
formCreate.fetch = (options) => {
    fetch(options.action, {
        headers: options.headers,
        method: options.method,
    }).then(res=>{
        res.json(data=>{
            options.onSuccess(data);
        })
    }).catch(e=>{
        options.onError(e);
    })
}

Released under the MIT License.