Estoy siguiendo un tutorial en reaccionar que le permite obtener de la API de Yelp algunas cosas que no entiendo y que espero que alguien pueda aclarar.
1: no están usando async/await, ¿no debería ser una práctica común en 2021?
2: no entiendo el punto/uso de los encabezados en relación con la Autorización: Bearer , ¿esta es una forma más segura de pasar la clave? ¿No puedo pasar la apiKey en la URL?
3: no hay captura o manejo de errores en esto, ¿por qué es eso / dónde se insertaría eso si tuviera que implementar eso?
4: este tutorial me hace usar algo llamado 'https://cors-anywhere.herokuapp.com/' Realmente no entiendo el uso de esto. tiene que ver con la creación de una forma segura de recuperar la API de mi entendimiento? pero si quisiera implementar este proyecto en netlify, ¿simplemente lo eliminaría y pasaría la url de api normal para buscar? o ¿cómo refactorizaría para el despliegue de producción?
Al final del día, solo estoy buscando alguna orientación sobre cómo se puede mejorar esto.
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 YelpAsync/Await es azúcar sintáctico para las llamadas .then() que tiene en su ejemplo. Hacen exactamente lo mismo. Además, await actualmente solo se puede usar en una función asíncrona. Se supone que la espera de nivel superior saldrá pronto, pero aún no está aquí.
La API a la que está llamando requiere el encabezado de autorización. "Bearer" es un prefijo muy común para un token que se pasa a través de este encabezado. No es más seguro, pero una URL tiene una longitud máxima de 2048 caracteres. Es posible que no pueda pasar un token solo a través de la URL.
Fetch normalmente no arroja errores, incluso si ocurren. En general, puede verificar el código de estado de respuesta. Esto es un poco viejo, pero explica un poco las cosas. https://www.tjvantoll.com/2015/09/13/buscar-y-errores/
CORS es un estándar que implementan los navegadores y servidores para evitar el acceso no autorizado de secuencias de comandos a una URL. Debe permitir que los servidores en un dominio diferente consuman su API configurando una política CORS. Ver: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS