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 条评论
登录 后参与评论

相关文章

来自专栏racaljk

关于llvm kaleidoscope: 记一次Debug血泪之路

简而言之,慎(bu)用(yong)全局变量!                                

1071
来自专栏斑斓

运用Aggregator模式实现MapReduce

《基于Actor的响应式编程》计划分为三部分,第一部分剖析响应式编程的本质思想,为大家介绍何谓响应式编程(Reactive Programming)。第二部分则...

3266
来自专栏ACM小冰成长之路

51Nod-1837-砝码称重

ACM模版 描述 ? 题解 根据题目中的样例解释,我们完全可以大胆的猜测,次数至多不超过两次,所以一共可能是 0、1、20、1、2 次,00 次很容易想就是 n...

2189
来自专栏tkokof 的技术,小趣及杂念

移动开发之浅析cocos2d-x的中文支持问题

  题记:这阵子一直在学习cocos2d-x,其跨平台的特性确实让人舒爽,引擎的框架概念也很成熟,虽然相应的第三方工具略显单薄,但也无愧是一件移动开发的利器啊,...

832
来自专栏个人分享

Flink单机版安装与wordCount

Flink为大数据处理工具,类似hadoop,spark.但它能够在大规模分布式系统中快速处理,与spark相似也是基于内存运算,并以低延迟性和高容错性主城,其...

1141
来自专栏Crossin的编程教室

【每周一坑】阿姆斯特朗数

这是一个很经典的编程练习题: 如果一个正整数等于其各个数字的立方和,则称该数为阿姆斯特朗数(亦称为自恋数、自幂数)。 如 407 = 43 + 03 + 73 ...

28611
来自专栏Java呓语

策略模式(分离算法,选择实现)

如果您是第一次阅读我的设计模式系列文章,建议先阅读设计模式开篇,希望能得到您宝贵的建议。

943
来自专栏斑斓

响应式编程的实践

作者 | 张逸 特别说明:本文包含大量代码片段,若要获得更好阅读观感,请点击文末“阅读原文”或访问我的博客。 响应式编程在前端开发以及Android开发中有颇多...

3608
来自专栏后端技术探索

php进阶

基本数据类型和数组都为真复制,即为真副本,当属性为对象时,为假复制,改变副本仍会影响原对象.解决方案:

1141
来自专栏后端之路

jsp改造之sitemesh修改tagRule

背景 上篇说了一些sitemesh的注意事项jsp改造之sitemesh注意事项 事实上我们最开始的目的很简单 其实需要把script放到页面最下 同时考虑针对...

2604

扫码关注云+社区