Async Await Fetch

HTML

<ul id="people"></ul>

JavaScript

const url = 'https://randomuser.me/api/?nat=us&results=10'

const getPeople = async () => {
  const response = await fetch(url)
    .catch(error => console.log(error))
  const data = await response.json()
  return data
}

const result = getPeople()

result.then(data => {
  let output = data.results.map(person => {
    return `
      <li>
      <img
        src='${person.picture.large}'
        alt='${person.name.first}'
      ><br/>
      ${person.name.first} ${person.name.last}
      </li>`
  })
  document.getElementById('people').innerHTML = output.join('')
})

Demo

API from randomuser.me, a free API for generating random user data