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);

但是当然这仍然会引入一些顺序依赖，因为你总是要在res2之前处理res 。

如果你有更多的电话， Promise.all仍然是要走的路。 请记住， async/await只是用于创建和解决promise的语法糖。

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([]) 。 现在，由于Promise.all返回一个承诺，你可以等待它。

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

Answer 3

在第一个代码中，在API调用任务完成后，只执行第一个API调用的then块中的任务，但是执行其他代码行。 类似地，对于第二个API调用。

在你的第二个代码中，

var res = await api.get('/url/1');

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

Answer 4

您可以执行以下操作：

async function getLists() {

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

}