Код для вызова пространстве X API и отображения результатов


Это технический тест с собеседования. Обратная связь, что, хотя он не просил, в состав заявки не было отличным.
Как новичок, я не совсем уверен, что случилось с ним и был бы признателен за комментарий.

/* --- Get data form API and display it in DOM --- */

// URL to get all launches from SpaceX API
const allLaunchesURL = 'https://api.spacexdata.com/v2/launches/all';

// Get launch data from API
const getLaunchData = async (url) => {
  let response = await fetch(url);

  // Check if response is ok, if not throw an error
  if(!response.ok) {
    throw Error(`Error fetching API, response status:  ${response.statusText}`);
  }

  let data = await response.json();
  data = data.slice(-10);
  displayData(data);
}

getLaunchData(allLaunchesURL);

// Display data on DOM
function displayData(data) {
  const results = document.querySelector('.results');
  data.map(launch => {
    results.innerHTML += `
      <tr>
        <td>${launch.flight_number}</td>
        <td>${formatDate(launch.launch_date_utc)}</td>
        <td>${launch.rocket.rocket_name}</td>
        <td>${checkPastOrFuture(launch.launch_date_utc)}
          ${checkPastOrFuture(launch.launch_date_utc) === 'Launched' ? ' - ' + launchSuccess(launch) : ''}
        </td>
        <td>
          <button class="infoButton" id="${launch.flight_number}" data-rocket=${launch.rocket.rocket_id} onclick="getFlightDetails(this)">Click</button>
        </td>
      </tr>
    `
  })
}

// Check if launch date is upcoming or in the past
function checkPastOrFuture(date) {
  let currentDate = new Date();
  let dateToCheck = new Date(date);
  return currentDate < dateToCheck ? 'Upcoming' : 'Launched';
}

// Check success of launch
function launchSuccess(flight) {
  return flight.launch_success ? 'Successful' : 'Failure'
} 

// Format the date
function formatDate(date) {
  const d = new Date(date);
  return d.toUTCString();
}


/* --- Get more info on individual launch when triggered by button click --- */

// Endpoint stub for API queries
// Individual flight
const flightURL = 'https://api.spacexdata.com/v2/launches?flight_number=';

// Rocket information
const rocketURL = 'https://api.spacexdata.com/v2/rockets/';

// Get flight number from button id
async function getFlightDetails(ele) {

  // Get data for flight 
  let response = await fetch(`${flightURL}${ele.id}`);

  // Error checking
  if(!response.ok) {
    throw Error(`Error fetching flight details, response status: ${response.statusText}`);
  }

  let data = await response.json();
  displayFlightData(data[0]);

  // Get rocket data
  let rocketResponse = await fetch(`${rocketURL}${ele.dataset.rocket}`);

  // Error checking
  if(!response.ok) {
    throw Error(`Error fetching rocket details, response status: ${response.statusText}`);
  }

  let rocketData = await rocketResponse.json();
  displayRocketInfo(rocketData);
}

function displayFlightData(flight) {
  const flightDiv = document.querySelector('.flightDetails');
  if(!flight) {
    flightDiv.innerHTML = `
    <h4>Flight details</h4>  
    <p>Sorry, this flight has no further details</p>
    `;
    return;
  }

  flightDiv.innerHTML = `
    <h4>Flight details</h4>
    <p>${flight.details}</p>
    <p><strong>Launch site:</strong> ${flight.launch_site.site_name_long}</p>
    <figure>
      <img src="${flight.links.mission_patch}" alt="Flight ${flight.flight_number} Mission Patch" title="Flight ${flight.flight_number} Mission Patch">
      <figcaption>Flight ${flight.flight_number} Mission Patch</figcaption>
    </figure>
    <br>
  `
}

function displayRocketInfo(rocket) {
  const rocketDiv = document.querySelector('.rocketInfo');
  if(!rocketDiv) {
    rocketDiv.innerHTML = `
      <h4>Rocket Details</h4>
      <p>Sorry, this flight has no further details</p>
    `
    ;
    return;
  }
  rocketDiv.innerHTML = `
    <h4>Rocket Details</h4>
    <p><strong>Name:</strong> ${rocket.name}, <strong>ID:</strong> ${rocket.id}</p>
    <p><strong>Description:</strong> ${rocket.description}</p>
    <p><strong>Height:</strong> ${rocket.height.meters} metres</p>
    <p><strong>Mass:</strong> ${rocket.mass.kg} kg</p>
    <p><strong>Number of stages:</strong> ${rocket.stages}</p>

  `
}


Комментарии
1 ответ

После того, как функции выложили, похоже getLaunchData не только получает данные, она также вызывает функцию displayData. Возможно, было бы более уместно для бывшего функция просто возвращает данные, а затем вызывающего абонента передача данных последняя функция.

Вы могли бы рассмотреть оборачивать функции в контроллере объекта, или с ваш код, который уже использует некоторые , такие услуги, как стрелка функций, переместить функций в классе в качестве методов.


Я вижу несколько мест, где элементы выбираются по имя класса (например, document.querySelector('.flightDetails')). Предполагая, что существует только один элемент для каждого из этих класов, было бы более целесообразно использовать идентификатор атрибута. Тогда селектор будет использовать хэштег для ID селектора (напр. document.querySelector('#flightDetails')). Но на самом деле, если только один элемент выбирается по ID, то быстрее использовать document.getElementById() потому что это "определенно быстрее"1 (см. см. Этот тест jsperf тест для сравнения).


Есть несколько мест, где переменные создаются при помощи let но тогда не переназначаются (например, response, currentDate, dateToCheckи т. д.) так const вместо него могут быть использованы для этих.


Использование async / await приятно, а также обработка ошибок. Шаблон буквальное использование это хорошо, но может быть преобразована к использованию Шаблоны JavaScript (и ссылаться на этот CR пост для примера). Существующее Использование шаблона литералы добавляет много вид-ориентированной логики в коде контроллера. Можно отделить такие функции в объект и объекта контроллера. Кроме того, хотя это может быть маловероятно, что в SpaceX API будет делать этого, существует риск безопасности с шаблона литералы оценки значений из ответа API. Относятся к этому так ответа для объяснения этой темы.

1https://www.sitepoint.com/community/t/getelementbyid-vs-queryselector/280663/2

3
ответ дан 15 июня 2018 в 12:06 Источник Поделиться