Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Refactor AJAX example for improved clarity and consistency#27

Open
JuhQ wants to merge 2 commits into
ilkkamtk:mainilkkamtk/JavaScript-english:mainfrom
JuhQ:patch-16JuhQ/JavaScript-english:patch-16Copy head branch name to clipboard
Open

Refactor AJAX example for improved clarity and consistency#27
JuhQ wants to merge 2 commits into
ilkkamtk:mainilkkamtk/JavaScript-english:mainfrom
JuhQ:patch-16JuhQ/JavaScript-english:patch-16Copy head branch name to clipboard

Conversation

@JuhQ
Copy link
Copy Markdown
Contributor

@JuhQ JuhQ commented Mar 23, 2026

This pull request makes minor improvements to the apit-ajax.md documentation, 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:

  • Added an introductory explanation and example for using promises with the fetch API, including a code snippet for submitting a form and handling responses with promises.
  • Clarified that both fetch() and json() return promises, and explained the need for the await keyword when working with them.
  • Added a code example demonstrating the use of async/await and try...catch for error handling with the Fetch API.

Minor formatting and cleanup:

  • Removed an unnecessary blank line in a code example for updating image attributes.

Summary by Sourcery

Refine the AJAX documentation examples for clearer async/await usage and more consistent formatting.

Enhancements:

  • Normalized indentation and formatting in JavaScript code examples, including the asynchronous AJAX request and image update script.

Documentation:

  • Clarified promise-based fetch usage with an HTML form example and explanation that both fetch() and json() return promises, requiring await.
  • Expanded the async/await section with a try...catch example for handling Fetch API errors.

@sourcery-ai
Copy link
Copy Markdown

sourcery-ai Bot commented Mar 23, 2026

Reviewer's Guide

Refactors 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 promises

sequenceDiagram
    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
Loading

File-Level Changes

Change Details Files
Normalize JavaScript code formatting in asynchronous example for readability and consistency.
  • Remove unnecessary indentation in script, moving all top-level statements to the left margin
  • Keep logic of synchronousFunction and asynchronousFunction intact while reformatting braces and spacing
  • Ensure console logging order example remains unchanged while being easier to read
apit-ajax.md
Improve async/await image loading example and related script formatting.
  • Re-indent the showPics function body and closing brace for consistent two/four-space style
  • Align variable declarations for image metadata and DOM update calls for clarity
  • Remove a stray blank line inside the script example while keeping behavior identical
apit-ajax.md
Clarify promise usage with fetch, including form submission and async/await error-handling examples.
  • Add or emphasize introductory explanation around promises and fetch-based form submission in the HTML+JS example
  • Add spacing and blank-line adjustments around form+script example for readability
  • Explicitly explain that both fetch() and json() return promises, motivating the need for await
  • Introduce or refine an async/await example with try...catch, with a small formatting tweak to the try block
apit-ajax.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 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.
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>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread apit-ajax.md
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
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread apit-ajax.md
</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.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread apit-ajax.md Outdated
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Morty Proxy This is a proxified and sanitized view of the page, visit original site.