前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >reactjs 使用异步终级解决方案 async,await实践

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

作者头像
杭州前端工程师
发布2018-06-15 11:50:55
4840
发布2018-06-15 11:50:55
举报
文章被收录于专栏:前端大白专栏前端大白专栏

先上代码:

代码语言:javascript
复制
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的语法,便变为同步了,更多实践有待开发!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档