请求链接

描述

在加载页面阶段以及之后的交互过程中，所有需要后端接口数据的情况，都需要执行请求来完成。

请求主要是用来加载页面中的各种数据，以及发送数据到后端。

请求列表.png

展示了接口地址、用途描述、请求参数、绑定数据四个字段内容，其中操作是一个功能列表。

类似第二行的高亮显示，表示该请求链接为新建或者被修改过，还未同步接口信息到代码仓库。

点击未同步即可将此条请求链接进行版本管理，点击不同步将跳过本次信息同步，可以在下次再次修改之后再同步。

页面右上角的两个按钮分别为：【通过 pageId 搜索】、【新建】。

以页面的pageId进行搜索的话会搜索到该页面所使用的全部请求链接。

操作

请求操作.png

1. 查看

请求信息.png

可以查看请求链接的详细信息。

2. 编辑

可以编辑请求链接的信息。

3. 复制

可以对该请求进行复制，以达到快速新建并复用的目的。

4. 删除

删除该请求，并有删除前的信息确认。

5. 页面

可以查看所有使用该请求的页面。

5. mock

如果一个接口后端没有做好，想要自己模拟数据，那么可以通过系统配置中的数据模拟配置功能，新建相应的mock数据，然后就可以通过该功能配置相应的mock。

比如我们的歌单列表是通过数据模拟配置出来的，然后就可以点击mock：

请求配置mock.png

通过下拉框检索出需要mock数据，然后选择它，就能够给该接口配置出模拟数据，并在下方会自动展示数据结构。

查询

请求查询.png

在列表页使用【空格】键，唤起模糊搜索

可以通过接口地址、接口编码、用途描述以及ID进行查询，支持模糊查询。

点击空格即可唤出查询窗口，输入条件后按回车键执行查询。

可以多个条件同时输入，支持清空条件。

新建

点击右上角新增图标，即可打开新增弹窗。

新建请求.png

链接数据中最主要的有：接口地址、服务地址、请求方式，这三项是必填项。

接口地址：要请求的接口名，URL的后半部分，可以理解为接口路径，每个接口都存在于对应的服务下面
服务地址：要请求的服务地址，URL的前半部分，一个服务地址有多个接口，可以写成绝对的域名或ip的形式，也可以直接简写对应的服务名称，服务的名称可以通过基本信息配置页面来配置
请求方式：可选择是GET或者POST等

请求编码 主要用来标识一个请求，当需要手动调用请求链接的时候，可以通过传递该编码来发起请求。

一般配合trigger或者prepare使用。

也可以通过requestData.handle对象获取对应编码的接口的信息。

比如在一个按钮的点击事件中可以以如下方式调用一个接口：

this.R.trigger('cityDict').then(res=>{
  // 处理逻辑，res为接口的返回值
})

this.R.trigger('cityDict').then(res=>{
  // 处理逻辑，res为接口的返回值
})

表示触发请求编码为cityDict的请求链接，获取到城市的字典。

通过this拿到当前对象，然后就可以取到请求对象R，通过trigger方法来触发所传入的请求编码对应的请求。

this.R.prepare('dict').then(req => {
  req.request.params.code = 'city'
  req.run().then((res) => {
    // 处理逻辑，res为接口的返回值
  })
})

this.R.prepare('dict').then(req => {
  req.request.params.code = 'city'
  req.run().then((res) => {
    // 处理逻辑，res为接口的返回值
  })
})

表示调用请求编码为dict的获取字典项的请求链接，然后将参数code设置为city，最后发起请求获得返回值。

通过this.R拿到请求对象，调用prepare方法执行请求预处理，预处理完成之后返回req对象。

再通过req.request拿到当前请求，然后就可以设置它的参数。

调用req.run方法发起请求，之后就可以对返回值进行操作。

设置参数的时候，可以获取页面上面的任何变量，比如collectionData中的属性。

请求参数 需要向接口提交的参数，以JS对象形式编辑并可使用变量，可从this中取值。

不区分get、post请求等方式，全部统一使用对象编写，可以对代码部分进行友好的可视化编辑。

{
   //可获取系统用户及 collectionData 中的
   userId: this.user.id,
   code: 'foo', 
   //支持表达式
   type: this.collectionData.is_vip == 'yes' ? 1 : 0
}

{
   //可获取系统用户及 collectionData 中的
   userId: this.user.id,
   code: 'foo', 
   //支持表达式
   type: this.collectionData.is_vip == 'yes' ? 1 : 0
}

甚至可以配置 header

{
   objectId: '',
   realName: '',
   Headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
   }
}

{
   objectId: '',
   realName: '',
   Headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
   }
}

正常情况下，接口的返回值符合下面的形式：

{
   code: 20000,//表示成功
   data: [],//可以是任意值
   message: ''//如果有问题的提示消息
}

{
   code: 20000,//表示成功
   data: [],//可以是任意值
   message: ''//如果有问题的提示消息
}

如果调用外部服务接口，或者有不符合上面约定的格式，可以通过NonStandard字段来标识：

{
  //在请求参数中添加这对属性
  //可以是任意truthy的值
  NonStandard: true
}

{
  //在请求参数中添加这对属性
  //可以是任意truthy的值
  NonStandard: true
}

如果需要一段稍微复杂的逻辑处理，可以通过一个自执行函数来返回一个对象，这个对象就作为请求参数对象。

绑定数据 绑定数据，接口请求之后的返回值data，需要绑定到一个或多个变量中。

可以使用多种绑定方式，这样就能在页面变量中获取到接口返回的数据了。

所有接口返回的数据，都默认绑定到requestData对象上面。

比如下拉框的数据从requestData.fileTypeList中取值，那么当获取到接口数据的时候，就可以把返回的内容绑定到fileTypeList上面。在编辑器中直接写就行。

fileTypeList

fileTypeList

如果上面的数据需要绑定到fileTypeList及fileTypes两个变量上。则可以写一个数组：

['fileTypeList','fileTypes']

['fileTypeList','fileTypes']

由于我们不用手动初始化变量，系统会自动将接口数据绑定到变量上面。

因此在页面初始化加载当时接口没返回的时候，系统会自动给所有绑定的变量进行初始化。

所有默认绑定的数据，初始化的值都是数组，也就是说，在接口返回之前，默认变量的值为数组，如果为对象类型，那么可以通过json的形式进行指定。

{
  authInfo: {
    type: 'object',
    value: ''
  }
}

{
  authInfo: {
    type: 'object',
    value: ''
  }
}

上面这个可以理解为：初始化一个变量requestData.authInfo = {}。

当接口返回数据时，将会变成requestData.authInfo = res.data

其中type可以取string、array、object三种类型的值。非这三种类型，将被初始化为null。

value字段不是指的默认值，而是指的从返回值的哪个属性里面取值，如果为空就表示默认从返回数据的data里面取值。

如果需要深层次取值的话，支持深层选择。例如需取返回结果的 data.a.b 的值，那么可以这样写：

{
  authInfo: {
    type: 'object',
    value: 'a.b'
  }
}

{
  authInfo: {
    type: 'object',
    value: 'a.b'
  }
}

这段代码就表示requestData.authInfo = res.data.a.b这样。

如果需要把返回的data数据绑定到 requestData.a.b 这个变量上面，那么可以这样写：

{
  'a.b': {
    type: 'object',
    value: ''
  }
}

{
  'a.b': {
    type: 'object',
    value: ''
  }
}

这样就变成了requestData.a.b = res.data。

如果需要data中的多个数据绑定到多个变量中，常见的就是返回值是一个对象，这个对象里面有很多数组。

如 data.a、data.b、data.c 都是数据，对应绑定到 requestData.a、requestData.b、requestData.c 上面，那么可以简写一下：

{
  'a': 'a',
  'b': 'b',
  'c': 'c',
}

{
  'a': 'a',
  'b': 'b',
  'c': 'c',
}

触发策略 请求链接的调用时机，是否在页面初始化阶段调用或者只在页面中通过事件手动调用等。

也是以 js 对象形式配置。

{
  immediate: true,
  sync: true,
  strategy: 'separate',
  mapping: {},
  cancel() {}
}

{
  immediate: true,
  sync: true,
  strategy: 'separate',
  mapping: {},
  cancel() {}
}

immediate: true表示页面初始化时立即执行，直接发起请求，否则就只做接口的初始化，而不发送请求。

sync: true表示将请求变成同步请求，只有该请求完成之后才会继续后面的逻辑。手动触发的接口该参数无效。

strategy: 'separate'主要应用在设计页面的场景，如果设置为 separate，表示不依赖其他状态，可以单独使用，那么在配置的时候就可以直接发起请求，否则需要手动设定参数。配置该属性可方便在页面设计器中直接调用链接请求，方便页面设计可实时查看接口返回效果。

mapping：设置接口返回字段的映射，如：下拉框绑定的属性为 label、value，但是接口返回的数据对应标识为 dicName 、dicCode，那么我们就可以设置为：

{
  mapping: {
    label: 'dicName',
    value: 'dicCode'
  }
}

{
  mapping: {
    label: 'dicName',
    value: 'dicCode'
  }
}

cancel：有一种情况就是，虽然页面配置了自动触发的请求，但是当前该页面不需要发送该请求。

换句话说如果不满足某些条件就不请求接口，那么我们可以用它来取消接口的发送，值为一个函数，当返回 truthy 时，那么该请求将被过滤掉，否则正常发送请求。例如：

{
  cancel: function (){
    return this.collectionData.isDraft
  }
}

{
  cancel: function (){
    return this.collectionData.isDraft
  }
}

假如上面表示一个获取评论的接口，当还是草稿状态时，就不触发请求。

回调函数 请求完成之后的回调函数，直接写方法体即可，主要用来做接口调用完毕后的处理，当一个接口返回数据时，会执行回调函数，可以进行一个额外处理。

会先于其他处理，函调函数处理完成后，才会完成数据的绑定操作等等，可以理解成是对返回数据的拦截。

可以访问 data和 result字段，data表示返回数据的 data值，result表示接口返回的原始数据，也就是 result.data === data，可以在这里面使用runIt来执行寄连。

console.log(data);
console.log(result);
this.P.runIt('setInitData',data);
console.log(this.collectionData)

console.log(data);
console.log(result);
this.P.runIt('setInitData',data);
console.log(this.collectionData)

接口回调函数代码无需要包在 function 中。可以通过this访问页面中的任意变量。

请求链接 ​

描述 ​

操作 ​

1. 查看 ​

2. 编辑 ​

3. 复制 ​

4. 删除 ​

5. 页面 ​

5. mock ​

查询 ​

新建 ​