[绍棠] nuxt asyncData 里面实现多请求

最新推荐文章于 2025-06-29 16:59:09 发布

绍棠

最新推荐文章于 2025-06-29 16:59:09 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 http node.js

本文链接：https://blog.csdn.net/happyshaotang2/article/details/121906140

前端专栏收录该内容

38 篇文章

订阅专栏

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，你可以利用 asyncData方法来获取数据并返回给当前组件。

注意：由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

1、多个异步请求

async asyncData(ctx) {
      let site = await ctx.app.$axios.get('/testApi' + '/query/site', {
        params: {}
      });
      var siteid = site.data.data.id;
      let listCategory = await ctx.app.$axios.get('/testApi' + '/query/listCategory',{
        params: {
          siteId: siteid
        }
      });
      return {
        dataSource: listCategory 
      }
   },

2.同步多个请求

async asyncData(ctx) {

      let [listA, listB] = await Promise.all([
        ctx.app.$axios.post('/testApi' + '/query/listChild', {
          current: 1,
          size: 5
        }),
        ctx.app.$axios.post('/testApi' + '/query/listByCategotyId', {
          current: 1,
          size: 9
        })
      ])
      return {
        listA: listA,
        listB: listB
      }
    },