advice-generator-app with pure html, css and JS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi To Dat, I'll see if I can answer some of these questions, but first off, there's an issue where I can't retrieve the next advice on Firefox, which is what I use. This is likely due to caching on the browser; you can try it and see if that's the case for you, and to fix it, try adding a header object to axios before the async function using one of these methods (it might even help with shortening the delay you mentioned):

  // method 1
  const config = { headers: {'Content-Type': 'application/json','Cache-Control' : 'no-cache'}};
  const { data } = await axios.get('https://api.adviceslip.com/advice', config);
  
  // method 2: adding this before your function
  axios.defaults.headers = {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache',
    'Expires': '0',
  };
  

  About transition, I used one in my solution, and you can have a look to see how I did it: https://www.frontendmentor.io/solutions/responsive-component-with-api-and-data-fetching-acBCRNQ6R9. I used a loading animation that I had an aria-hidden on when it's not in use, and for the text element, I used opacity and transform to temporarily hide it until the data is loaded. I also added a setTimeout to prolong that loading effect a little bit.

  0

  ---

  

  To Dat•290

  @tltd0807Posted over 2 years ago

  @elaineleung can you explain more about the headers or the link relative to cache-control, I don't know about it very clearly and why it behaves like that. Thank you for your kindness

  0

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @tltd0807 Sorry To Dat, I just remembered about this comment!

  If you open your browser's inspector and look at the network tab, you'll see a table with some columns, and if you refresh the browser after going to this tab, you might see a lot of rows popping up with a lot of information, such as the 200 status code and the GET method. If you click into one of these rows, you'll see a whole lot more information like "response headers" and "request headers". This is the information that we are sending and receiving from the server, and this was what I was talking about, where we send additional requests to the server using the header. In this case, we're telling the server no caching. Anyway, this is all really useful information especially when working with APIs and also when needing to communicate with a server.

  Hope this explains my comment a bit more!

  0