Please enable JavaScript.

Coggle requires JavaScript to display documents.

28.3: Making requests with axios - Coggle Diagram

28.3: Making requests with axios

axios is

must be imported

via jsDeliver CDN

<!DOCTYPE html>
<html lang="en">
 ...
  <body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

using

axios
  .get("https://swapi.dev/api/people/1/")
  .then((res) => {
    console.log("RESPONSE: ", res);
  })
  .catch((e) => {
    console.log("ERROR! ", e);
  });

outputs

> RESPONSE:  
  Object
  > data: 
    { name: 'Luke Skywalker', 
      height: '172', mass: '77', hair_color: 'blond', 
      skin_color: 'fair', …}
  > headers: r {content-type: 'application/json'}
  > status: 200
  ...

using async/await

const getStarWarsPerson = async (id) => {
  try {
    const res = await axios.get(`https://swapi.dev/api/people/${id}/`);
    console.log(res.data);
  } catch (e) {
    console.log("ERROR", e);
  }
};

getStarWarsPerson(5);

outputs

> { name: 'Leia Organa', height: '150', 
    mass: '49', hair_color: 'brown', 
    skin_color: 'light', …}

headers


const getDadJoke = async () => {
  const config = { headers: { Accept: "application/json" } };
  const res = await axios.get("https://icanhazdadjoke.com/", config);
  console.log(res.data.joke);
};

getDadJoke();

outputs

> How do you make holy water? You boil the hell out of it.