如何在 JavaScript 中强制程序等待 HTTP 请求完成？

Question

JavaScript 有没有办法将 HTTP 请求发送到 HTTP 服务器并等待服务器响应回复？我希望我的程序等待服务器回复，而不是执行此请求之后的任何其他命令。如果HTTP服务器宕机了，我希望在超时后重复HTTP请求，直到服务器回复，然后程序可以继续正常执行。

有什么想法吗？

先感谢您， 萨纳西斯

Answer 1

编辑：同步请求现在已弃用；您应该始终以异步方式处理 HTTP 请求。

XmlHttpRequest 的 open() 有第三个参数，旨在表明您想要异步请求（因此通过 onreadystatechange 处理程序处理响应）。

因此，如果您希望它是同步的（即等待答案），只需为第三个参数指定 false 即可。
在这种情况下，您可能还需要为您的请求设置一个有限的timeout属性，因为它会阻止页面直到接收。

这是一个一体化示例函数对于同步和异步：

function httpRequest(address, reqType, asyncProc) {
  var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  if (asyncProc) { 
    req.onreadystatechange = function() { 
      if (this.readyState == 4) {
        asyncProc(this);
      } 
    };
  }
  req.open(reqType, address, !(!asyncProc));
  req.send();
  return req;
}

您可以这样调用：

var req = httpRequest("http://example.com/aPageToTestForExistence.html", "HEAD");  // In this example you don't want to GET the full page contents
alert(req.status == 200 ? "found!" : "failed");  // We didn't provided an async proc so this will be executed after request completion only

Answer 2

您可以执行同步请求。 jQuery 示例：

$(function() {
    $.ajax({
       async: false,
       // other parameters
    });
});

您应该查看 jQuery 的 AJAX API。我强烈建议使用像 jQuery 这样的框架来做这些事情。手动执行跨浏览器 ajax 真的很痛苦！

Answer 3

您可以使用 XMLHttpRequest 对象来发送您的请求。发送请求后，您可以检查readyState属性来识别当前状态。 ReadyState 将有以下不同的状态。

• 未初始化 - 尚未开始加载
• 正在加载 - 正在加载
• 交互 - 已加载足够并且用户可以与其交互
• 完成 - 完全加载

例如：

xmlhttp.open("GET","somepage.xml",true);
xmlhttp.onreadystatechange = checkData;
xmlhttp.send(null);

function checkData()
{
    alert(xmlhttp.readyState);
}

希望这会有所帮助

Answer 4

对于现代浏览器，我将使用 fetch而不是 XMLHttpRequest。

async function job() {
  const response = await fetch("https://api.ipify.org?format=json", {}) // type: Promise<Response>
  if (!response.ok) {
    throw Error(response.statusText)
  }
  return response.text()
}


async function onCommit() {
  const result = await job()
  // The following will run after the `job` is finished.
  console.log(result)
}

• 获取语法

示例

<button onclick="onCommit()">Commit</button>
<script>
  function onCommit() {
    new Promise((resolve, reject) => {
      resolve(job1())
    }).then(job1Result => {
      return job2(job1Result)
    }).then(job2Result => {
      return job3(job2Result)
    }).catch(err => { // If job1, job2, job3, any of them throw the error, then will catch it.
      alert(err)
    })
  }

  async function testFunc(url, options) {
    // options: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
    const response = await fetch(url, options) // type: Promise<Response>
    if (!response.ok) {
      const errMsg = await response.text()
      throw Error(`${response.statusText} (${response.status}) | ${errMsg} `)
    }
    return response
  }

  async function job1() {
    console.log("job1")
    const response =  await testFunc("https://api.ipify.org?format=json", {})
    return await response.json()
  }

  async function job2(job1Data) {
    console.log("job2")
    console.log(job1Data)
    const textHeaders = new Headers()
    textHeaders.append('Content-Type', 'text/plain; charset-utf-8')
    const options = {"headers": textHeaders}
    const response = await testFunc("https://api.ipify.org/?format=text", options)
    // throw Error(`test error`) // You can cancel the comment to trigger the error.
    return await response.text()
  }

  function job3(job2Data) {
    console.log("job3")
    console.log(job2Data)
  }
</script>

Answer 5

为此，您可以在页面开始加载时立即在 javascript 中启动加载程序，然后您可以在请求完成或您的 dom 准备就绪时关闭它。
我想说的是，当页面加载开始时，启动加载程序。然后页面可以使用 ajax 进行多个同步请求，直到并且除非您没有得到响应，否则不要关闭 close loader。
在最终调用中收到所需的响应后，您可以关闭加载程序。

Answer 6

我在使用 Three.js 和 Google Closure 构建的游戏中也遇到了类似的情况。我必须加载 2 个资源，三个资源和 Closure 不允许我使这些资源同步。

最初，我天真地写了以下内容：

main() {

  ...
  var loaded=0;
  ...

  // Load Three geometry
  var loader = new THREE.JSONLoader();
  loader.load("x/data.three.json", function(geometry) {
    ...
    loaded++;
    });

   // Load my engine data
  goog.net.XhrIo.send("x/data.engine.json", function(e) {
    var obj = e.target.getResponseJson();
    ...
    loaded++;
    });

  // Wait for callbacks to complete
  while(loaded<2) {}

  // Initiate an animation loop
  ...
};

等待回调完成的循环永远不会结束，从循环 loaded 的角度来看，它永远不会递增。问题是回调在 main 返回之前不会被触发（至少在 Chrome 上）。

一种解决方案可能是让两个回调检查它是否是最后一个完成的，然后它们继续启动动画循环。

另一个解决方案 - 也许是对您所问问题的更直接的答案（如何在启动另一个加载之前等待每个加载） - 是嵌套回调，如下所示：

// Load Three geometry
var loader = new THREE.JSONLoader();
loader.load("x/data.three.json", function(geometry) {
  ...

   // Load my engine data
   goog.net.XhrIo.send("x/data.engine.json", function(e) {
     var obj = e.target.getResponseJson();
     ...

     // Initiate an animation loop
     ...

    });
  });
};

Answer 7

这是一个老问题，但想提供不同的看法。

这是一个异步函数，它创建一个承诺，当请求完成时，该承诺将使用 Http 对象进行解析。这允许您在使用 XMLHttpRequest 时使用更现代的 async/await 语法。

async sendRequest() {
    const Http = new XMLHttpRequest();
    const url='http://localhost:8000/';
    Http.open("GET", url);
    Http.send();

    if (Http.readyState === XMLHttpRequest.DONE) {
        return Http;
    }

    let res;
    const p = new Promise((r) => res = r);
    Http.onreadystatechange = () => {
        if (Http.readyState === XMLHttpRequest.DONE) {
            res(Http);
        }
    }
    return p;
}

用法

const response = await sendRequest();
const status = response.status;
if (status === 0 || (status >= 200 && status < 400)) {
    // The request has been completed successfully
    console.log(response.responseText);
} else {
    // Oh no! There has been an error with the request!
    console.log(`Server Error: ${response.status}`)
}

Answer 8

对于使用 axios 的用户，您可以将其包装在 async iife 中，然后await it：

(async () => {
  let res = await axios.get('https://example.com');

  // do stuff with the response
})();

---

注意，我在这里没有进行任何错误检查。