為什么這個回呼給出無限回圈

所以我在 javascript 中學習 async-await，當我嘗試做這個回呼地獄時（我知道這不是最佳實踐，但我必須學習它）第二次我呼叫它不斷呼叫自己的函式（無限回圈） ) 你可以運行代碼來了解更多，因為對我來說沒有什么問題我花了過去 2 天試圖理解這個問題，但我最終在這里

代碼 ：

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

uj5u.com熱心網友回復：

在那個問題上你有三個選擇。

1- 您添加了一個新的事件偵聽器，您應該在回應時將其洗掉。

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- 使用 onreadystatechange 回呼。

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- 為每個函式宣告新的 XMLHttpRequest。

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

uj5u.com熱心網友回復：

不要重復使用同一個XMLHttpRequest物件。每次呼叫函式時都宣告一個新的，如果有肯定的回應，請確保在回呼中回傳一些資料。

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

您可能會發現較新的fetchAPI，并在async/await程序中一點點更有價值。

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

uj5u.com熱心網友回復：

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

標籤：javascript 接口 异步等待 承诺 异步回调

上一篇：GITHUBAPI的技術問題

下一篇：DiscordAPI-獲取真實標志名稱