Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

134
Views
Refactoring a fetch request with async/await and some clarity

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
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

  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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!