[Udemy] searching xx -2

이 네트워크 요청은 비동기식 요청이다.

• Whenever we make a request with axios returns an object called a promise. A promise is a request that will essentially give us a little notification when some amount of work like a network request is completed in order to get a little tap on the shoulder when the request is completed. We trained on '.then' function like so this does it then function is going to be called.

• .then ()

  :usually arrow func. (.then(()=>{})
  So, this little arrow function we're putting in right there is essentially a callback that will be invoked with whatever data that we got back from the unsplash API

• async await

  :We have the promise space syntax that uses a then statement that will be called anytime that request gets completed.
  Alternatively we can use this async await syntax.
  Put that async keyword in front of the method name you find whatever is returning or whatever is taking some time to resolve in this case it's the network request with .
  "axios.get " and we put the await keyword in front of that and then whatever gets returned from this entire statement right here.
  We will assign to some variable as we usually do and then we can freely work with that variable later.

<App.js>

first method ; .then()

(...)

class App extends React.Component {

axios.get('https://api.unsplash.com/search/photos', {
        params: { query: anything },
        headers: {
          Authorization:
            'Client-ID Rw6et1-um043INr5rEgB3uiIeQHs_6LlF5UMrDcEUws',
        },
      })
      
      // let's refer to that data as a response and we'll just console log that response and just see what's happens now. 
      .then(response => {
        console.log('response', response.data.results);
      })
      
     
  }
  render() {
    return (
      <div className="ui container" style={{ marginTop: '10px' }}>
        <SearchBar onSubmit={this.onSearchSubmit} />
      </div>
    );
  }
}
export default App;

<App.js>

second method ; async await

class App extends React.Component {

  async onSearchSubmit(anything) {
    const response = await axios.get('https://api.unsplash.com/search/photos', {
      params: { query: anything },
      headers: {
        Authorization: 'Client-ID Rw6et1-um043INr5rEgB3uiIeQHs_6LlF5UMrDcEUws',
      },
    });

    console.log('response', response.data.results);
  }
  render() {
    return (
      <div className="ui container" style={{ marginTop: '10px' }}>
        <SearchBar onSubmit={this.onSearchSubmit} />
      </div>
    );
  }
}
export default App;