so I'm learning about async-await in javascript and when I try to do this callback hell ( I know it is not the best practice but I have to learn It ) the second time I call the function it keeps calling itself ( infinity loop ) u can run the code to understand more cuz nothing looks wrong to me I spend the last 2 days trying to understand the problem but I end up here

code :

const xhr = new XMLHttpRequest();
const url = new URL("https://www.breakingbadapi.com/api/quotes");

const moveiData = (link, callBack) => {
  xhr.addEventListener("readystatechange", () => {
    if (xhr.readyState === 4 && xhr.status == 200) {
    } else if (xhr.readyState === 4) {
      callBack("could not fetch data");
    }
  });

  xhr.open("GET", link);

  xhr.send();
};

moveiData(url, (response) => {
  console.log(response);

  moveiData(url, (response) => {
    console.log(response);
  });
});

CodePudding user response：

You have three options in that issue.

1- You have added a new event listener and you should remove it when you take response.

const xhr = new XMLHttpRequest();
const url = new URL("https://www.breakingbadapi.com/api/quotes");

const moveiData = (link, callBack) => {
  const handler = () => {
    if (xhr.readyState === 4 && xhr.status == 200) {
      xhr.removeEventListener("readystatechange", handler);     
      callBack(JSON.parse(xhr.response));
    } else if (xhr.readyState === 4) {
      callBack("could not fetch data");
    }
  };

  const a = xhr.addEventListener("readystatechange", handler);

  xhr.open("GET", link);

  xhr.send();
};

moveiData(url, (response) => {
  console.log(response);

  moveiData(url, (response) => {
    console.log(response);
  });
});

2- Use onreadystatechange callback.

const xhr = new XMLHttpRequest();
const url = new URL("https://www.breakingbadapi.com/api/quotes");

const moveiData = (link, callBack) => {
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status == 200) {   
      callBack(JSON.parse(xhr.response));
    } else if (xhr.readyState === 4) {
      callBack("could not fetch data");
    }
  };

  xhr.open("GET", link);

  xhr.send();
};

moveiData(url, (response) => {
  console.log(response);

  moveiData(url, (response) => {
    console.log(response);

  });
});

3- Declare new XMLHttpRequest for every function.

const url = new URL('https://www.breakingbadapi.com/api/quotes');
const moveiData = (link, callBack) => {
  const xhr = new XMLHttpRequest();

  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4 && xhr.status == 200) {
      callBack(JSON.parse(xhr.response));
    } else if (xhr.readyState === 4) {
      callBack('could not fetch data');
    }
  });

  xhr.open("GET", link);
  xhr.send();
};

moveiData(url, function (response) {
  console.log(response);

  moveiData(url, function (response) {
    console.log(response);
  });
});

CodePudding user response：

Don't reuse the same XMLHttpRequest object. Declare a new one every time you call the function, and make sure you return some data in the callback if there's a positive response.

const url = new URL('https://www.breakingbadapi.com/api/quotes');

const moveiData = (link, callBack) => {

  const xhr = new XMLHttpRequest();

  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4 && xhr.status == 200) {
      callBack(JSON.parse(xhr.response));
    } else if (xhr.readyState === 4) {
      callBack('could not fetch data');
    }
  });

  xhr.open("GET", link);
  xhr.send();

};

moveiData(url, function (response) {
  console.log(response);
  moveiData(url, function (response) {
    console.log(response);
  });
});

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You may find the relatively new fetch API and the async/await process a little more rewarding.

const url = 'https://www.breakingbadapi.com/api/quotes';

function getData(url) {
  return fetch(url);
}

async function main() {
  try {
    const res = await getData(url);
    console.log(await res.json());  
  } catch (err) {
    console.log(err);
  }
}

main();

CodePudding user response：

const url = new URL("https://www.breakingbadapi.com/api/quotes");

const moveiData = (link, callBack) => {
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", () => {
    if (xhr.readyState === 4 && xhr.status == 200) {
    } else if (xhr.readyState === 4) {
      callBack("could not fetch data");
    }
  });

  xhr.open("GET", link);
  xhr.send();
};

moveiData(url, (response) => {
  console.log(response);
});