Использование API - Как подключиться к API - PullRequest
Новая
       12

Использование API - Как подключиться к API

0 голосов
/ 03 июля 2018

У меня большая часть кода написана, но я не уверен, что я делаю неправильно по этому поводу: 

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 и попытался переключить что-то вроде переключения некоторых свойств, чтобы сказать что-то другое, но кто-нибудь может помочь мне понять это немного лучше? Заранее спасибо!

1 Ответ

0 голосов
/ 03 июля 2018

Было несколько вещей, которые вы делали неправильно.

  • Нет необходимости использовать прокси, если используемый вами 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}`);
});
...