JavaScript 中的异步操作：cy 等待 xhr

在 JavaScript 中，许多操作都是异步的，比如像 Ajax 请求一样的 XHR（XMLHttpRequest）操作。在使用 XHR 发送请求时，我们通常都需要等待服务器响应并返回结果。在这个过程中，JavaScript 会继续执行其它任务，而不会阻塞界面。

然而，有时我们需要在 XHR 请求完成后再执行下一步操作。这时，可以使用 cy.wait() 命令来等待 XHR 请求返回。

cy.wait() 命令

cy.wait() 命令用于等待指定时间或等待特定事件发生，如 XHR 返回。在等待期间，Cypress 会定期轮询条件，直到它满足或达到超时时间。

下面是一些常用的 cy.wait() 命令：

• cy.wait(duration)：等待指定的时间，单位为毫秒。
• cy.wait(alias)：等待使用 cy.route() 命令指定的 XHR 返回。

使用 cy.wait() 命令等待 XHR 请求返回的示例代码如下：

cy.server();
cy.route('GET', '/api/data').as('getData');
cy.visit('/'); // 页面发出 XHR 请求
cy.wait('@getData').then((xhr) => {
  expect(xhr.status).to.equal(200);
  expect(xhr.response.body).to.have.length(4);
  // 在 XHR 请求返回后执行其它操作
});

在上述例子中，cy.route() 命令用于模拟 XHR 请求，并使用 cy.wait() 命令等待 xhr 请求返回。

注意事项

请注意以下几点：

• 如果 XHR 请求的响应超时或失败，则 cy.wait() 命令也会失败。
• 在使用 cy.wait() 命令等待 XHR 请求返回时，如果响应的 alias（别名）与其它命令或测试用例中使用的 alias 冲突，则会发生错误。
• 如果使用 cy.wait() 命令等待一个从未发送的 XHR 请求，则会发生错误。
• 在使用 cy.wait() 命令等待 XHR 请求返回时，应确保请求的 URL 路径与 XHR 的实际路径匹配。

结论

在 Cypress 中，使用 cy.wait() 命令等待 XHR 请求返回非常方便。它不仅可以确保测试用例的执行顺序，还可以验证 XHR 请求是否成功，并处理请求的响应数据。但是，在使用 cy.wait() 命令时，一定要注意其用法，以避免出现各种错误。