Completé mi primer curso de JavaScript y ahora estoy siguiendo un curso en React. Creé un backend simple usando Express y MongoDB.
Creé una interfaz usando npx create-react-app, agregué axios para comunicarme con el backend y estoy usando antd para la interfaz de usuario. ¡Hasta aquí todo bien! El siguiente código funciona en mi computadora portátil con Windows 10 y Edge 94 para insertar un nuevo año en MongoDB usando una entrada simple:
Usos del cliente:
const onFinish = async (values) => { await api.createYear(values).then((res) => { console.log("onFinish", values); console.log(res); }); };Usos de la API:
import axios from 'axios' const api = axios.create({ baseURL: 'http://localhost:3000/api/v1', }) export const createYear = values => api.post(`/year`, values)El servidor (controlador) utiliza:
const Year = require('../models/year-model') createYear = (req, res) => { const body = req.body if (!body) { return res.status(400).json({ success: false, error: 'You must provide a year!', }) } const year = new Year(body) if (!year) { return res.status(400).json({ success: false, error: err }) } year .save() .then(() => { return res.status(201).json({ success: true, id: year._id, message: 'Year created!', }) }) .catch(error => { return res.status(400).json({ error, message: 'Year not created!', }) }) }El servidor (modelo) utiliza:
const mongoose = require('mongoose') const Schema = mongoose.Schema const yearSchema = new Schema( { year: { type: Number, required: true } }, { timestamps: false }, ) module.exports = mongoose.model('Year', yearSchema)Sin embargo, el mismo código no funciona en mi Samsung Galaxy S21 con Edge 93 y Chrome 94. Según lo que encontré hasta ahora, esto podría deberse a que este navegador no es compatible con async/await (función ES2017). ¿Esto probablemente podría ser resuelto por Babel?
Lamento que esta parte sea bastante vaga: la información que encontré es un poco abrumadora considerando mi experiencia limitada y todas las variables involucradas (versión de React, versión de Babel, complementos de Babel, Webpack, etc.). Con mucho gusto le proporcionaría más información si pudiera orientarme en la dirección correcta.
¿Alguien podría decirme si y cómo debo cambiar Babel o Webpack para hacer que async/await funcione en los navegadores móviles?
Si el problema es que async/await no funciona en esos navegadores, entonces creo que puede cambiar su archivo .babelrc para apuntar a navegadores más antiguos.
Sin embargo, para abordar los puntos de @ammar, tal vez vuelva a verificar que:
Crearía una página html simple que se vea así para asegurarme de que este es el problema.
<html> <head></head> <body> <div>TEST PAGE<div> <div id='test'></div> <script> function sleep(t) { return new Promise(function(resolve) { setTimeout(resolve, t); }); } (async function() { for (let x = 0; x < 1000; x++) { document.getElementById('test').innerHTML = x; await sleep(1000); } })(); </script> <body> </html>Yo lo atacaría así:
test.html