纯 JavaScript REST API 调用

Question

当我调用函数 CallMe 时，我从服务中得到一个结果，但我的 HTML 元素的文本未定义，因为服务仍在加载数据。 我尝试异步，等待 Test() 但没有结果。 我希望这是纯 JS。 我做错了什么？

 CallMe(){
   document.getElementById('testId').InnerHTML = Test();
}

function Test(){
    var request = new XMLHttpRequest(); // Create a request variable and assign a new XMLHttpRequest object to it.
    request.open('GET', 'https://some service'); // Open a new connection, using the GET request on the URL endpoint
    request.send();

    request.onload = async function () {
        var data = await JSON.parse(this.response);
        return data[0][0][0];
      }
}

Answer 1

function CallMe() {
    var request = new XMLHttpRequest(); // Create a request variable and assign a new XMLHttpRequest object to it.
    request.open('GET', 'https://some service'); // Open a new connection, using the GET request on the URL endpoint
    request.send();
    
    request.onload = async function () {
        var data = JSON.parse(this.response);
        document.getElementById('testId').InnerHTML = data // depending on your response targert your desired property.
    }
}

只需执行一种方法，当调用返回响应时，将值分配给您的 testId div

Answer 2

我建议使用 fetch api，而不是使用 XMLHttpRequest 进行 ajax 调用，因为它使用了 Promises，它可以实现更简单、更清晰的 API，避免回调地狱，并且必须记住 XMLHttpRequest 的复杂 API。 （参考： https : //developers.google.com/web/updates/2015/03/introduction-to-fetch ）。

使用 fetch api，纯 js 中的代码将如下所示。

fetch('https://some service')
.then( res => res.json() )
.then(response => {
    document.getElementById('testId').innerHTML = data[0][0][0];
}) 
.catch(error => console.error('Error:', error));