javascript - javascript 中的 promise 会干扰其余代码

Question

我有以下 js 文件，我正在尝试创建一个包含今天和昨天的 csv 数据的表。我之前在竞争条件方面遇到了麻烦，所以现在尝试使用 promise ，并最终得到以下代码，但它 1) 似乎不起作用 2) 不允许所有其他代码工作，例如我的日历启动 $(document).ready(function() { $('#datetimepicker1').datetimepicker(); });

.js 文件:

$(document).ready(function() { $('#datetimepicker1').datetimepicker(); });
var p = function(url){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: url,
            crossDomain:true,
            dataType:"jsonp",
            'success': function(response){ 
          $(".domain").append(response.results.collection1[0].date);
                var collection = response.results.collection2;
                for (var i = 1; i < collection.length; i++){  
                    $(".table-group1").append('<tr> <td>' + collection[i].domain.href + '</td>'+'<td>' + collection[i].dns + '</td>'+'<td> ' + collection[i].mail + '</td>'+'<td> ' + collection[i].web + '</td> </tr>');
                }
            resolve(collection);
            },
            'error': function(e){
                reject(e);
            }
        })
    })
}    
p(url_today).
    then(function (collection_today) {
        return p(url_yesterday).then(function(collection_yesterday){
            $(".table-group1").append('<tr><td>' + collection_today.domain.href + '</td>'+'<td>' + collection_today.dns + '</td>'
                +'<td> ' + collection_today.mail + '</td>'+'<td> ' + collection_today.web + '</td> <td>' + collection_yesterday.domain + '</td> <td>'
                + collection_yesterday.dns + '</td><td>'+ collection_yesterday.mail + '</td> <td>'+ collection_yesterday.web + '</td> </tr>');
        })
    })
    .catch(function(e){
        console.error(e);
    });

html 文件:

    <!-- Calendar -->  

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Table -->

<div class= "container_1">
<div class="panel panel-info">

<table class="table" border="1">
<th class="panel-heading"> </th>
<tr class="domain"> </tr>
<tr class="table-group1">
</tr> 
</table>

Answer 1

This doesn't address the underlying problems with the logic or best practice use of Promises etc. It addresses the issue of including the code stopping other code from working

您遇到问题的原因是代码中存在语法错误...例如第 15 行需要 , - js lint 不喜欢你最后的 then 代码 -

如果将其更改为以下内容

        $(".table-group1").append('<tr><td>' + collection_today.domain.href + '</td>' + '<td>' + collection_today.dns + '</td>' +
            '<td> ' + collection_today.mail + '</td>' + '<td> ' + collection_today.web + '</td> <td>' + collection_yesterday.domain + '</td> <td>' +
            collection_yesterday.dns + '</td><td>' + collection_yesterday.mail + '</td> <td>' + collection_yesterday.web + '</td> </tr>');

查看以 + 结尾的行并继续下一行，而不是以 + 开头的行

另一个问题是代码将立即运行 - 可能在 DOM 准备好之前

看起来所有代码都应该包含在 $(document).ready 中，而不仅仅是第一行