使用 XML HTTP 请求在 Javascript 中获取 HTTP GET 请求错误答案

【问题标题】：Getting an Error for HTTP GET request in Javascript using XML HTTP request使用 XML HTTP 请求在 Javascript 中获取 HTTP GET 请求错误
【发布时间】：2021-09-12 17:08:57
【问题描述】：

我是 Javascript 新手。我正在尝试制作一个简单的提示网站，并且正在尝试使用 HTTP GET 请求从该网站获取形容词：https://random-word-form.herokuapp.com/

但是，我总是收到错误的请求错误。我尝试了一个测试 API 并观看了几个视频，并使用了他们所做的相同代码来查看我是否可以解决我的问题，但它仍然无法正常工作。

我们将不胜感激。

javascript代码如下：

let adjective; 

function buttonclick(method, url){
    console.log("hi");
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);

    xhr.responseType = 'json';

    xhr.send();

    xhr.onload = function(){
        if(xhr.status!=200){
            alert('Error');
        }
        else {
            alert('got ${xhr.response.length');
        }
        let responseData = xhr.response;
        return responseData;
    };
};

function getData(){
    adjective = buttonclick('GET','https://random-word-form.herokuapp.com/random/adjective');
    console.log(adjective);
};

getData();

【问题讨论】：

我已将您的代码复制到堆栈片段中。它不会产生错误的请求错误，并且会在控制台中记录一个随机单词（作为单元素 JSON 数组）。不过，我会推荐一些东西： 1. 使用fetch 而不是XMLHttpRequest。 2. 不要将; 放在函数declarations 之后（; 是statement 终止符）。 3. 在发送请求之前 挂钩事件处理程序（如果您切换到fetch，则不会成为问题）。 4. 不要return 来自onload 的任何东西（同样，如果...，则非问题）。
5.在“else”分支中，您的意思似乎是使用模板文字，但您使用了字符串文字。阅读模板文字here。（忽略那篇文章标题的“（模板字符串）”部分。模板文字是不是字符串。未标记的模板文字确实会产生字符串，但标记的不会。）
@T.J.Crowder 谢谢！我会这样做的:)

标签： javascript xmlhttprequest http-get

【解决方案1】：

这是使用fetch 方法的示例。

let loading = true
let error = false

function getData() {
  const url = 'https://random-word-form.herokuapp.com/random/adjective'
  fetch(url).then(res => {
    return res.json()
  }).then(res => {
     console.log(res) // <- here is your data aka response
  })
    .catch(err => {
      console.log(err);
      error = true
    })
    .finally(() => {
      loading = false
    })
}

&lt;button onclick="getData()"&gt;get adj&lt;/button&gt;

请记住，如果您使用 API，您应该处理所有可能的状态：loading、success、error。那里有很好的文章来描述基础知识。

你至少应该做的是：

显示加载状态，如果响应正确，设置加载为假
显示加载状态，如果响应出错，将 loading 设置为 false 并将 error 设置为 true。

【讨论】：

【解决方案2】：

您将不得不等待xhr.readyState 成为 4 与侦听器。应该是这样的：

xhr.onreadystatechange = function(){
    if (xhr.readyState === 4){
    // do Something 
    }
};

【讨论】：