从函数返回 HTTP 请求答案

【问题标题】：Return an HTTP Request from a Function从函数返回 HTTP 请求
【发布时间】：2021-06-28 22:57:30
【问题描述】：

复活节快乐！我试图从一个函数返回一个 HTTP 请求，但它并没有像我想象的那样工作。现在，HTTP 请求很好，我可以在这里向您展示：

const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
  alert(eval(Http.responseText)[0]["meanings"][0]["partOfSpeech"])
}

如您所见，它会多次提醒它，这不是我想要的。另外，当我在函数中执行此操作时：

var JSIMS = function() {
  const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
  return eval(Http.responseText)[0]["meanings"][0]["partOfSpeech"];
}
}
alert(JSIMS())

如您所见，它会发出“未定义”警报。（我故意让函数返回值，而不是从函数的内部提醒它）

请教我如何通过返回值的函数来解决这个问题，并且不直接从函数内部提醒它。

【问题讨论】：

标签： javascript html http return

【解决方案1】：

您应该在就绪状态完成后使用接收到的数据。试试这个，它的工作原理：

const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = () => {
    if (Http.readyState === XMLHttpRequest.DONE) {
        alert(eval(Http.responseText)[0].meanings[0].partOfSpeech);
    }
}

【讨论】：

是的，但这没有返回输出的功能。
您谈到了多次提醒不返回功能，不客气。
看看我的帖子/问题的底部，你就会明白了。

【解决方案2】：

您可以通过添加条件来检查请求状态是否为 DONE 来避免多次警报。

const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
  if (Http.readyState == XMLHttpRequest.DONE) {
    alert(eval(Http.responseText)[0]["meanings"][0]["partOfSpeech"])
  }
}

返回响应的另一个选项是使用回调函数来处理来自 api 调用的响应，如下所示。

function loadData(callback) {
  const Http = new XMLHttpRequest();
  const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
  Http.onreadystatechange = (e) => {
   if (Http.readyState == XMLHttpRequest.DONE) {
       callback(eval(Http.responseText)[0].meanings[0].partOfSpeech);
    }
  }
  Http.open("GET", url);
  Http.send();
}

loadData(myCustomFunction);

function myCustomFunction(data) {
  console.log(data); /* Output - Verb */
}

同样，我们可以使用 promise 在 api 响应后返回您的数据

var JISM = () => {
  return new Promise((resolve, reject)=>{
    const Http = new XMLHttpRequest();
    const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
    Http.onreadystatechange = (e) => {
     if (Http.readyState == XMLHttpRequest.DONE) {
       resolve(eval(Http.responseText)[0].meanings[0].partOfSpeech);
     }
    }
    Http.onerror = () => reject(Http.statusText);
    Http.open("GET", url);
    Http.send();
  });
}

JISM().then(data => {
  console.log(data);
});

【讨论】：

我知道这是返回 data 但在哪里？
您将收到从回调函数内的api重新调整的数据 - myCustomFunction()
你可以编辑这个以显示将所有这些都放在一个变量中，然后console.log()这个变量吗？
你的意思是 var loadData = function() 这种方式？
是的，就是这样。

【解决方案3】：

xhr.send 应该在xhr.onreadystatechange 之后使用，但无论如何您都没有测试看到if(xhr.readyState === 4 && xhr.status === 200)。在 XHR2 中，您可以避免使用 xhr.onreadystatechange，并使用该条件，如果您只是这样做：

function JSIMS(word){ // I don't like the name of the function... but
  const xhr = new XMLHttpRequest;
  xhr.open('GET', 'https://api.dictionaryapi.dev/api/v2/entries/en_US/'+word);
  xhr.responseType = 'json';
  return new Promise((resolve, reject)=>{
    xhr.onload = function(){
      resolve(this.response[0].meanings[0].partOfSpeech);
    }
    xhr.onerror = ()=>{
      reject(new Error('load error'));
    }
    xhr.send();
  });
}
JSIMS('hand').then(j=>{
  console.log(j);
});

【讨论】：