Refactor AJAX example for improved clarity and consistency#27
Open
JuhQ wants to merge 2 commits into
Open
Refactor AJAX example for improved clarity and consistency#27JuhQ wants to merge 2 commits into
JuhQ wants to merge 2 commits into
Conversation
Reviewer's GuideRefactors and clarifies the AJAX documentation example by normalizing JavaScript formatting, adding clearer promise/async–await explanations and examples, and doing minor cleanup in existing snippets. Sequence diagram for form submission with fetch and promisessequenceDiagram
actor User
participant Browser
participant FetchAPI
participant Server
User->>Browser: Submit form
Browser->>Browser: submit event handler triggers
Browser->>FetchAPI: fetch(formAction, options)
note over Browser,FetchAPI: fetch returns a promise
FetchAPI->>Server: HTTP POST form data
Server-->>FetchAPI: HTTP response
FetchAPI-->>Browser: Promise resolved with Response
Browser->>Browser: await response.json()
note over Browser: json() returns a promise
Browser->>Browser: Update DOM with result
Browser-->>User: Show success or error message
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey - I've found 3 issues, and left some high level feedback:
- The indentation style within code blocks is now inconsistent (e.g., the first JS example is fully left-aligned while the later
<script>block is indented); consider standardizing indentation so the examples are easier to read and visually consistent. - In the
showPicsexample comments, the phrase "second object object" appears twice; it would be clearer to fix this typo to just "second object". - The
fetch('http://127.0.0.1:3000/airport/00A')example might be clearer and safer if changed to an HTTPS or relative URL, or explicitly noted as a local-development-only endpoint, to avoid confusion when readers try the example in different environments.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The indentation style within code blocks is now inconsistent (e.g., the first JS example is fully left-aligned while the later `<script>` block is indented); consider standardizing indentation so the examples are easier to read and visually consistent.
- In the `showPics` example comments, the phrase "second object object" appears twice; it would be clearer to fix this typo to just "second object".
- The `fetch('http://127.0.0.1:3000/airport/00A')` example might be clearer and safer if changed to an HTTPS or relative URL, or explicitly noted as a local-development-only endpoint, to avoid confusion when readers try the example in different environments.
## Individual Comments
### Comment 1
<location path="apit-ajax.md" line_range="159-161" />
<code_context>
- const images = await response.json(); // convert the loaded text JSON into a JavaScript object / array
-
- const name = images[1].name; // the 'name' property of the second object in the 'images' array
- const description = images[1].description; // 'description' property of the second object object in the 'images' array
- const address = images[1].address; // 'address' property of the second object object in the 'images' array
+ // simplified example without error handling
+ async function showPics() {
</code_context>
<issue_to_address>
**issue (typo):** Fix the repeated word "object" in these comments.
Both comments currently say "second object object"; update them to "second object".
```suggestion
const name = images[1].name; // the 'name' property of the second object in the 'images' array
const description = images[1].description; // 'description' property of the second object in the 'images' array
const address = images[1].address; // 'address' property of the second object in the 'images' array
```
</issue_to_address>
### Comment 2
<location path="apit-ajax.md" line_range="221" />
<code_context>
</script>
```
+
`fetch()` and `json()` functions both return a promise. Hence, you need use the await keyword to wait for the promise to be fulfilled. In this case that means that the data has been loaded.
</code_context>
<issue_to_address>
**issue (typo):** Add a missing "to" in "need use" for correct grammar.
Update the sentence to: "you need to use the await keyword."
```suggestion
`fetch()` and `json()` functions both return a promise. Hence, you need to use the await keyword to wait for the promise to be fulfilled. In this case that means that the data has been loaded.
```
</issue_to_address>
### Comment 3
<location path="apit-ajax.md" line_range="177" />
<code_context>
In newer versions of JavaScript, promise is increasingly used instead of [callback functions](extras.md#callback-functions-and-callback-hell). A promise is an object that ‘promises’ to return value.
The advantages of the promise are e.g. simpler syntax and easier error handling. For example, to submit a form using the fetch method:
+
</code_context>
<issue_to_address>
**issue (typo):** Add an article before "value" for grammatical correctness.
Change “promises to return value” to “promises to return a value” (or “some value”) for more natural English.
```suggestion
In newer versions of JavaScript, promise is increasingly used instead of [callback functions](extras.md#callback-functions-and-callback-hell). A promise is an object that ‘promises’ to return a value.
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+159
to
+161
| const name = images[1].name; // the 'name' property of the second object in the 'images' array | ||
| const description = images[1].description; // 'description' property of the second object object in the 'images' array | ||
| const address = images[1].address; // 'address' property of the second object object in the 'images' array |
There was a problem hiding this comment.
issue (typo): Fix the repeated word "object" in these comments.
Both comments currently say "second object object"; update them to "second object".
Suggested change
| const name = images[1].name; // the 'name' property of the second object in the 'images' array | |
| const description = images[1].description; // 'description' property of the second object object in the 'images' array | |
| const address = images[1].address; // 'address' property of the second object object in the 'images' array | |
| const name = images[1].name; // the 'name' property of the second object in the 'images' array | |
| const description = images[1].description; // 'description' property of the second object in the 'images' array | |
| const address = images[1].address; // 'address' property of the second object in the 'images' array |
| </script> | ||
| ``` | ||
|
|
||
| `fetch()` and `json()` functions both return a promise. Hence, you need use the await keyword to wait for the promise to be fulfilled. In this case that means that the data has been loaded. |
There was a problem hiding this comment.
issue (typo): Add a missing "to" in "need use" for correct grammar.
Update the sentence to: "you need to use the await keyword."
Suggested change
| `fetch()` and `json()` functions both return a promise. Hence, you need use the await keyword to wait for the promise to be fulfilled. In this case that means that the data has been loaded. | |
| `fetch()` and `json()` functions both return a promise. Hence, you need to use the await keyword to wait for the promise to be fulfilled. In this case that means that the data has been loaded. |
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request makes minor improvements to the
apit-ajax.mddocumentation, focusing on clarifying the use of promises and async/await in JavaScript. The changes mainly add explanatory content and improve code examples for better understanding.Documentation improvements:
fetchAPI, including a code snippet for submitting a form and handling responses with promises.fetch()andjson()return promises, and explained the need for theawaitkeyword when working with them.Minor formatting and cleanup:
Summary by Sourcery
Refine the AJAX documentation examples for clearer async/await usage and more consistent formatting.
Enhancements:
Documentation: