使用 API - 如何连接到 API答案

【问题标题】：Consuming APIs - How to connect to an API使用 API - 如何连接到 API
【发布时间】：2018-07-03 15:56:16
【问题描述】：

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

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 代码中取出了 < > 并尝试切换一些东西，比如切换一些属性来表达不同的意思，但是有人可以帮助我更好地理解这一点吗？提前致谢！

【问题讨论】：

看起来你在使用articles，然后才被填充。
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference的可能重复
不仅如此，您还在定义articles 的范围之外使用它。
当您获取的资源允许 cors 并且您可以直接获取它时，为什么要使用“cors-anywhere.herokuapp.com”？为什么在不使用返回值的情况下使用map 来迭代articles 数组，而不是forEach？
@gforce301 好吧，我正在做一个编码训练营，所以我们还没有讨论“forEach”。我正在使用“cors-anywhere.herokuapp.com”，因为这就是检查点中示例的设置方式。

标签： javascript fetch-api urlfetch

【解决方案1】：

你做错了几件事。

当您使用的 API 允许 cors 请求时，无需使用代理。
您试图在承诺解决之前访问超出范围的“文章”
您在“articles”数组上使用了错误的方法，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}`);
});

【讨论】：