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

我建议不要使用XMLHttpRequest来进行Ajax调用，因为它使用Promises，因此建议使用fetch api，它可以实现更简单，更简洁的API，避免回调地狱，并且必须记住XMLHttpRequest的复杂API。（参考：https://developers.google.com/web/updates/2015/03/introduction-to-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));

纯JavaScript REST API调用

2 个答案: