Question: convert jquery generic ajax to fetch syntax

[jeff1evesque]

I was wondering if I could get some input. I am trying to convert the following jquery ajax script:

// AJAX Process
  function ajaxCaller(callbackDone, callbackFail, args) {
    // tell jquery to set the contentType
    if (args.contentType === null) {
      args.contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
    }

    // tell jquery to process the data
    if (args.processData === null) {
      args.processData = true;
    }

    $.ajax({
      type: 'POST',
      url: args.endpoint,
      data: args.data,
      dataType: 'json',
      contentType: args.contentType,
      processData: args.processData,
      beforeSend: function() {

        // asynchronous callback
        // callbackBeforeSend();

      }
    }).done(function(data) {

      // asynchronous callback
      callbackDone(data);

    }).fail(function(jqXHR, textStatus, errorThrown) {

      // asynchronous callback
      callbackFail(textStatus, errorThrown);

    });
  }

to the following fetch equivalent :

// AJAX Process
function ajaxCaller(callbackDone, callbackFail, args) {
  // tell jquery to set the contentType
  if (args.contentType === null) {
    args.contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
  }

  // tell jquery to process the data
  if (args.processData === null) {
    args.processData = true;
  }

  // ajax logic
  fetch(args.endpoint, {
    method: 'post',
    body: args.data,
    headers: {
      'Content-Type':  args.contentType
    },
  }).then(function(response) {
    if (response.ok) {
      // asynchronous callback
      callbackDone(response);
    } else {
      // throw custom error
      var error = {
        'statusText': response.statusText,
        'status': response.status
      }
      throw error;
    }
  }).catch(function(e) {
    // asynchronous callback
    callbackFail(e.statusText, e.status);
  });
}

The latter script doesn't work yet, since the catch block properly executes, and displays corresponding error messages within the browser console.log:

This could happening since my backend endpoint, hasn't been adjusted? But, if I know my fetch syntax is correct, I can proceed debugging by creating a trivial backend endpoint, to accommodate the converted fetch script.

[jeff1evesque]

I've installed fetch via fetch.pp, which can be verified within the corresponding vagrant vm:

vagrant@vagrant-ubuntu-trusty-64:/vagrant/src/js$ npm list -g | grep fetch
└── [email protected]

[mislav]

1. What is args.data? If it's not a String, you'll have to serialize it yourself.

2. From the old code, it seems that you want callbackDone() invoked with JSON data from the response. So, you'll want to make the following change then:

        if (response.ok) {
          // asynchronous callback
   -      callbackDone(response);
   +      response.json().then((data) => callbackDone(data));
        } else {

Keep in mind that fetch does less magic things for you when compared to $.ajax. You'll have to do more manually. But it seems that you're really close.

[jeff1evesque]

I resolved my issue via jeff1evesque/machine-learning#2401. Thank you!