Question

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

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

这是两种语法之间的有效区别，还是将两个函数分成两个单独的异步函数，使它们在 parallel 中运行？

升级前的示例代码：

＆＃13;

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

＆＃13;

升级后的示例代码：

＆＃13;

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

＆＃13;

编辑：

如果功能分为两部分，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块

中

Answer 3

在第一个代码中，在API调用任务完成后，只执行第一个API调用的echo "name1::1.1.1.1::ps -ax" | awk -F"::" '{print $1 $2 $3}'块中的任务，但是执行其他代码行。类似地，对于第二个API调用。

在你的第二个代码中，

then

除非作业完成，否则await API调用会阻止执行后的所有代码。

Answer 4

您可以执行以下操作：

async function getLists() {

  const [res, res2] = await Promise.all([
    api.get('url/1'),
    api.get('url/2')
  ])

}

Javascript - async await vs promise回调

4 个答案: