AJAX requests are commonly used in front-end development to fetch data from a server without requiring a page refresh. However, when rendering components that depend on this data, it's important to ensure that the data has been received before attempting to render the component.
In this article, we'll explore several techniques for waiting for AJAX responses and rendering components only after the data is available.
Using Promises
One common approach is to use Promises, which provide a clean, easy-to-read syntax for handling asynchronous operations. Here's an example:
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
--------
---- ------------
-------- ---- -- -------------
---
---
-
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ----- ---- --
-
------------------- -
--------------------- -- --------------- ---- ----
-
-------- -
-- ---------------- --- ----- -
------ ----------------------
-
------ -----------------------------
-
-In this code, fetchData returns a Promise that resolves with the data returned by an AJAX request. The componentDidMount method of MyComponent calls fetchData and waits for the Promise to resolve before updating the component's state with the received data.
The component's render method checks whether the data is still null, indicating that the Promise has not yet resolved. If so, it displays a "Loading..." message. Otherwise, it renders the received data.
Using Async/Await
Another way to handle Promises is with the async and await keywords. This provides a more concise syntax that can make code easier to read and reason about. Here's an example:
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
--------
---- ------------
-------- ---- -- -------------
---
---
-
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ----- ---- --
-
----- ------------------- -
----- ---- - ----- ------------
--------------- ---- ---
-
-------- -
-- ---------------- --- ----- -
------ ----------------------
-
------ -----------------------------
-
-In this code, the componentDidMount method is marked async, which allows it to use the await keyword to wait for the fetchData Promise to resolve. Once the data is available, it updates the component's state as before.
Using a Higher-Order Component
Another technique is to use a Higher-Order Component (HOC) that waits for the AJAX response and only renders the child component once the data is available. Here's an example:
-- -------------------- ---- -------
-------- -------------------------- ---------- -
------ ----- ------- --------------- -
------------------ -
-------------
---------- - - ----- ---- --
-
------------------- -
--------------------- -- --------------- ---- ----
-
-------- -
-- ---------------- --- ----- -
------ ----------------------
-
------ ----------------- --------------- ---------------------- ---
-
--
-
----- ----------- ------- --------------- -
-------- -
------ -----------------------------
-
-
----- ------------------- - --------------------- -- -- -
------ --- --------------- -- -
--------
---- ------------
-------- ---- -- -------------
---
---
---In this code, the withData function returns a new component that waits for the AJAX response and passes the received data to the child component. The child component is passed as the first argument to withData, and the fetchData function is passed as the second argument.
The resulting component, MyComponentWithData, renders a "Loading..." message until the data is available. Once it is, it renders MyComponent with the received data.
Conclusion
Waiting for AJAX responses before rendering components is an important aspect of front-end development. By using Promises, async/await, or Higher-Order Components, you can ensure that your components have access to the required data before attempting to render them.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29234