Javascript 使用async/await组合并发和顺序请求

使用

async

/

await

，我试图尽快执行三个请求

getIndependentThingOne

和

getIndependentThingTwo

返回数据，而不向其端点提交任何参数<但是，code>getDependentThing需要由

getIndendentThingThough

返回的列表的第一个元素的

id

属性。我已经试着在原则上遵循中概述的内容。至少在精神上

const getIndependentThingOne = async () => {
  const url = `${root}/1`
  return axios.get(url)
}

const getIndependentThingTwo = async () => {
  const url = `${root}/2`
  return axios.get(url)
}

const getDependentThing = async ([{ id }]) => {
  const url = `${root}/3/${id}`
  return axios.get(url)
}

const getIndependentThingOneAndDependentThing = async () => {
  const { data: listFromIndependentThingTwo } = await getIndependentThingTwo()
  const { data: listFromDependentThing } = await getDependentThing(
    listFromIndependentThingTwo
  )
  return {
    listFromIndependentThingTwo,
    listFromDependentThing
  }
}

const getAllData = async () => {
  const [
    { data: listFromIndependentThingOne },
    { listFromIndependentThingTwo, listFromDependentThing }
  ] = await Promise.all([
    getIndependentThingOne(),
    getIndependentThingOneAndDependentThing()
  ])
  console.log('DONE')
  console.log({ listFromIndependentThingOne })
  console.log({ listFromIndependentThingTwo })
  console.log({ listFromDependentThing })
}

getAllData()

虽然这样做有效，但我想知道这是否是构造这些请求的最佳方式。返回最后两个值的对象并在这里对其进行分解似乎有点不合适

const [
  { data: listFromIndependentThingOne },
  { listFromIndependentThingTwo, listFromDependentThing }
]

使用

async

/

await

执行此类操作是否有一种更为惯用的模式？依赖的东西可能只是它所依赖的东西的承诺：

const getDependentThing = async (dependentThingTwo) => {
  const { data: listFromIndependentThingTwo } = await dependentThingTwo;
 return getDependentThing(
  listFromIndependentThingTwo
 );
}

这样，您可以得到如下结果：

const dependentThing = independentThingTwo();
const [listFromTwo, dependentThing] = await Promise.all([dependentThing, getDependendThing(dependentThing)]);

---

我不会编写额外的

getindependentthingoneanddependenttthing

函数，尤其是不使用

async

/

wait

。我宁愿选择简单的

语法，然后选择更简单的
语法，并在
getAllData
中执行所有操作：

const getIndependentThingOne = () => axios.get(`${root}/1`);
const getIndependentThingTwo = () => axios.get(`${root}/2`);
const getDependentThing = ([{id}]) => axios.get(`${root}/3/${id}`);

const getData = ({data}) => data;

async function getAllData() {
  const promiseOne = getIndependentThingOne().then(getData);
  const promiseTwo = getIndependentThingTwo().then(getData);
  const promiseThree = promiseTwo.then(getDependentThing).then(getData);
//                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  const [listFromThingOne, listFromThingTwo, listFromThingThree] = await Promise.all([
    promiseOne,
    promiseTwo,
    promiseThree,
  ]);
  console.log('DONE')
  console.log({ listFromThingOne })
  console.log({ listFromThingTwo })
  console.log({ listFromThingThree })
}

getAllData()

（无论
.then（getData）
是否应该在
getThing
函数中移动，比如
async（）=>（wait-axios.get（…）.data
，取决于首选项）
aysnc/wait
的基本示例：


console.log（'person1:shoe-ticket'）；
控制台日志（“人员2：鞋票”）；
const preMovie=async（）=>{
const promiseGirlfriendBringtickets=新承诺（（解决，拒绝）=>{
设置超时（（）=>{
决议（“票证”）；
}, 3000);
});
const addButter=新承诺（（解决、拒绝）=>{
决议（“黄油”）；
});
const getPopcorn=新承诺（（解决、拒绝）=>{
解决（“爆米花”）；
});
let ticket=等待承诺的女朋友打电话；
log（`friends:i有${ticket}`）；
log（'男朋友：我们应该进去'）；
log（“女朋友：不，我饿了”）；
让爆米花=等待爆米花；
log（`男友：我得到了一些${popcorn}`）；
log（'男朋友：我们应该进去'）；
log（“女朋友：我的爆米花上需要黄油”）；
让黄油=等待添加黄油；
log（`男友：我在爆米花上得到了一些${butter}'）；
console.log（‘男朋友：还有别的事吗？’）；
log（“女朋友：走吧，我们要迟到了”）；
回程票；
}
然后（（m）=>console.log（`person3:shoes${m}`）；
控制台日志（“人员4：鞋票”）；
控制台日志（“人员5：鞋票”）基本模式是：

async function getStuff() {
  // Kick off thing one request, don't wait!
  const thingOnePromise = getIndependentThingOne();

  // Kick off things two request, don't wait quite yet.
  const [{id}] await getIndependentThingTwo();

  await dependentThingThree(id);
  await thingOnePromise;
}

换句话说，您启动第一个请求，而不等待它。在函数完成之前，您可以在必要时等待它。
是否等待？不是异步的。如果函数中没有await关键字，则根本不需要将其标记为async。@mpm可以更具体一点吗？@1252748非常明确，前3个函数不需要将其标记为async，因为它们的主体中都没有使用关键字await。他们只是回报承诺。。。。但是将它们标记为async并不会增加任何开销，但是它会让更多的读者意识到它们是
异步的
，所以我认为norhigs错了that@mpm是的，你完全正确，axios无论如何都会做出承诺。我想是在我玩其他东西的时候留下的。谢谢你的提醒。我对最后一段有点困惑。有打字错误吗？另外，
const dependedThing=independentThingTwo
似乎有点违反直觉，对吗？实际上，您介意添加一些注释来解释每个步骤吗？恐怕我没有完全听懂。干杯。@1252748是的，可能有点困惑，基本上和贝基一样