Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Create a Reusable Fetch Function

Posted by tkiajeqgkn
tkiajeqgkn
6,667 Points

What is the 'data' parameter referring to?

Could someone please tell me what 'data' refers to for each of its uses in this code?

I seem to understand that it is a parameter - I'm not very good with all the jargon still - but I think I understand the use of parameters (or whatever they are) generally. Despite that, this one seems to illude me - I don't see 'data' mentioned anywhere as a variable, so how is it that data.message returns anything? What is the value of message in data.message in this example, for example?

fetchData('https://dog.ceo/api/breeds/list') .then(data => generateOptions(data.message))

If you could also explain to me how the 'res' part of this works, I would be extremely grateful!

function fetchData(url) { return fetch(url) .then (res => res.json()) }

1 Answer

Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 Points

When the promise from "fetchData" is resolved, the callback function passed to "then" is invoked and the resolved value is passed to it as an argument.

You're right that "data" here is the parameter, and it accepts the resolved value when the function is called. Obviously, that resolved value is expected to be an object that has a "message" property.

The "res" in your second example is another parameter of the "then" callback, just as "data" is in the first example.

If you're not familiar with (or would like a refresher on) promises and ".then", you may enjoy the Asynchronous Programming with JavaScript course.

tkiajeqgkn
tkiajeqgkn
6,667 Points

Thank you for your response Steven!

You said that the resolved value is expected to be an object that has a "message" property - I guess I ought to have asked how we can predict, or rather know, what the resolved value will be? As the fetchData request was called on a link, I would imagine that there are a great number of possibilities of what the resolved value could be, no? This is the part where I am most confused.

Thank you for the link to the course - I already had it bookmarked after reading your response to someone else's question!

If you are able to get back to me once again in relation to this second question, I'll be most grateful!

Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 Points

You know what kind of result to expect based on the service that you are making the request of. It would be described in that service's API documentation.

tkiajeqgkn
tkiajeqgkn
6,667 Points

Sounds like I need to study harder! Many thanks for your response, anyway.