如何在Nuxt中正确使用async/await或.then实现API请求链式调用？

先纠正你代码里的核心问题：

• 混用async/await和.then导致逻辑冗余，且return results()是错误调用（results是实例变量而非函数）
• 你的需求是基于同一份API响应生成两个切片，不需要链式调用两次请求，只需顺序处理数据即可

以下是符合需求的清晰实现：

async fetch() {
  const path = this.$nuxt.context.route.path
  try {
    // 发起请求，此时$fetchState.pending会自动置为true
    const res = await axios.get(`/api${path}`, {
      headers: {
        'X-AUTH-TOKEN': process.env.SECURE_TOKEN,
        'Content-Type': 'application/json'
      }
    })
    
    // 先完成results的赋值，确保逻辑顺序
    this.results = res.data.content.slice(0, 40)
    // 若需要视觉上的先后加载效果，可添加延迟（不需要则删除此行）
    // await new Promise(resolve => setTimeout(resolve, 500))
    this.results2 = res.data.content.slice(20, 40)
    
    this.response = res
  } catch (error) {
    // 捕获并处理请求错误，避免页面崩溃
    console.error('请求失败:', error)
  }
  // 请求完成后$fetchState.pending自动置为false
}

如果你的实际需求是先请求第一个接口拿到results，再请求第二个接口获取results2（而非同一份数据切片），则可以这样写：

async fetch() {
  const path = this.$nuxt.context.route.path
  try {
    // 第一个请求：获取results
    const res1 = await axios.get(`/api${path}`, {
      headers: {
        'X-AUTH-TOKEN': process.env.SECURE_TOKEN,
        'Content-Type': 'application/json'
      }
    })
    this.results = res1.data.content.slice(0, 40)
    
    // 第一个请求完成后，发起第二个请求
    const res2 = await axios.get(`/api${path}/another-endpoint`, {
      headers: {
        'X-AUTH-TOKEN': process.env.SECURE_TOKEN,
        'Content-Type': 'application/json'
      }
    })
    this.results2 = res2.data.content.slice(20, 40)
    
    this.response = { res1, res2 }
  } catch (error) {
    console.error('请求失败:', error)
  }
}

关键说明 #

• Nuxt的$fetchState.pending会自动在fetch异步函数执行期间保持true，执行完成（成功或失败）后变为false，无需手动管理
• 使用async/await比.then链式调用更直观，尤其适合顺序执行的异步逻辑
• 加入try/catch可以捕获请求错误，避免页面因未处理的异常崩溃

内容的提问来源于stack exchange，提问作者J.O