Cypress处理依赖API调用时如何避免.then()嵌套问题

串行请求嵌套形成的回调金字塔是异步代码的常见问题，Cypress本身的命令链机制原生支持扁平化写法，不需要嵌套.then()，也不建议用外部let变量存储中间值（该写法容易触发异步时序问题导致偶现测试失败），以下是可直接落地的方案：

方案1：原生命令链扁平化（零额外封装，成本最低） #

Cypress的.then()会自动等待回调内返回的命令执行完成，并将结果传递给链路后续的命令，直接把嵌套的逻辑平铺到同一命令链上即可完全消除嵌套：

cy.request('GET', myUrl)
  .its('body')
  .then(res => cy.request('GET', res))
  .its('body')
  .then(subRes => cy.request('GET', subRes))
  .its('body')
  .then(subSubRes => {
    expect(subSubRes, myMessage).to.eq(myEvaluation)
  })

该写法完全遵循Cypress原生执行逻辑，无额外抽象，所有步骤缩进统一，不会出现金字塔结构。

方案2：别名存储中间值（适合步骤拆分、中间结果复用场景） #

如果需要把长链路拆成多个独立步骤、或者在测试后续逻辑里复用中间响应结果，可以用Cypress内置的别名机制代替外部变量，完全规避时序风险：

// 第一步请求存别名
cy.request('GET', myUrl).its('body').as('firstResponse')

// 读取第一个响应结果发第二个请求，存别名
cy.get('@firstResponse')
  .then(firstRes => cy.request('GET', firstRes))
  .its('body').as('secondResponse')

// 读取第二个响应结果发第三个请求，做断言
cy.get('@secondResponse')
  .then(secondRes => cy.request('GET', secondRes))
  .its('body')
  .then(finalRes => {
    expect(finalRes, myMessage).to.eq(myEvaluation)
  })

别名存储在Cypress测试上下文内，不会受外部作用域影响，后续任意位置需要用到中间结果时，直接通过cy.get('@别名')即可读取，无需重复发起请求。

方案3：封装通用串行请求命令（适合多场景复用） #

如果测试代码中频繁出现「上一个响应作为下一个请求入参」的串行逻辑，可以封装通用自定义命令，一次封装后任意层数的串行请求都可以用平铺写法实现：
首先在cypress/support/commands.js中添加封装代码：

Cypress.Commands.add('chainRequests', (requestMethod, initialUrl, ...urlExtractors) => {
  let requestChain = cy.request(requestMethod, initialUrl).its('body')
  urlExtractors.forEach(extractNextUrl => {
    requestChain = requestChain.then(prevRes => {
      const nextUrl = extractNextUrl(prevRes)
      return cy.request(requestMethod, nextUrl).its('body')
    })
  })
  return requestChain
})

测试用例中直接调用即可，无需处理嵌套逻辑：

cy.chainRequests(
  'GET',
  myUrl,
  firstRes => firstRes, // 从第一个响应提取第二个请求的URL
  secondRes => secondRes // 从第二个响应提取第三个请求的URL
).then(finalRes => {
  expect(finalRes, myMessage).to.eq(myEvaluation)
})

该封装支持任意层数的串行请求，若某一步的URL提取逻辑变化（比如需要从响应的data.url字段取值），只需修改对应位置的提取函数即可，维护成本极低。

方案4：async/await语法糖（适合习惯同步写法的场景） #

Cypress 12+版本对async/await语法有完善支持，可以用接近同步代码的写法实现串行逻辑，完全消除回调结构：

it('校验串行请求最终结果', async () => {
  const firstRes = await cy.request('GET', myUrl).its('body')
  const secondRes = await cy.request('GET', firstRes).its('body')
  const finalRes = await cy.request('GET', secondRes).its('body')
  expect(finalRes, myMessage).to.eq(myEvaluation)
})

注意：该写法建议在Cypress 10以上版本使用，避免旧版本命令队列兼容问题。

内容的提问来源于stack exchange，提问作者Gonzalo Diaz Ailan