Using Promise on map Function

Question

I have an array and i want to use promises on this array :

let check_duplicate_phone  = store.state.lines.map(function (item) {
    return core.checkIsPhoneDuplicate(item.phone , item.phone_significant);
});

let res  = await Promise.all(check_duplicate_phone).then(function(values) {
    console.log(values);
});

And this the checkIsPhoneDuplicate function :

async checkIsPhoneDuplicate(phone , phone_significant) {
    var data = {
        'phone': phone ,
        'phone_significant' : phone_significant
    }
    let res = await Axios.post(checkPhoneDuplicate_route, data)
        .then(response => {                    
            return response.data;
        }).catch(error => console.log(error));
    return res;
}

But its not waiting for the response and just run the next step. I know its supposed to used to like this and i already read this answer But i didn't findout where is my mistake.

thanks.

Some thing that won't work is `res` always being `undefined`, as that's the return value of the `then` callback that is logging the `values`. You better write `const values = await Promise.all(check_duplicate_phone); console.log(values);` — Bergi, Nov 01 '19 at 19:17

Anthony · Accepted Answer · 2019-11-01T19:15:00.710

1

EDIT: Removed incorrect explanation, as pointed out in the comments. This approach does work, but doesn't address what was asked by OP. Per the comments, OPs code should also work as this code does, so something may have been left out.

function checkIsPhoneDuplicate(phone, phone_significant) {
  var data = {
    phone: phone,
    phone_significant: phone_significant
  };

  return Axios.post(checkPhoneDuplicate_route, data)
    .then(response => response.data)
    .catch(error => console.log(error));
}

async function runCheck() {
  let check_duplicate_phone = store.state.lines.map(function(item) {
    return core.checkIsPhoneDuplicate(item.phone, item.phone_significant);
  });

  let res = await Promise.all(check_duplicate_phone).then(function(values) {
    console.log(values);
  });
}

edited Nov 01 '19 at 19:15

answered Nov 01 '19 at 16:59

Anthony

6,422
2
17
34

1

It's async.. it makes what you return a promise. – Adam LeBlanc Nov 01 '19 at 17:03
Try to not use Promise.all (optimization issues). Use: `$.when(promise1()).then((result1) => $.when(promise2().then((result2) => { ... });` – tcconstantin Nov 01 '19 at 18:23
This answer may work, but the explanation is wrong and it is not at all correct about what is wrong with the original code. – jfriend00 Nov 01 '19 at 18:51
@jfriend00 can you share what is the actual explanation in OPs code in a new answer? – Anthony Nov 01 '19 at 18:55
1

There is nothing wrong with the OP's code as shown. Their code should work just as well as your code should. You slightly simplified by returning the promise directly, but either should work. Your answer offers no explanation for why their code didn't work. I think there's likely something else that the OP didn't disclose to us in their code that is the source of the real problem. – jfriend00 Nov 01 '19 at 19:00
FYI, `return res;` inside an async function will just make that the resolved value of the promise that the `async` function already returns. It's exactly the same end result as `return Axios.post().then()` in your answer. Yours is simpler, but does not generate a different result. – jfriend00 Nov 01 '19 at 19:01

score 1 · Answer 2 · answered Nov 01 '19 at 17:04

I'm not 100% sure exactly what your specific issue is, but let me help you clean this up.

async function someFunc() {
  // Obviously this has to be inside of an async function if using await, so let's add it for clarity

  let check_duplicate_phone = store.state.lines.map(function(item) {
    return core.checkIsPhoneDuplicate(item.phone, item.phone_significant);
  });
  /*
    So with this code, you won't get anything in res. You're awaiting the reuslt of
    the promise, which is great, but the .then is going to be called first, 
    and you return nothing from it, so therefore, you won't get anything back
  */
  //let res = await Promise.all(check_duplicate_phone).then(function(values) {
    //console.log(values);
  //});
  
  // try this
  
  let resolvedValues = await Promise.all(check_duplicate_phone); // Values in here
  
  console.log(resolvedValues); // Or however you want to log them.

}




async function checkIsPhoneDuplicate(phone, phone_significant) {
  var data = {
    'phone': phone,
    'phone_significant': phone_significant
  }
  /*
    Again, here you are mixing async/await and .then, which is okay, but
    Let's take full advantage of async/await to clean it up
  */
  /*let res = await Axios.post(checkPhoneDuplicate_route, data)
    .then(response => {
      return response.data;
    }).catch(error => console.log(error));*/
    try {
      let res = await Axious.post(checkPhoneDuplicate_route, data);
      return res.data;
    } catch (e) {
      console.log(e);
    }
}

Hopefully this helps a bit. I think this will work for you or at the very least set you on the right path with the code being a bit cleaner.

Using Promise on map Function

2 Answers2