控制IF语句和异步函数的流程

问题描述 投票:3回答:6

我的代码结构如下:

IF (something) {
..stuff
..Asynchronous Function Call
}
ELSE (something) {
..stuff
..Asynchronous Function Call
}
..more stuff

假设满足IF条件,代码执行'stuff',然后进入异步函数调用。在等待异步函数调用完成的假设下,是否可以简单地执行调用但是退出IF语句并在同一时间执行“更多东西”?

要么

它是否完成等待异步函数调用完成执行,然后继续使用'更多东西'作为普通的IF语句块。

在前面的例子中,关于如何确保异步函数调用在退出IF块之前完成的任何建议?

**注意,我在异步函数调用中包含了更多内容,以确保调用在移动之前完成,但我觉得这是非常糟糕的编程,因为如果我有50个ELIF,我将不得不复制粘贴代码50时间,而不是只是把它放在IF声明的末尾。

非常感谢您提供的任何帮助!

javascript node.js asynchronous structure
6个回答
1
投票

使用JavaScript Promises可以轻松地解决这个问题。请查看以下链接:

JavaScript Promises的基本思想是使用可以按特定顺序执行的异步调用。像这样:

$.when(GET_PRODUCTS).then(
 IF_SUCCESS DO THIS
 ELSE DO THAT
).fail(
 SHOW MESSAGE
 CLEAN EVERYTHING BECAUSE SOMETHING WRONG HAPPENED
).done(
 CLEAN EVERYTHING BECAUSE EVERYTHING WENT OKAY
)

有了它,您可以创建更易于维护的代码。一开始就抓住它并不容易,但试一试,会给你带来很多麻烦!


0
投票

它是否完成等待异步函数调用完成执行,

不,这不是“异步”的意思。同时,它不会等待。该功能将在未来的某个时间点运行并完成;执行流程立即继续到下一行。


0
投票

关于你给定的代码,more stuff在异步函数发生时发生。它不等待异步函数返回结果。

基于你的“node.js”标签,我假设你的问题是关于服务器上的异步调用。但是,您可以将行为与客户端AJAX调用进行比较。

说你有这个:

var nav = document.getElementById('nav');

function async(params) {
    var xhr = new XMLHttpRequest();

    // set up your request

    xhr.onreadystatechange = function() {
        // some conditions, and then on success:
        nav.style.color = 'black';
    };

    xhr.open('GET', 'resource.php'+params, true);

    // send your request
}

if ( /* condition */ ) {
    async( /* some parameter */ );
} else {
    nav.style.color = 'red';
}

如果你以任何一种方式运行上面的代码,你的#nav元素的颜色将首先设置为红色,但如果异步请求返回成功响应,则#nav元素的颜色将为黑色。这是一个非常简单且可能不切实际的示例,但它可以很容易地进行测试以确认是,异步调用将异步发生。


0
投票

像其他人说的那样你可以使用Promise,async.js,step.js等来控制流量。如果在启用--harmony的情况下使用最新版本的节点,也可以使用生成器。


0
投票

我保证会以正确的方式向您展示。如果条件是您正在寻找的,首先是异步。其次,你需要一个完整的例子。您必须修改AJAX请求的URL并设置一些服务器代码以便为您提供响应。我将在最后提供一个基线PHP文件。

如此有效:如果我的if条件对JavaScript解析器来说太长了怎么办? JavaScript使用promises。我不会全力以赴,我的目标是提供基线。在脚本结束时,您会注意到成功或失败级别。此脚本需要两个异步if条件。此外,我没有廉价/静态/脆弱,而是将script元素保留在它所属的head元素中。最后确保更改HTTP查询并在服务器上确认它,无需生成冗余文件。浏览器兼容性很好,除了不支持IE11但是我只遇到非常具体的用例需要这样做,所以如果你考虑将这个代码用于非技术用户,我强烈建议你重新考虑你对给定问题的初始方法。

<head>
<script defer="true" type="application/javascript">
//<![CDATA[
function request(method,url)
{
 return new Promise(function(resolve, reject)
 {
  var req = new XMLHttpRequest();
  req.open(method,url);
  req.withCredentials = true;
  req.onerror = function() {reject(Error('Network error.'));};
  req.onload = function() {if (req.status == 200) {resolve(req.response);} else {reject(Error(new Object({'response':req.response,'status':req.statusText})));}};
  req.send();
 });
}

function aysn_if()
{
 request('get','https://www.example.com/test.php?t=1').then(function(response)
 {
  console.log('Success, level one if!', response);
  request('get','https://www.example.com/test.php?t=2').then(function(response)
  {
  console.log('Success, level two if!', response);
  },
  function(error)
  {
   console.error('Failed, second level.', error);
  });
 },
 function(error)
 {
  console.error('Failed, first level.', error);
 });
}

document.addEventListener('DOMContentLoaded', function (e) {aysn_if();},false);
//]]>
</script>
</head>

PHP

<?php
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: '.((isset($_SERVER['HTTP_ORIGIN'])) ? $_SERVER['HTTP_ORIGIN'] : '*'));
//JUST for testing, don't send this stuff outside of test environments!
ksort($_SERVER);
print_r($_SERVER);
?>

-1
投票

你首先选择的是发生了什么。

您不必复制/粘贴N次。只需将“more stuff”放入函数中,并将该函数传递给所有异步回调。回调可以在完成正常处理时调用“更多东西”功能。

© www.soinside.com 2019 - 2024. All rights reserved.