Fetching data from an API

API's are opening up and there's tons of examples on pages like https://github.com/toddmotto/public-apis

When working with API's, fetch is a common way to get the data it exposes. Other libraries serve a similar purpose, like Axios. There are have been many ways to do this throughout the ages, and although callbacks were common, Promises and more recently async/await is taking over.

I recorded two short gifs to explain how a Promise can be used, as well as how much easier and smaller the code is by using await.

To get the data from this API, you could wrap it in a Promise:

const apiUrl = 'https://jobs.search.gov/jobs/search.json\?query\=nursing+jobs+in+ny'



// Making a promise

const apiPromise = new Promise((resolve, reject) => {

  // Using a promise

  fetch(apiUrl).then((result) => {

    console.log('Fetched!', new Date().getTime())

    resolve(result.json())

  }).catch((error) => {

    console.log('Failed fetch', new Date().getTime())

    reject(error)

  })

})

https://gifsplanation.com/gifs/javascript-fetch-from-an-api-with-promises

Here's the same 2 promises resolved (fetch and result.json()) using await:

const apiUrl = 'https://jobs.search.gov/jobs/search.json\?query\=nursing+jobs+in+ny' 



// await only works in an async function

async function getJobs() {

  try {

    const result = await fetch(apiUrl)

    const json = await result.json()

    console.log(json)

  } catch(error) {

    console.log(error)

  }

}

https://gifsplanation.com/gifs/javascript-fetch-from-an-api-with-await