API 调用 ReactJS 后渲染

Question

Alexnm Shows the terribly disgusting architecture you must provide to simply have a server wait before an API call is complete before a server responds to a client.

He shows that you must first document each component of your entire app in a single, non-hierarchical flat list, then filter through every single component to see if a component has a API "data-requirement" for every single request , then store the output of that API request in a global redux object (also disgusting), then somehow pass that back to the object in the hopes it doesn't collide with other requests.

This is because ReactJS " lifecycle " hooks aren't actually lifecycle hooks at all, and is instead "fast and free" (and fun) .

I don't really care for any of these libraries, ES[xyz] syntaxes, and strange philosophies, but what I would like to do is return the an http response after and API call is made, ie

render() {
    // do an API call.
    // return a response.
}

I've seen uses if fetch(xyz).then(() => {}) and so many other colorful brackets and functions where I'm not totally sure where parameters go in or where they go out, and I can't seem to figure out how to simply hold off the next line of code before the previous line of code is complete. In then(() => {}) , which is syntaticly beautiful, I'm unable to return a value in any way at all. It's called a function , but I'm having difficulty achieving anything other than a side side-effect , and am unable to return a result of any kind.

Does anyone know how to make the render() , on it's own, wait for an API call?

Answer 1

As for philosophies - you may want to read more on flux patterns - which were architectural design principles conjoured at Facebook. The efforts were to handle global state in a Single Page Application, or SPA.

Per your current syntax issue - you may utilize promises with arrow functions. Promises were introduced in ES6 as a solution for handling asynchronous requests cleaner.

Using your example fetch(xyz).then(() => {}) one may execute requests synchronously by:

render() {
   Promise.resolve(fetch(xyz))
   .then((response) => {
      // Do something with this response - for example..
      if (response.data) {
         axios.get("http://google.com")
         .then((response) => {

         console.log(response.data);

         })
         .catch((err) => {

         // Do something with this error
         console.log(err);
         })
      }
   })
})

return (
    <div>

    </div>
)
}

I won't get into time complexities - but the above solution will fire off the fetch(xyz) request, then once that requet has completed - we fire off the next request. This is called promise chaining - more information may be found here: https://javascript.info/promise-chaining

If your goal is to simply make a call and use the data once the component has rendered, or mounted, you may do something cleaner and react friendly (non blocking) like the example below:

import React, {Component} from 'react';

class Example extends Component {
constructor(props) {
    super(props);

    this.state = {
      data: ''
    };
}

componentDidMount() {
   Promise.resolve(fetch(xyc))
   .then((response.data) => {
       this.setState({
         data:response.data
    });
   })
};

render() {
  const data = this.state

  return (
    {data} 
  )
}