Is there a way to rewrite the Promise and ajax call to fetch?

Question

I want to rewrite following code from a Promise and ajax call to a fetch call in reactjs.

const self = {

  fetchPreAuthnConfig: (data) => {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: preAuthnEndpoint,
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(data),
        success: ({ configurations }) => {
          resolve(configurations);
        },
        error: (error) => {
          reject(error);
        },
      });
    });
  },
};

export default self;

So how I thought fetch would work was by replacing the ajax call to fetch. Something like this:

const self = {

  fetchPreAuthnConfig: (data) => {
    return new Promise((resolve, reject) => {
      fetch(preAuthnEndpoint, {
        method: 'post',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(data),
      }).then(configurations => {
          return configurations;
      })
        .catch(error => {
           throw error;
        });  
    });
  },
};

But that was not the case. I did go through the fetch api syntax but it was not clear enough on how to preserve the const self part. Quite new to react programming hence I don't really know the workaround.

This never needed the promise constructor. `return $.ajax()` was enough - the jQuerry deferred is a proper promise-like. If an actual promise is needed (however unlikely that is, then `return $.ajax().promise()` — VLAZ, Jun 06 '22 at 10:11
Welcome to Stack Overflow! Please take the [tour] if you haven't already (you get a badge!) and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Yes, you can rewrite this using `fetch`. Your best bet here is to do your research, [search](/help/searching) for related topics on SO and elsewhere, and give it a go. ***If*** you get stuck and can't get unstuck after doing more research and searching, post a [mre] showing your attempt and say specifically where you're stuck. People will be glad to help. — T.J. Crowder, Jun 06 '22 at 10:23
Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! (In both cases, actually) — Bergi, Jun 07 '22 at 18:24

score 1 · Accepted Answer · answered Jun 07 '22 at 17:28

So the refactored code I wrote is written as follows: It works but not as intended. The self that was exported is not showing the thing it needs to show.

const self = {

  fetchPreAuthnConfig: async (data) => {
    try {
      console.log(data);
      const response = await fetch(preAuthnEndpoint, {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
      console.log('Response:', response);
      const configurations = response.json();
      console.log('Success', configurations);
      return configurations;
    } catch (error) {
      console.error('Error', error);
    }
  },
};
export default self;

Is there a way to rewrite the Promise and ajax call to fetch?

1 Answers1