Javascript 异步'；邮政'；

我是javascript新手，在前一行完成之前执行的一行代码有问题。据我所知，我需要创建一个回调函数，使最后一行等待前一行完成。我的程序接受用户输入并使用异步“post”将其发送到网站，然后返回一条消息。我最初的问题发生在我将以下两行代码放在一起时：

    req.send(JSON.stringify(payload))
    event.preventDefault();

preventDefault（）未等待send（）函数完成。我尝试过实现一个回调函数，但也遇到了一些问题

    function sendReq(callback){
        req.send(JSON.stringify(payload), function(){
            callback();
        });
    }
    sendReq(function(){
        event.preventDefault();
    });

如有任何建议，将不胜感激。这是我的全部代码，以防有帮助

    var apiKey = "appid=fa7d80c48643dfadde2cced1b1be6ca1";
    document.addEventListener('DOMContentLoaded', bindButtons);
    function bindButtons(){
        document.getElementById('dataSubmit').addEventListener('click', function(event){
            var req = new XMLHttpRequest();
            var payload = {longUrl:null};
            payload.longUrl = document.getElementById('inputData').value;
            req.open('POST', 'http://httpbin.org/post&' + apiKey, true);
            req.setRequestHeader('Content-Type', 'application/json');

            var response = JSON.parse(req.responseText);
            req.addEventListener('load',function(){
                if(req.status >= 200 && req.status < 400){
                    document.getElementById('outputData').textContent = response.longUrl;
                } 
                else 
                    console.log("Error in network request");
            });
            function sendReq(callback){
                req.send(JSON.stringify(payload), function(){
                    callback();
                });
            }
            sendReq(function(){
                event.preventDefault();
            });
        });
    }

var apiKey=“appid=fa7d80c48643dfadde2cced1b1be6ca1”；
document.addEventListener（'DOMContentLoaded'，bindButtons）；
函数bindButtons（）{
document.getElementById（'dataSubmit'）。addEventListener（'click'，函数（事件）{
var req=新的XMLHttpRequest（）；
var有效负载={longUrl:null}；
payload.longUrl=document.getElementById（'inputData'）。值；
请求打开（'POST'，'http://httpbin.org/post&“+apiKey，对）；
setRequestHeader（'Content-Type'，'application/json'）；
var response=JSON.parse（req.responseText）；
请求addEventListener（'load'，function（）{
如果（请求状态>=200&请求状态<400）{
document.getElementById（'outputData'）。textContent=response.longUrl；
} 
其他的
日志（“网络请求中的错误”）；
});
函数sendReq（回调）{
req.send（JSON.stringify（有效负载），函数（）{
回调（）；
});
}
sendReq（函数（）{
event.preventDefault（）；
});
});
}

您误解了回调的工作原理。请从recurial.com上查看这篇文章：

您不能在JavaScript[*]中“等待”——原因是：您的代码总是在响应事件（例如“DOMContentLoaded”、“click”或XHR的“load”）时运行，并且在当前运行的代码完成之前，不会再处理任何事件，也不会处理任何其他事件处理程序（通常通过从最外层的函数（事件处理程序）返回）

长时间运行的JS代码会使网页冻结，这就是为什么要求您首先编写一个异步请求——同步XHR会在代码等待服务器响应时导致网页冻结

为了避免冻结并仍能完成任务，您可以将代码构造为一系列回调：启动异步请求后，您从当前函数返回，并让系统在收到响应时回调。根据回调的定义，您可以使用响应的唯一时刻是在回调中

在您的例子中，指示响应可用的回调是

load

处理程序。您应该在那里移动

var response=JSON.parse（req.responseText）；

行

---

PS.

preventDefault（）

与您的情况完全无关，它不能用于“等待send（）函数完成”；它用于处理事件（例如

的

onsubmit

）以及希望在触发此事件时阻止浏览器默认执行的操作（在

示例中——好吧——提交表单）

PPS。在您了解了基本知识并开始编写连续有两次以上回调的代码后，请查找“承诺”

---

PPP。[*]忽略这句话，我添加它只是为了准确，因为这只会让你在这个阶段感到困惑：你不能在JavaScript中“等待”，除非你正在编写和/或使用当前不可用的）。

event.preventDefault（）

必须同步调用，因为默认处理程序将被同步调用。如果您试图覆盖默认处理程序，那么您将始终调用它。将其延迟到请求完成的目的是什么？我收到的错误是：

VM53:1 Uncaught SyntaxError:JSON输入意外结束没有收到响应消息。一位讲师告诉我，这是因为在发送（）之前执行了
event.preventDefault（）；
函数完成执行我正在尝试使用“Post”方法将用户输入发送到网站，并设置true标志使其异步。它需要发送内容类型为application/json。网站然后返回需要显示的数据。@deceze是正确的，而您的讲师不是。您需要询问您遇到的问题aving，不是关于你的导师错误地说的可能解决问题的解决方案。