JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

JavaScript

var query1base = 'https://www.googleapis.com/books/v1/volumes?showPreorders=true&maxResults=4&q=';
var queryUrls = [
	query1base + encodeURIComponent('I Am legend + Richard Matheson'),
	query1base + encodeURIComponent('We are bob + Dennis E. Taylor')
];

ajaxios({
  request: queryUrls,
  step: function( response ) {
  	
    var firstItem = response.data.items[0];
    var id = firstItem.id;
    var firstCategory = firstItem.volumeInfo.categories[0];
		response.data = firstCategory;
    
    return axios.get('https://www.googleapis.com/books/v1/volumes/' + id ).then(function (response) {
	    var item = response.data.volumeInfo;
      var title = item.title;
      return '('+ id +') ' + title;
    });
    
  },
  done: function( responses ) {
		
    var data = _.map( responses, 'data' );
    console.log( 'the end' );
    console.log( responses );
		console.log( data );

  }
});

function ajaxios( options ) {

  options.request;
  options.step;
  options.done;

  axios.all(
    options.request.map( function( url, index, array ) {
      return axios.request( url ).then(function( response ) {
        if ( response ) response = options.step( response, index, array );
        return response;
      }).catch(function( e ) {
        if ( e.response ) e.response = options.step( e.response, index, array );
        return e.response;
      });
    })
  ).then(
    axios.spread( function( ...response ) {
      options.done( response );
    })
  );

};