I'm following a tutorial in react that has you fetch from the yelp API a few things i don't understand that i hope someone would be able to clarify.

1: they aren't using async/ await, shouldn't this be common practice in 2021?

2: i don't understand the point/use of the headers in relation to Authorization:Bearer this is a more secure way of passing the key? cant i pass the apiKey in the url?

3: there is no catch or error handling in this, why is that/ where would that be inserted if i were to implement that?

4: this tutorial has me using something called 'https://cors-anywhere.herokuapp.com/' i don't really understand the use for this. it has to do with creating a secure way of retrieving the API from my understanding? but if i wanted to deploy this project on netlify would i just remove that and pass in the normal api url to fetch from? or how would i refactor for production deployment?

At the end of the day im really just looking for some guidance on how this can be improved.

const { default: SearchBar } = require("../components/SearchBar/SearchBar");

const apiKey = 'some api key from yelp';

const Yelp = {
    searchYelp(term, location, sortBy) {
        return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
            headers: {
                Authorization: `Bearer ${apiKey}`
            },
        }).then((response) => {
            return response.json()
        }).then((jsonResponse) => {
            if (jsonResponse.businesses) {
                return jsonResponse.businesses.map((business) => {
                    return {
                        id: business.id,
                        imageSrc: business.image_url,
                        name: business.name,
                        address: business.location.address1,
                        city: business.location.city,
                        state: business.location.state,
                        zipCode: business.location.zip_code,
                        category: business.categories.title,
                        rating: business.rating,
                        reviewCount: business.review_count,
                    }
                })
            }
        })
    }
}

export default Yelp

CodePudding user response：

1. Async/Await is syntactic sugar for the .then() calls that you have in your example. They do the exact same thing. Also, await can currently only be used in an async function. Top level await is supposed to come out soon, but it isn't here yet.

2. The Authorization header is being required by the api that you are calling. "Bearer" is a very common prefix to a token passed through this header. It is not more secure, but a url has a max length of 2048 chars. It is possible that you would not be able to pass a token through the url alone.

3. Fetch does not normally throw errors, even if they occur. Generally, you can check the response status code. This is a little bit old, but it does explain things a bit. https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

4. CORS is a standard that is implemented by browsers and servers to prevent unauthorized script access to a url. You must allow servers on a different domain to consume your api by setting a CORS policy. See: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS