-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add docs for using Promises and making AJAX requests #531
Changes from 1 commit
9e460ac
358992f
012ca18
7af6adf
c068273
a94a24c
12aca13
8ec8ef0
d998dde
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,6 +23,8 @@ You can find the most recent version of this guide [here](https://github.com/fac | |
- [Adding Custom Environment Variables](#adding-custom-environment-variables) | ||
- [Integrating with a Node Backend](#integrating-with-a-node-backend) | ||
- [Proxying API Requests in Development](#proxying-api-requests-in-development) | ||
- [Using Promises](#using-promises) | ||
- [AJAX Requests](#ajax-requests) | ||
- [Adding `<meta>` Tags](#adding-meta-tags) | ||
- [Deployment](#deployment) | ||
- [Now](#now) | ||
|
@@ -504,6 +506,32 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can: | |
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). | ||
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. | ||
|
||
## Using Promises | ||
|
||
This project includes a [Promise polyfill](https://github.com/then/promise) which provides a full implementation of Promises/A+. | ||
|
||
A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises [here](https://www.promisejs.org/) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let’s make this go right after previous sentence without a paragraph break in between. |
||
|
||
## AJAX Requests | ||
|
||
This project includes a [fetch polyfill](https://github.com/github/fetch), which makes it easier to make web requests. | ||
|
||
The `fetch` function allows to easily makes AJAX requests. It takes in a url or a Request as an input and returns a Promise that resolves to a Response object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. url -> URL |
||
|
||
While you can still use `new XMLHttpRequest`, we encourage you to use `fetch`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let’s not mention |
||
|
||
You can make a GET request like this: | ||
```javascript | ||
fetch('/todos.json') // Make the request | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. People will think local files are being served this way. Can we change this to be an actual open API? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 I went for something similar to https://facebook.github.io/react/tips/initial-ajax.html I hope that is fine :) |
||
.then(function(response) { | ||
return response.json(); // Parse the JSON response (optional) | ||
}).then(function(todos) { | ||
console.log('Todos', todos); // Handle success | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let’s show how to call There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 I decided to add |
||
}).catch(function(error) { | ||
console.log('Error', error); // Handle error | ||
}); | ||
``` | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let’s also show a separate block below demonstrating the same code but using There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I used https://zeit.co/blog/async-and-await for the example, but I can change it if you prefer another one like https://github.com/yortus/asyncawait, https://ponyfoo.com/articles/understanding-javascript-async-await or https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html :) |
||
## Adding `<meta>` Tags | ||
|
||
You can edit the generated `index.html` and add any tags you’d like to it. However, since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let’s make this one section:
Fetching AJAX Requests
. Let’s also put it beforeIntegrating with a Node Backend
.