Image Search App using unsplash API in ReactJS -3

Photo by todd kent on Unsplash

Welcome to part-3 to the series. You can find part-2 here. We will start from where we left in part-2.

The network request in part-2 using axios, is an async request. It is because it will take sometime to reach unsplash and get our list of images.

The axios request always returns us a promise. Now, there is an old way to get it using the .then function. But we will use the new and more efficient async-await syntax.

So, we update our onSearchSubmit function by adding async in-front of it. Next, we add await in-front of the axios.get method, which actually will cause the api call and will take sometime.

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

        console.log(response);
    }

Now, when we search for any term, we will get an object returned by unsplash api. We are storing that only in response variable and then console logging it.

Unsplash result

You can read the rest of the blog from my blog site in the below link.

The Web Dev

This concludes part-3 of the series. We are also done with version 1 of our web-app.

But we will also have a version 2, which will have these images display in a nice way. You can find the last part-4 here.