soy un principiante y estoy tratando de hacer mi primer proyecto de obtener datos de una API, pero me encontré con un error. Estoy tratando de obtener datos de la API de Riot con axios, el tutorial que estoy siguiendo no se encuentra con este error y no puedo encontrar una solución en ninguna parte. el error es: SyntaxError: identificador inesperado 'axios'. La llamada de importación espera exactamente un argumento.
código:
import axios from "axios"; const riot_key = "my-riot-key"; function searchForPlayer(summonerName) { const APICallString = `https://euw1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}?api_key=${riot_key}`; axios .get(APICallString) .then(function (response) { //SUCCESS console.log(response); }) .catch(function (error) { //ERROR console.log(error); }); } searchForPlayer(M4T789);Esto podría ser un error estúpido de mi parte, pero no puedo encontrarlo en ninguna parte, gracias de antemano.
este es el html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>League Summoner</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>League of Legends Summoner</h1> <script src="script.js"></script> </body> </html>Normalmente esperaría que esto proporcione el mensaje de error
SyntaxError no capturado: no se puede usar la declaración de importación fuera de un módulo
No está claro por qué está recibiendo un mensaje de error diferente. Posiblemente haya definido previamente una función de import en algún lugar de su código o esté probando en un navegador en el que no he visto este problema.
Aparte de eso, tienes dos problemas inmediatos.
import fuera de un módulo. Debe cargar su JS desde <script type="module">
Los navegadores no pueden buscar un módulo llamado axios , debe proporcionar una URL, no un nombre.
El tutorial que está siguiendo asume que está utilizando un entorno de desarrollo React típico con una cadena de herramientas para agrupar módulos TypeScript y/o ES6 durante el paso de compilación.
Evite los tutoriales dirigidos a plataformas que no está utilizando. Solo estarás confundido.
Considere cargar Axios usando un CDN ( como se describe en su documentación ) en lugar de un administrador de paquetes que no esté usando.
Considere no usar Axios en absoluto. Es una gran cantidad de código y su mayor beneficio (proporcionar una API consistente y basada en promesas para realizar solicitudes HTTP tanto en navegadores como en Node.js) se ha desvanecido debido a que los navegadores y Node.js tienen soporte nativo para el Obtener API .