是否可以使用条件语句在 Nuxt asyncData 中发出多个请求？

Question

我已经为此苦苦挣扎了一段时间。我知道如何使用 Nuxt asyncData 发出一个请求以及如何发出多个请求，但是是否可以使用内置条件发出多个请求？例如有时它会根据查询参数发出一个请求，有时会发出两个请求。

async asyncData({ $axios, route }) {
  if (route.query.query) {
    if (route.query.tab === 'companies') {
      // API Call "Search companies"
      return await $axios.$get(`/v1/search/companies/${route.query.query}`).then((res) => {
        return {
          tab: 'companies',
          query: route.query.query,
          companyResults: res.data.data,
        }
      })
    } else {
      let company = null

      if (route.query.company) {
        // API Call "Read a company"
        await $axios.$get(`/v1/companies/${route.query.company}`).then((res) => {
          company = res.data
        })
      }

      // API Call "Search requests"
      return await $axios.$get(`/v1/search/requests/${route.query.query}`).then((res) => {
        return {
          company,
          tab: 'requests',
          query: route.query.query,
          requestResults: res.data.data,
        }
      })
    }
  }
}

问题出在 else 语句中。如果设置了“公司”查询参数，我希望它进行“读取公司”和“搜索请求”API 调用。如果未设置查询参数，则只会进行“搜索请求”API 调用。

当我执行此操作时，所有正确的 API 调用都已执行，但数据未从 asyncData 正确返回。

Answer 1

我认为问题在于您使用了 async/await 和 promises 的奇怪组合。试试这个：

async asyncData({ $axios, route }) {
  if (route.query.query) {
    if (route.query.tab === 'companies') {
      // API Call "Search companies"
      const response = await $axios.$get(`/v1/search/companies/${route.query.query}`)
      return {
        tab: 'companies',
        query: route.query.query,
        companyResults: response.data.data,
      }
        
    } else {
      let company = null
      if (route.query.company) {
        // API Call "Read a company"
        const response = await $axios.$get(`/v1/companies/${route.query.company}`)
        company = response.data
      }

      // API Call "Search requests"
      const reponse = await $axios.$get(`/v1/search/requests/${route.query.query}`)
      return {
        company,
        tab: 'requests',
        query: route.query.query,
        requestResults: reponse.data.data,
      }
    }
  }
}

Answer 2

所以问题不在于 asyncData。当您使用 $get Nuxt Axios 时，有一个快捷方式 built-in 即 automatically returns the data rather than an object with a data property.

这意味着我只需要用一个“.data”替换“.data.data”。

async asyncData({ $axios, route }) {
  if (route.query.query) {
    if (route.query.tab === 'companies') {
      // API Call "Search companies"
      const response = await $axios.$get(`/v1/search/companies/${route.query.query}`)

      return {
        tab: 'companies',
        query: route.query.query,
        companyResults: response.data,
      }
    } else if (route.query.company) {
      // API Call "Read a company" and "Search requests"
      const [companyResponse, requestsResponse] = await Promise.all([$axios.$get(`/v1/companies/${route.query.company}`), $axios.$get(`/v1/search/requests/${route.query.query}`)])

      return {
        company: companyResponse,
        tab: 'requests',
        query: route.query.query,
        requestResults: requestsResponse.data,
      }
    } else {
      // API Call "Search requests"
      const response = await $axios.$get(`/v1/search/requests/${route.query.query}`)

      return {
        tab: 'requests',
        query: route.query.query,
        requestResults: response.data,
      }
    }
  }
},

特别感谢 Daniel Roe Nuxt Github Repo。

是否可以使用条件语句在 Nuxt asyncData 中发出多个请求？

Is it possible to make multiple requests in Nuxt asyncData with conditional statements?

javascript

vue.js

nuxt.js