泛微Ecode调用后端接口

前言

不知道为啥，在网上几乎找不到免费的教程说清楚泛微Ecode平台如果去调用后端的接口来获取对应的接口数据，找了一上午了实在是找不到

泛微Ecode是用的React框架编写的，主要的语法逻辑是React，天知道，我连vue也只是知道简单的写个脚手架项目而已，对React从未接触过，现在要在这样的情况下去在泛微Ecode平台调用接口也只能就是说各个地方找教程

在经过不懈的寻找后，基本上都是要购买教程的，为了不花钱，干脆就是一个个试，一个个问，好在也是给我试出来了！！！！！

具体代码

上面说了已经找到了如何调用后端接口的写法，请看以下代码

const { WeaTools, WeaSlideModal} = ecCom;//ecCom 是一个包含多个工具和组件的对象，这里使用解构赋值从 ecCom 中提取 WeaTools 和 WeaSlideModal

class testComponent extends React.Component{
  constructor(props) {//constructor 是类的构造函数，在组件实例化时被调用。super(props) 调用父类;
    super(props);
     this.state = {//是组件的状态对象，用于存储组件内部的数据;主要是数据的定义
       info: {
        name: ''
      },
       jsonData: {}, //json数据
       
     }
  }
  componentDidMount() {//componentDidMount 是 React 组件的生命周期方法之一，在组件挂载到 DOM 后立即调用，通常用于执行一些初始化操作，如发起网络请求
    window.WfCustomInfoRef = this
    this.getData()
  }
  getData(){
     // 请求示例,这里的IP是指你的服务器IP地址PORT是指泛微OA服务对应的端口号
    WeaTools.callApi('http://IP:PORT/api/workflow/test/getInfo2', 'get', {//发起一个 GET 请求到指定的 API 地址
      _time: Date.now()//递一个参数 _time，其值为当前时间戳，这样做可能是为了避免请求被缓存。
    }).then((data) => {//.then((data) => {...}) 是一个 Promise 的链式调用，当 API 请求成功返回数据后，会执行这个回调函数
      // console.log(data)
      this.setState({//用于更新组件的状态，将返回的数据 data 赋值给 jsonData 状态属性。
        jsonData: data
      }, () => {//setState 方法的第二个参数是一个回调函数，在状态更新完成后执行，这里用于打印更新后的 jsonData 状态。
        
            console.log(this.state.jsonData);
          
       
      });
    })

    setTimeout(() => {
      this.setState({
        info: {
          name: 'xxx',
          id: '11',
        }
      })
    }, 12000)
  }
  render(){//render 是 React 组件必须实现的方法，用于返回组件的 JSX 结构，描述组件在页面上的显示内容
    return(
      

        添加的自定义内容2
        
      
    )
  }
  
}
ecodeSDK.setCom('${appId}','testComponent',testComponent)

PS:这里的代码是在上一篇【Ecode在流程表单中插入自定义内容】文章的Ecode代码基础上进行编辑的，具体的每个代码的作用在注释里面也写得很清楚啦，还是不清楚的话可以在评论区指出来哦

运行结果

实际的运行结果如下所示：

注意要点

1、React的生命周期，这个需要注意，否则获取的数据容易因为生命周期的原因而导致无法刷新

2、接口的调用方法也需要注意，明确你发送的是什么请求，如果是GET请求就写GET，是POST请求就写POST，否则容易报错

3、 this.setState最重要的一点，记得将获取到的数据赋值到state中

总结

以上就是Ecode平台调用后端接口的全部过程啦，下一篇就写如何在Ecode中传参以及将获取的的后端数据传输到流程表单中

敬请期待~