Quiero importar una biblioteca como axios directamente desde una URL y usarla.
No quiero agregarlo como un script que agrega axios al objeto de la window ( como se muestra a continuación ).
<body> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="./app.js" type="module"></script> </body> console.log(window.axios !== undefined); // true const { data } = await axios.get( "https://jsonplaceholder.typicode.com/users/1" ); console.log(data.username); // Bret Quiero algo como esto en el que pueda importar axios directamente desde una URL.
<body> <script src="./app.js" type="module"></script> </body> import axios from "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"; console.log(window.axios !== undefined); const { data } = await axios.get( "https://jsonplaceholder.typicode.com/users/1" ); console.log(data.username);Obviamente, esto no funciona porque el código JavaScript entregado por el CDN anterior no está diseñado para usarse con módulos ES. ¿Hay una solución?
Puedes usar Skypack:
import axios from 'https://cdn.skypack.dev/axios'; const { data } = await axios.get( "https://jsonplaceholder.typicode.com/users/1" ); console.log(data.username);Elimine el enlace CDN de jsDelivr.
El archivo JS proporcionado por CDN (como el suyo: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js ) no proporcionará una exportación de módulo ES6. Descargue y busque "exportar por defecto", no se encontrará nada.
Si usa npm, puede agregar axios a sus dependencias y usar axios import axios from 'axios'
Si aún desea usar el módulo ES con CDN, este artículo puede ser útil.
No necesita importar axios en app.js porque ya se ha importado en su html, simplemente elimine la importación y todo funcionará
async function fetchData() { const { data } = await axios.get( "https://jsonplaceholder.typicode.com/users/1" ); console.log(data); } fetchData();