0
63
Vistasjavascript asíncrono esperar no esperar
Aquí están las funciones que tengo.
async function check_saved_url() { $.get("https://ipinfo.io/json", function (response) { current_ip = response.ip; location_here = response.country; var ajax_get_url_prefix = base_url + 'getDomain.php?ip='; var key_ip = current_ip + '@@@' + domain_permanent; var url = ajax_get_url_prefix + key_ip; $.get(url, function(data, status) { console.log("Data: " + data + "\nStatus: " + status); if (data.includes('0 results')) { return 'unknown'; } else { return data; } }); }, "jsonp"); } const func1 = async() => { return await check_saved_url(); } const func2 = async() => { let domain_preference = ''; domain_preference = await func1(); console.log("domain_preference: ",domain_preference); } func2();Este método es de esta respuesta .
Como puede ver, hay dos jquery ajax para obtener datos del servidor.
El problema es que func1 y func2 nunca esperan hasta check_saved_url devuelva el valor.
Esto es lo que veo en la consola.
La línea roja superior es la salida de func2 , que debe esperar hasta que se ejecute check_saved_url , cuyo resultado son los 2 círculos siguientes.
No estoy seguro de por qué esto persiste y las horas de copiar respuestas de todas partes no me ayudaron.
3 Respuestas
Responde la pregunta0
Probablemente necesite desarrollar su comprensión de las promesas y cómo funciona JavaScript asíncrono un poco.
Si tiene que usar jQuery, podría prometer el método jQuery $.ajax (¿que parece usar una versión muy antigua de la API de promesa?), y luego usarlo con construcciones JS modernas como async / await .
const pGet = (url, dataType = 'jsonp') => new Promise((success, error) => $.ajax({url, dataType, success, error})) const IP_URL = 'https://ipinfo.io/json' const PREFERENCE_URL_PREFIX = 'https://www.example.com/getDomain.php?ip=' const go = async () => { try { const { ip } = await pGet(IP_URL) const preference = await pGet(`${PREFERENCE_URL_PREFIX}${ip}`) //do something with the preference } catch(err) { // handle errors } } go() <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Si no tiene que usar jQuery, lo evitaría y usaría la API de recuperación proporcionada por los entornos de host modernos.
const IP_URL = 'https://ipinfo.io/json' const PREFERENCE_URL_PREFIX = 'https://www.example.com/getDomain.php?ip=' const go = async () => { try { const { ip } = await (await fetch(IP_URL)).json() const preference = await fetch(`${PREFERENCE_URL_PREFIX}${ip}`) //do something with the preference } catch(err) { // handle errors } } go() <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>0
Debe devolver una Promise de check_saved_url . Dentro de Promise, debe usar resolve para reemplazar return . También puede usar reject(new Error("error")) si hubo un error.
async function check_saved_url() { return new Promise((resolve, reject) => { $.get("https://ipinfo.io/json", function (response) { current_ip = response.ip; location_here = response.country; var ajax_get_url_prefix = base_url + 'getDomain.php?ip='; var key_ip = current_ip + '@@@' + domain_permanent; var url = ajax_get_url_prefix + key_ip; $.get(url, function(data, status) { console.log("Data: " + data + "\nStatus: " + status); if (data.includes('0 results')) { // Instead of return, use resolve() //return 'unknown'; resolve('unknown'); // You can also pass an error with `reject(new Error("error"))` } else { // Instead of return, use resolve() //return data; resolve(data); } }); }, "jsonp"); }); } const func1 = async() => { return await check_saved_url(); } const func2 = async() => { let domain_preference = ''; domain_preference = await func1(); console.log("domain_preference: ",domain_preference); } func2(); Puedes leer más sobre promesas en MDN
0
check_saved_url no devuelve ninguna promesa ni $.get devuelve una promesa. Necesitas envolverlo todo en una promesa
async function check_saved_url() { return new Promise((resolve, reject) => { $.get("https://ipinfo.io/json", function (response) { current_ip = response.ip; location_here = response.country; var ajax_get_url_prefix = base_url + 'getDomain.php?ip='; var key_ip = current_ip + '@@@' + domain_permanent; var url = ajax_get_url_prefix + key_ip; $.get(url, function(data, status) { console.log("Data: " + data + "\nStatus: " + status); if (data.includes('0 results')) { resolve('unknown'); } else { resolve(data); } }) .fail(reject); }, "jsonp") .fail(reject); }) }limpiar el código
Para tener un código más limpio y reutilizable, puede envolver $.get en una Promise
async function async_get(url) { return new Promise((resolve, reject) => { const jqxhr = $.get(url); jqxhr.done(() => resolve({ json: jqxhr.responseJSON, status: jqxhr.status })); jqxhr.fail(() => reject(jqxhr)); }) } async function check_saved_url() { const { json: response } = await async_get("https://ipinfo.io/json"); current_ip = response.ip; location_here = response.country; var ajax_get_url_prefix = base_url + 'getDomain.php?ip='; var key_ip = current_ip + '@@@' + domain_permanent; var url = ajax_get_url_prefix + key_ip; const { json: data, status } = await $.get(url); console.log("Data: " + data + "\nStatus: " + status); return data.includes('0 results') ? 'unknown' : data; }