extend Network/Fetch API documentation #3552

alexkrolick · 2015-10-20T21:21:12Z

Mention that Fetch returns a Promise
(makes example with .then clearer to newcomers to ES6/ES7)
Add example of Fetch usage with second argument
(helps clarify how e.g., a POST request to an API might be constructed)

facebook-github-bot · 2015-10-20T21:22:28Z

By analyzing the blame information on this pull request, we identified @sahrens, @mkonicek and @vjeux to be potential reviewers.

facebook-github-bot · 2015-10-20T21:22:28Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

facebook-github-bot · 2015-10-20T21:24:26Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

vjeux · 2015-10-20T21:34:51Z

cc @brentvatne

alexkrolick · 2015-10-20T21:56:44Z

I also noticed in the course of working with fetch that sending a stringified JSON as the request body (as per github/fetch#post-json) without setting the content-type header fails with a network error, at least for the endpoint I was using. I included that as the default in the example, but it might be worth mentioning explicitly.

ide · 2015-10-20T23:30:28Z

In RN we include regenerator by default so try-catch should work out of the box. Might be nicer to show that instead of then/catch.

brentvatne · 2015-10-25T22:35:23Z

docs/Network.md

@@ -37,7 +37,7 @@ As a developer, you're probably not going to use XMLHttpRequest directly as its

 ## Fetch

-[fetch](https://fetch.spec.whatwg.org/) is a better networking API being worked on by the standard committee and is already available in Chrome. It is available in React Native by default.
+[fetch](https://fetch.spec.whatwg.org/) is a better networking API being worked on by the standard committee and is already available in Chrome. It is available in React Native by default. Fetch returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).


should be standards committee rather than standard committee

also: fetch returns a... rather than Fetch returns a..

Noted and fixed

brentvatne · 2015-10-25T22:37:17Z

In RN we include regenerator by default so try-catch should work out of the box. Might be nicer to show that instead of then/catch.

Yeah I agree we should include this -- it would be ideal to have it as an alternative. @whokilledtheelectricmonk - are you familiar with async/await enough to show your example with that syntax?

If not that's fine, I can merge this and add it.

Thank you!

alexkrolick · 2015-10-25T23:25:00Z

Yeah I agree we should include this -- it would be ideal to have it as an alternative.

Only problem with this is that you can only use it in functions declared as async. Unless I'm mistaken, you can't define builtin React methods that way, so you can't use the try/catch/await syntax inside of, e.g., a componentDidMount method. I think the thing to do here is add a section in the docs about Promises and how they can be used with different syntax, and link to that when finished instead of the Mozilla page.

Thoughts?

EDIT: I just added an example - let me know what you think

facebook-github-bot · 2015-10-25T23:30:20Z

@whokilledtheelectricmonk updated the pull request.

facebook-github-bot · 2015-10-26T01:16:18Z

@whokilledtheelectricmonk updated the pull request.

facebook-github-bot · 2015-10-26T01:33:22Z

@whokilledtheelectricmonk updated the pull request.

ide · 2015-10-26T04:09:29Z

docs/Network.md

+async getUsersFromApi() {
+  try {
+    let response = await fetch('https://mywebsite.com/endpoint/');
+    return await response.users;


remove the await

facebook-github-bot · 2015-10-26T04:15:18Z

@whokilledtheelectricmonk updated the pull request.

mkonicek · 2015-10-26T22:57:20Z

docs/Network.md

@@ -50,6 +77,22 @@ fetch('https://mywebsite.com/endpoint.php')
  });
 ```

+2.  Called within an asynchronous function using ES7 `async`/`await` syntax:


Is this transform enabled by default both on iOS and Android? If not people will find this example confusing because it won't work.

Yes, it's purely implemented in JS. (The iOS bridge has support for defining bridged async functions, which we need to add to Android. But you can use pure JS async functions on both platforms.)

Cool, just wasn't sure whether ES7 was enabled in the Babel config by default.

Just found it :)
https://github.com/facebook/react-native/blob/master/packager/react-packager/.babelrc#L18

mkonicek · 2015-10-26T22:57:25Z

I'll let @brentvatne do the final review as he's been reading through this before. Thanks for adding it!

mkonicek · 2015-10-26T22:57:43Z

(See my inline comment about ES7)

alexkrolick · 2015-10-27T20:58:06Z

Should I squash these commits or rebase?

ide · 2015-10-27T21:22:53Z

Yes, if you could please squash documentation-related commits that'd be great and help keep the commit history clean.

- Mention that Fetch returns a Promise (makes example with .then clearer to newcomers to ES6/ES7) - Add example of Fetch usage with second argument (helps clarify how e.g., a POST request to an API might be constructed) - Add async/await example

alexkrolick · 2015-11-02T17:48:47Z

@ide @brentvatne do you want to merge this in for 0.15? It has been squashed.

extend Network/Fetch API documentation

ide · 2015-11-02T18:02:04Z

fyi: Commits to the docs go out right away regardless of the branch cutoff (this might change when we have versioned docs, but right now the docs are for master).

facebook-github-bot added the GH Review: review-needed label Oct 20, 2015

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 20, 2015

brentvatne reviewed Oct 25, 2015
View reviewed changes

ide reviewed Oct 26, 2015
View reviewed changes

mkonicek reviewed Oct 26, 2015
View reviewed changes

extend Network/Fetch API documentation

b5297fe

- Mention that Fetch returns a Promise (makes example with .then clearer to newcomers to ES6/ES7) - Add example of Fetch usage with second argument (helps clarify how e.g., a POST request to an API might be constructed) - Add async/await example

alexkrolick force-pushed the patch-1 branch from 9e13fd5 to b5297fe Compare October 27, 2015 21:31

ide pushed a commit that referenced this pull request Nov 2, 2015

Merge pull request #3552 from whokilledtheelectricmonk/patch-1

a456ac3

extend Network/Fetch API documentation

ide merged commit a456ac3 into facebook:master Nov 2, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

extend Network/Fetch API documentation #3552

extend Network/Fetch API documentation #3552

alexkrolick commented Oct 20, 2015

facebook-github-bot commented Oct 20, 2015

facebook-github-bot commented Oct 20, 2015

facebook-github-bot commented Oct 20, 2015

vjeux commented Oct 20, 2015

alexkrolick commented Oct 20, 2015

ide commented Oct 20, 2015

brentvatne Oct 25, 2015

brentvatne Oct 25, 2015

alexkrolick Oct 25, 2015

brentvatne commented Oct 25, 2015

alexkrolick commented Oct 25, 2015

facebook-github-bot commented Oct 25, 2015

facebook-github-bot commented Oct 26, 2015

facebook-github-bot commented Oct 26, 2015

ide Oct 26, 2015

facebook-github-bot commented Oct 26, 2015

mkonicek Oct 26, 2015

ide Oct 26, 2015

mkonicek Oct 27, 2015

mkonicek commented Oct 26, 2015

mkonicek commented Oct 26, 2015

alexkrolick commented Oct 27, 2015

ide commented Oct 27, 2015

alexkrolick commented Nov 2, 2015

ide commented Nov 2, 2015

extend Network/Fetch API documentation #3552

extend Network/Fetch API documentation #3552

Conversation

alexkrolick commented Oct 20, 2015

facebook-github-bot commented Oct 20, 2015

facebook-github-bot commented Oct 20, 2015

facebook-github-bot commented Oct 20, 2015

vjeux commented Oct 20, 2015

alexkrolick commented Oct 20, 2015

ide commented Oct 20, 2015

brentvatne Oct 25, 2015

Choose a reason for hiding this comment

brentvatne Oct 25, 2015

Choose a reason for hiding this comment

alexkrolick Oct 25, 2015

Choose a reason for hiding this comment

brentvatne commented Oct 25, 2015

alexkrolick commented Oct 25, 2015

facebook-github-bot commented Oct 25, 2015

facebook-github-bot commented Oct 26, 2015

facebook-github-bot commented Oct 26, 2015

ide Oct 26, 2015

Choose a reason for hiding this comment

facebook-github-bot commented Oct 26, 2015

mkonicek Oct 26, 2015

Choose a reason for hiding this comment

ide Oct 26, 2015

Choose a reason for hiding this comment

mkonicek Oct 27, 2015

Choose a reason for hiding this comment

mkonicek commented Oct 26, 2015

mkonicek commented Oct 26, 2015

alexkrolick commented Oct 27, 2015

ide commented Oct 27, 2015

alexkrolick commented Nov 2, 2015

ide commented Nov 2, 2015