Having some confusion around how to properly handle javascript promises with axios

Admin 1
Viewed 91

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.

axios javascript
3 Answers

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

dont forget to give args when u r 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);
user_120898020

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)

user_93999780

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

Admin1
Related