对如何使用 axios 正确处理 javascript 承诺有些困惑

Question

So I have two simple functions, the first function makes an api call and retrieves 100 category ids and stores them in an array. I use lodash to randomly pick 6 of these category ids. The second function is suppose to make use of these 6 unique category ids and use them in the query string for the next 6 api calls made in the second function.

 async function getCategoryIds() { const res = await axios.get('http://jservice.io//api/categories?count=100'); for (let cat of res.data) { categories.push(cat.id) } var sampleCategories = _.sampleSize(categories, 6); console.log(sampleCategories); return sampleCategories; } getCategoryIds() .then(getCategory) async function getCategory(sampleCategories) { const res1 = await axios.get(`http://jservice.io/api/category?id=${sampleCategories[0]}`); const res2 = await axios.get(`http://jservice.io/api/category?id=${sampleCategories[1]}`); const res3 = await axios.get(`http://jservice.io/api/category?id=${sampleCategories[2]}`); const res4 = await axios.get(`http://jservice.io/api/category?id=${sampleCategories[3]}`); const res5 = await axios.get(`http://jservice.io/api/category?id=${sampleCategories[4]}`); const res6 = await axios.get(`http://jservice.io/api/category?id=${sampleCategories[5]}`); } getCategory();

However, no matter how I rework it I still cannot get this error to go away:

Uncaught (in promise) TypeError: Cannot read property '0' of undefined

Could somebody steer my in the right direction?

Thank you.

Answer 1

if your backend is exactly sending response an exact array then you should

dont forget to give args when ur calling getCategory function

then edit your getCategory function

async function getCategory(sampleCategories) {
    let arr = []
    const res1 = await axios.get('any url you want')
    //repeat 6 times
    arr = [res1, res2, ...otherElems]

   return arr
}

with 'then' syntax

getCategoryIds()
    .then(response => getCategory(response))

with async await syntax

const firstResponseArr = await getCategoryIds();
const secondResponseArr = await getCategory(firstResponseArr);

Answer 2

Your Mistake

Calling getCategory(); with passing any argument. Clearly async function getCategory(sampleCategories) needs an argument - sampleCategories which you failed to pass.

Error intepretation

Uncaught (in promise) TypeError: Cannot read property '0' of undefined # sampleCategories

Call getCategory() with an argument

This has nothing to do with axios but with your careless mistake. (Don't worry, it happens to even the best of us)

Answer 3

Alright so what I was struggling with was trying to figure out how to properly utilize async/await -- this seemed to work for me:

 let categories = [] var sampleCategories = [] async function getCategoryIds() { const res = await axios.get('http://jservice.io//api/categories?count=100'); for (let cat of res.data) { categories.push(cat.id) } var sampleCategories = _.sampleSize(categories, 6); return sampleCategories; } getCategoryIds() async function getCategory() { var y = await getCategoryIds(); const res1 = await axios.get(`http://jservice.io/api/category?id=${y[0]}`); const res2 = await axios.get(`http://jservice.io/api/category?id=${y[1]}`); const res3 = await axios.get(`http://jservice.io/api/category?id=${y[2]}`); const res4 = await axios.get(`http://jservice.io/api/category?id=${y[3]}`); const res5 = await axios.get(`http://jservice.io/api/category?id=${y[4]}`); const res6 = await axios.get(`http://jservice.io/api/category?id=${y[5]}`); let arr = [res1, res2, res3, res4, res5, res6] return arr } getCategory();