博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Vue.js中Promise、异步、同步、定时器

Posted on 2020-05-27 16:42  jowo  阅读(1061)  评论(0编辑  收藏  举报

 

Vue.js使用Axios或Ajax请求后台时,是异步请求,所有的请求同时执行,后面的then随机执行

要想实现同步执行可以使用await和async

在需要同步执行(即后面一个方法的参数是前一个方法的返回值),在父层方法前面加async,并且在字层方法前面加await,

然后方法中需返回Promise对象,用resolve()表示执行成功,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
async mounted() {
    this.currentTime = parseTime(
      new Date().toString(),
      '{y}-{m}-{d} {h}:{i}:{s}'
    )
    await this.getOrgs()
    await this.getQuDao()
    await this.getProductList()
    await this.queryData()
  },
 
getOrgs() {
  return newPromise((resolve,reject) => {
     ...
     resolve(true)
  }) 
}
getQuDao() {
  return newPromise((resolve,reject) => {
     ...
     resolve(true)
  }) 
}
...

 

当需要等到所有的请求都成功完成请求数据,再做其他操作时可以用到Promise.All方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
initPage() {
  const _amt = this.getData()
  ...
  Promise.all([
        _amt,_amtPie,
        _amtRepay,_repayAmtPie,
        _num,_intoPie,
        _rate,_rateBar,
        _map,_table
      ]).then(([_amt, _amtPie, _amtRepay, _repayAmtPie, _num, _intoPie, _rate,
  _rateBar, _map, _table]) => {
      ...
      })
      .catch(() => {
       ...
      })
}
getData() {
  return new Promise((resolve,reject) => {
    gethttpData({}).then(response => {
       ... 
     }).catch(err => {
       ...
      })
  }) 
}

  

定时器(1)

setTimeout只在指定时间后执行一次,代码如下:

1
2
3
4
5
6
7
8
9
10
<script> 
//定时器 异步运行 
function hello(){ 
alert("hello"); 
//使用方法名字执行方法 
var t1 = window.setTimeout(hello,1000); 
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 
window.clearTimeout(t1);//去掉定时器 
</script>  

定时器(2)

setInterval以指定时间为周期循环执行,代码如下:

1
2
3
4
5
6
//实时刷新时间单位为毫秒 
setInterval('refreshQuery()',8000);  
/* 刷新查询 */ 
function refreshQuery(){ 
   $("#mainTable").datagrid('reload',null);