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);
});
});
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);
});
});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();
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);
});
});
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);
});