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 Write a Basic Fetch Request

I'm having trouble understanding how when you created the parameter 'data' in the .then() method

I'm having trouble understanding how when you created the parameter 'data' in the .then() method, the program knew that that referred to the JSON data. Why don't you have to declare like (var data=response.json ) for example before you can use the parameter data? Could you have named that parameter anything and it would still return the json data or is "data" like a keyword?

12 Answers

I was having trouble understanding this as well so I hope this helps someone. From my understanding:

  1. fetch() returns a Promise.
  2. Promise resolves to a random dog breed image.
  3. The Promise has a "then" method(function of Object) by default.
  4. The then() method takes up to two arguments(resolve or reject).
  5. The then() method expects a callback function for the success, it is just how the method was created.
  6. The arrow functions are passed as arguments to the then() method. (helps to understand the difference between parameters and arguments)
  7. The then() method also returns a Promise Object just like fetch().

Thank you very much David Pierce!

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Hi Zachary Reed

I feel you may be confusing variables with parameters of a function. Even with normal functions, you don't "declare" the parameter(s) of the function. For example:

function myFunction(parm1) {
    return parm1;
}

Here, the parameter is named parm1, but it wasn't declared anywhere. It's just the name for the parameter of the function.
Arrow functions are relatively new in JavaScript and do take some getting used to. I suggest some reading from the web. One place may be the MDN documentation on Arrow Functions.
Treehouse has a practice session and a workshop specifically focusing on Arrow Functions, as well as a couple courses dealing with all the new syntax in ECMAScript 2015 (ES6), which can be found here.

I hope this will help, but don't be discouraged. Arrow Functions are a bit of an acquired taste. :)

Keep Coding! :dizzy:

'data' in this case represents the resolve value of the promise the then() method was called on, so does 'response'. The first argument passed to the then() method is a callback function whose parameter is this value.

Manoj Gurung
Manoj Gurung
5,318 Points

its the problem with teaching method; we have a simple question that has yet to be answered :(

I just watched the intro to ES2015 and came back to this and I got it now. I couldn't figure out why the function didn't look more like this...

.then(data)=>{console.log(data)};

..And since I didn't know that information I could not figure out what the heck was going on!

But then I watched the part about arrow functions and it said arrow functions with one parameter don't need parentheses, and single line functions don't need brackets, which results in THIS!

.then(data=>console.log(data));

I've also been trying so hard the last couple of days to grasp callback functions and promises, so the idea of having a function be a parameter is weird to me. I still don't understand how the computer knows that you want to log the response to the fetch with literally ANY word that you put in place of data.

I don't understand how 'data' hasn't been declared anywhere as avariable or as a function and yet it can still act as a function? Like in the code there isn't a var data=, let data=, const data=, or function data=... it just seems to come out of nowhere and somehow have meaning. I even changed data to a different name and it still worked

Dmitry Polyakov
Dmitry Polyakov
4,989 Points

You just have to remember the structure how to use it....

Alright thank you man I think I just need to wrap my head around callbacks and promises more. It’s taking forever for me to grasp it I don’t know what I’m missing. I feel like I’m making it harder than it needs to be! 😂

Dmitry Polyakov
Dmitry Polyakov
4,989 Points

Usually at first it seems hard, but after you have some practice you realize how easy it is...

Manoj Gurung
Manoj Gurung
5,318 Points

hi Zacch, this is what i understood. We transformed the Fetch API return into a JSON data-- > then we worked on it by declaring that "whatever data was returned" into a name called "returnData", then we said- Hey just get me the message portion of this returned data by saying "returnData.message". Hope this is true and helps you understand it. Hopefully others can chime in if my supposition is not true.

I am getting error when I enter .then(data)=>{console.log(data)};

What could be the issue?

Dmitry Polyakov
Dmitry Polyakov
4,989 Points

Variables can have any names you like. Most common words are data, response....

yes, but don't variables have to be declared with either var, let, or const? In this video, it isn't...

Dmitry Polyakov
Dmitry Polyakov
4,989 Points

Really, never thought of it.. in fetch you use them without var, let ot const.. fetch returns a promise.. and all these words represent data returned by the promise..

Dmitry Polyakov
Dmitry Polyakov
4,989 Points

It's not a variable. What's inside the parenthesis is a callback function. And all these words like data, response they are arguments in these callback functions.