JS fetch data from external API

最新推荐文章于 2025-05-10 09:05:33 发布

原创最新推荐文章于 2025-05-10 09:05:33 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用XMLHttpRequest(XHR)从外部API获取数据的方法。通过点击事件触发XHR的GET请求，从指定的公共API获取笑话数据，并将响应解析为JSON。如果状态码为200且响应类型为'success'，则遍历返回的笑话数组并将其展示在页面上。

利用xhr fetch 外部api（公共api）

注意xhr.onload = fcuntion(){}中，
this.responseText object中的内容，此例子中array内容在this.response.value中；

document.querySelector('.get-jokes').addEventListener('click',getJokes);

function getJokes(e){
  const number = document.querySelector(`input[type = "number"]`).value;

  const xhr= new XMLHttpRequest();
  
  xhr.open("GET",`http://api.icndb.com/jokes/random/${number}`,true);

  xhr.onload=function(){
    if(this.status===200){
      const response = JSON.parse(this.responseText);

      let output="";
      if(response.type==="success"){
        //不用response.foreach，因为这是object，只有value才是array
        response.value.forEach(function(joke){
          output+=`<li>${joke.joke}</li>`
        })
  }else {
    output+="<li>Something went wrong</li>";
  }
  document.querySelector('.jokes').innerHTML=output;
  }
}

  xhr.send();
  
  e.preventDefault();
}