JavaScript - синхронизация ждать асинхронной операцию (сон)

Question

Я знаю, что это было предложен здесь много раз и много раз отвечали это не способ, как это должно быть сделано, но еще раз :)

Можно ли, каким-то образом вызывать функцию асинхронного вызова (например, вызов таймера/ajax), в основном распространять асинхронную задачу и синхронно ждать, пока она не закончится без использования 100% использования процессора и заблокированного браузера?

Простой ответ достаточно - да или нет. Если нет я не должен писать весь код в зависимости от асинхронной операции в «асинхронном способе» В противном случае, было бы лучше;)

представить себе что-то вроде:

updateCSS("someurl.css") 
 

 
function updateCSS(url) { 
 

 
    var css = getCachedResource(url); 
 

 
    css = css.replace(/regexp/gm, function(curUrl) { 
 
    base64 = atob(getCachedResource(curUrl)) 
 
    return "data:image;base64," + base64 
 
    }) 
 

 
} 
 

 
function getCachedResource(url) { 
 
    
 
    //... 
 
    
 
    if (cached) { 
 
    
 
    return cached 
 
    
 
    } else { 
 
    
 
    // doajax...  
 
    // watfor 
 
    
 
    return loaded 
 
    } 
 
    
 
}

Конечно, Я могу сделать это асинхронным, но код будет ... ужасным. Более того, я должен сделать async все функции, вызывающие эту функцию. Вы видите простое решение? Блокирование было бы проще всего сказать. не

Благодаря

Answer 1

Как уже отмечалось, короткий ответ нет: Javascript является однопоточных в большинстве сред, в которых он используется. Что вы, что есть случиться, чтобы сделать вашу обработку CSS в другой функции обратного вызова от getCachedResource()

Что-то вроде этого:

function updateCSS(url) { 
    getCachedResource(url, function(css) { 
     // process the css 
    }); 
} 

function getCachedResource(url, done) { 
    //... 
    if (cached) { 
     cachedCSS = ... 
     done(cachedCSS); 
    } else { 
     $.ajax(
     { 
      // ... 
      success: function(result) { 
       // Get the css from the response 
       done(css); 
      } 
      // ... 
     }); 
    } 
} 

Посмотрите на JQuery «отсроченные» объектов или Javascript обещает для более полный способ обработки обратных вызовов

Answer 2

Да.

Вы хотите, чтобы ваш код «спал» до тех пор, пока «асинхронная функция (такая как вызов таймера/ajax) не закончится без использования 100% процессора». Это именно то, что делает async/await.

Другие ответы и комментарии фиксируются на вашей фразе «синхронно ждать», что в JS означает блокирование, но я понимаю, что вы просто хотите избежать реорганизации своего кода «асинхронным способом». Вы хотите писать прямо, не структурируя все как многочисленные обратные вызовы.

Чтобы использовать async/await, вам сначала нужно принять обещания - пространство/время асинхронного JavaScript. Затем вам нужен современный браузер, например Chrome или Firefox Developer Edition, или передайте свой код с помощью Babel js.

Далее вы хотите посмотреть fetch, предлагающий обещание современный способ сделать ajax.

Теперь у вас есть все, что вам нужно. Вот пример, который работает в вышеупомянутых браузерах:

async function fetchy(...args) { 
 
    let response = await fetch(...args); 
 
    if (!response.ok) throw new Error((await response.json()).error_message); 
 
    return response; 
 
} 
 

 
async function showUser(user) { 
 
    let url = `https://api.stackexchange.com/2.2/users/${user}?site=stackoverflow`; 
 
    let item = (await (await fetchy(url)).json()).items[0]; 
 
    console.log(JSON.stringify(item, null, 2)); 
 

 
    let blob = await (await fetchy(item.profile_image)).blob(); 
 
    img.src = URL.createObjectURL(blob); 
 
} 
 

 
input.oninput = async e => await showUser(e.target.value); 
 
showUser(input.value);

<input id="input" type="number" value="918910"></input><br> 
 
<img id="img"></img> 
 
<pre id="pre"></pre>

FYI, fetchy мой помощник для здравомыслящего обработки fetch ошибок.

Answer 3

Так что просто подытожить ....

Ответ НЕТ.Невозможно заблокировать функцию или любой другой код и дождаться завершения операции async. Механизм для него напрямую не поддерживается виртуальной машиной JavaScript.

Особенно в среде браузера, где невозможно управлять циклом событий виртуальной машины JavaScript (как это возможно с узлом и как на самом деле работает библиотека «deasync»).

Это из-за параллелизм модели и обработки событий JavaScript, как указано здесь:

https://developer.mozilla.org/cs/docs/Web/JavaScript/EventLoop

Это не имеет ничего общего с фактически JavaScript однопоточен.

Также обратите внимание, что все вещи, такие как обещания и новые функции, такие как await/async, - это просто другой способ, как написать/управлять кодом для асинхронных задач. Это не так и никогда не будет полезно для превращения асинхронной синхронизации.

Так что не тратьте время, как я, пытаясь найти способ, как это сделать. Скорее потратите его, разработав асинхронный код;)

Answer 4

Просто ответ Ответ: нет.

Не думайте так. думать о производительности бэкэнд, а не делать на стороне клиента.

Answer 5

No, вы не можете этого сделать даже при использовании 100% -ного использования процессора или заблокированного браузера. Все было специально спроектировано, чтобы вы этого не делали.

Это делает все асинхронный код ядовитым, что означает, что весь код, вызывающий асинхронные функции (как обещание, так и обратный вызов), должен быть асинхронным.

Об ужасном коде: Promise цепей и async/await для спасения, они помогут вам написать асинхронный код с гораздо лучшим синтаксисом. Не бойтесь, используйте async/await, особенно если вы уже используете транспилер.

Answer 6

Можно ли, как-то, чтобы вызвать функцию асинхронной (например, таймер/АЯКС вызова), в основном общую задачу асинхронной и синхронно ждать, пока не закончится, не имея 100% загрузки процессора и заблокированного браузер?

Нет. Вы не можете «синхронно ждать» результата async в Javascript. Из-за того, что это однопоточный и управляемый событиями дизайн, он просто не сработает.

Поскольку большинство других разговоров/комментариев по этому вопросу носило концептуальный характер, я подумал, что предлагаю ответ о том, как вы практически решите свою конкретную проблему, используя подходящий асинхронный дизайн.

Javascript не предлагает возможность спать, пока заканчивается какая-то длительная деятельность. Таким образом, вы не можете создать свою функцию updateCSS(), чтобы иметь чисто синхронный интерфейс. Вместо этого вам нужно будет использовать асинхронные инструменты в Javascript для разработки интерфейса, который будет работать как в случае кэширования ресурса, так и при использовании ресурса по сети.

Обычный способ проектирования для этого - создать асинхронный интерфейс, и если ресурс будет кэшироваться, вы все равно будете обслуживать его через асинхронный интерфейс. Затем у вас есть один интерфейс, который может использовать вызывающий, и этот интерфейс всегда работает, будет ли кешированный ресурс или нет. Это требует, чтобы вызывающий абонент использовал асинхронный интерфейс.

Практически, вы можете создать как этот getCachedResource():

function getCachedResource(url) { 
    //... 
    if (cached) { 
    // returns a promise who's resolved value is the resource 
    return Promise.resolve(cached); 
    } else { 
    // returns a promise who's resolved value is the resource 
    return doAjax(...); 
    } 
} 

Здесь getCachedResource() всегда возвращает обещание, будет ли в кэше значение или нет. Таким образом, абонент всегда использует интерфейс обещания, как это:

getCachedResource(...).then(function(result) { 
    // use the result here 
}); 

Если результат происходит в кэше, то .then() обработчик будет вызван немедленно (на следующем такте). Если результат будет получен по сети, обработчик .then() будет вызываться, как только будет доступен результат. Вызывающему не нужно беспокоиться о том, где и как был восстановлен ресурс - у них есть один интерфейс для его получения.

В функции updateCSS() вы должны будете разработать для использования асинхронного интерфейса в getCachedResource(). Поскольку ваш текущий дизайн использует синхронный обратный вызов в css.replace(), вам придется переосмыслить это немного, чтобы соответствовать асинхронному поиску. Вот один из способов, как это сделать.

function updateCSS(url) { 
    return getCachedResource(url).then(function(css) { 
     // preflight the replacements we need to do so we know what to fetch 
     var urls = []; 
     css.replace(/regexp/gm, function(curUrl) { 
      urls.push(curUrl); 
     }); 
     // now load all the resources 
     return Promise.all(urls.map(getCachedResource)).then(function(resources) { 
      // now have all the resources, in proper order 
      var index = 0; 
      css = css.replace(/regexp/gm, function(curUrl) { 
       return resources[index++]; 
      }); 
      // final resolved value is the fully loaded css 
      return css; 
     }) 
    }); 
} 

Схема здесь, чтобы запустить фиктивный .replace(), не держать результат, чтобы создать список URL-адресов, которые необходимо загрузить. В зависимости от вашего регулярного выражения это также можно сделать с помощью .match() или .exec(). Затем, как только у вас появится список URL-адресов, вы получите все. Когда у вас есть все они, вы можете запустить .replace() по-настоящему, потому что у вас есть ресурсы, доступные для использования в синхронном обратном вызове .replace().

Один не может затем использовать это так:

updateCss(someCSSURL).then(function(css) { 
    // use the CSS here 
}).catch(function(err) { 
    // process error here 
});