时间戳

首页 > 解决方案 > 使用 API - 如何连接到 API

javascript - 使用 API - 如何连接到 API

问题描述

我已经编写了大部分代码，但我不确定我在这方面做错了什么：

let url = 'https://cors-anywhere.herokuapp.com/https://newsapi.org/v2/top-headlines?sources=hacker-news&apiKey=3dcfcd098261443dae7c7d002f25c062';

fetch(url)
  .then(r =>{
  return r.json();
})

  .then(data => {
    let articles = data.articles;
    let storyList = document.createElement("ul");
    let body = document.querySelector("body");
    body.appendChild(storyList);
})
  articles.map(articles => {
    let storyItem = document.createElement("li");
    storyItem.innerHTML = 'a href = "' + articles.href + '">' + articles.title + "</a>";
      storyList.appendChild(storyItem);
  })

  .catch(e => {
    console.log('An error has occurred: ${e}');
});

我已经< >从 API 代码中取出并尝试切换一些东西，比如切换一些属性来表达不同的内容，但是有人可以帮助我更好地理解这一点吗？提前致谢！

标签： javascriptfetch-apiurlfetch

解决方案

你做错了几件事。

  • 当您使用的 API 允许 cors 请求时，无需使用代理。
  • 您试图在承诺解决之前访问超出范围的“文章”

  • 您在“文章”数组上使用了错误的方法 IMO。从这里开始：Array.prototype.map()

    map() 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

    但您并没有尝试创建一个新数组，您只是想迭代数组的元素。这就是Array.prototype.forEach()的用途。

  • 您在模板文字上使用了单引号 ' 而不是反引号 `

let url = 'https://newsapi.org/v2/top-headlines?sources=hacker-news&apiKey=3dcfcd098261443dae7c7d002f25c062';

fetch(url)
.then(response => {
    return response.json();
})
.then(data => {
    let list = document.createElement('ul');

    document.querySelector("body").appendChild(list);

    data.articles.forEach(article => {
        let item = document.createElement('li');
        item.innerHTML = '<a href="' + article.url + '">' + article.title + "</a>";
        list.appendChild(item);
    });
})
.catch(e => {
    console.log(`An error has occurred: ${e}`);
});

推荐阅读