reactjs 使用异步终级解决方案 async,await实践

先上代码:

async componentDidMount() {
  let t = this;
  console.log(this.props.location);
  t.tree.getPandectView({}, t.state.page, this.state.pageSize);
  await t.getProjectId();
  let searchParams = {
    order: 'asc',
    projectId: t.props.location.query.projectId || this.state.projectId,
    sort: 'contractType',
    contractClass:this.state.contractClass
  };
  t.table.getBaseContracts(searchParams, t.state.page, this.state.pageSize)
}

getProjectId = async function(){
  let t = this;
  await request({url:'/contractBase/pandectView',params:{page:t.state.page, rows:this.state.pageSize}})
    .then(res=>{
      console.log(res);
      this.setState({
        projectId:2312
      })
    })
};

首先在组件的生命周期里定义async componentDidMount 这样,便可以在这个函数内使用await了,使用await的意思是:等t.getProjectId()这个函数执行完毕后,再继续往下执行.

在getProjectId 的函数中也同样运用了async 与await 只是请求完成的时候再继续往下执行,这样,原本是异步的函数操作通过es7的语法,便变为同步了,更多实践有待开发!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

502
来自专栏WebDeveloper

实现HTML元素垂直居中的六种方法

602
来自专栏IMWeb前端团队

Android 浏览器文本垂直居中问题

问题描述 在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 lin...

3296
来自专栏前端萌媛的成长之路

css清浮动

1004
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(一)

在我们的开发生活中,相信很多人都会遇到形形色色的项目需求,比如更改浏览器的默认样式,在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式,或者当你...

2955
来自专栏编程心路

Bootstrap学习文档(一)

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,使用这个框架可以简单高效的开发出适配各种屏...

1522
来自专栏前端知识分享

第148天:js+rem动态计算font-size的大小,适配各种手机设备

布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。

613
来自专栏超然的博客

Float 的那些事

  display:inline-block某种意义上的作用就是包裹(wrap),而浮动也有类似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度...

783
来自专栏木子昭的博客

块元素, 内联元素, 内联块元素块元素(默认为父级宽度的100%,支持全部样式):内联元素(不支持宽高, 不支持margin上下, 不支持padding上下)内联块元素(从其它元素转换而来, disp

块元素(默认为父级宽度的100%,支持全部样式): body h1 , h2, h3, h4, h5, h6 p div li (条目) ul(定义无序列表, ...

3486
来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

624

扫码关注云+社区