Question

163

Best way to call an asynchronous function within map?

rated 0 times [ 165] [ 2] / answers: 1 / hits: 133999 / 9 Years ago, fri, october 30, 2015, 12:00:00

I'm mapping over an array and for one of the return values of the new object, I need to make an asynchronous call.

var firebaseData = teachers.map(function(teacher) {

  return {

    name: teacher.title,

    description: teacher.body_html,

    image: urlToBase64(teacher.summary_html.match(/src="(.*?)"/)[1]),

    city: metafieldTeacherData[teacher.id].city,

    country: metafieldTeacherData[teacher.id].country,

    state: metafieldTeacherData[teacher.id].state,

    studioName: metafieldTeacherData[teacher.id].studioName,

    studioURL: metafieldTeacherData[teacher.id].studioURL

  }

});

The implementation of that function will look something like

function urlToBase64(url) {

  request.get(url, function (error, response, body) {

    if (!error && response.statusCode == 200) {

      return "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64');

    }

  });

}

I'm not clear what's the best approach to do this... promises? Nested callbacks? Use something in ES6 or ES7 and then transpile with Babel?

What's the current best way to implement this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elishaannac

Add To Favorites

Follow

Total Points: 28

Total Questions: 97

Total Answers: 101

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

elishaannac questions

1 Getting warning in 'eslint-plugin-react-settings' while running eslint

Fri, Mar 11, 22, 00:00, 2 Years ago

1 React-router-dom (v6) with Framer Motion (v4)

Sun, Dec 5, 21, 00:00, 3 Years ago

1 can I display custom javascript in streamlit web app

Mon, Jun 14, 21, 00:00, 3 Years ago

1 Handling state with multiple checkboxes in React Native

Mon, Jul 22, 19, 00:00, 5 Years ago

1 How to add custom row on the end of the table (b-table)

Mon, Jul 8, 19, 00:00, 5 Years ago

View All

answered 9 Years ago madalyngriseldas · Accepted Answer

One approach is Promise.all (ES6).

This answer will work in Node 4.0+. Older versions will need a Promise polyfill or library. I have also used ES6 arrow functions, which you could replace with regular functions for Node < 4.

This technique manually wraps request.get with a Promise. You could also use a library like request-promise.

function urlToBase64(url) {

  return new Promise((resolve, reject) => {

    request.get(url, function (error, response, body) {

      if (!error && response.statusCode == 200) {

        resolve(data: + response.headers[content-type] + ;base64, + new Buffer(body).toString('base64'));

      } else {

        reject(response);

      }

    });

  })

} 



// Map input data to an Array of Promises

let promises = input.map(element => {

  return urlToBase64(element.image)

    .then(base64 => {

      element.base64Data = base64;

      return element;

    })

});



// Wait for all Promises to complete

Promise.all(promises)

  .then(results => {

    // Handle results

  })

  .catch(e => {

    console.error(e);

  })