Javascript - async await vs promise回调

Question

我正在进行代码更改以将.then(func {})样式代码转换为异步等待.

在我的示例中,从那时转换为异步等待,无法并行查询API并按请求完成的顺序处理它们,因为两个请求彼此独立.

这是两种语法之间的有效区别还是只是将两个函数分成两个单独的异步函数才能使它们并行运行？

升级前的示例代码:

componentDidMount() {
  this.loadLists();
}

loadLists() {
  console.log('start 1');
  api.get('/url/1').then(function(r) {
    console.log('done 1', r.body);
  });
  
  console.log('start 2');
  api.get('/url/2').then(function(r) {
    console.log('done 2', r.body);
  });
}

//OUTPUT
//start 1
//start 2
//done 1
//done 2

升级后的示例代码:

componentDidMount() {
  this.getLists();
}

async getLists() {
  console.log('start 1');
  var res = await api.get('/url/1');
  console.log('done 1', res.body);
  console.log('start 2');
  var res2 = await api.get('/url/2');
  console.log('done 2', res2.body);
}

//OUTPUT
//start 1
//done 1
//start 2
//done 2

编辑:

如果功能分为两个async loadList1(),async loadList2()

在没有await正确使用这个词的情况下调用这两个函数,这将导致两个请求同时提交(几乎)？

Answer 1

await负责等待,直到承诺得到解决.如果您希望请求并行运行,那么您可以简单地将它们和await它们放在一起:

console.log('start 1');
var res = api.get('/url/1');
console.log('start 2');
var res2 = api.get('/url/2');
console.log('done 1', (await res).body);
console.log('done 2', (await res2).body);

但是,当然,由于您res以前总是要处理,因此仍会引入一些顺序依赖res2.

如果你有更多的电话,Promise.all仍然是要走的路.请记住,async/await这只是创造和解决承诺的语法糖.

Answer 2

componentDidMount() {
  this.getLists();
}

async getLists() {     
  const data = await Promise.all([api.get('/url/1'),api.get('/url/2')]);
  console.log('1st API Response ----> ',data[0].body);
  console.log('2nd API Response ----> ',data[1].body);
}

因此,您现在的目标是并行执行.Promise.all([])那样做.现在,既然Promise.all返回了一个承诺,你可以等待它.

请不要忘记将您的功能包装在try/catch块中