for循环中调用接口 async await Promise

最新推荐文章于 2025-01-19 22:16:53 发布

原创最新推荐文章于 2025-01-19 22:16:53 发布 · 4.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

vue+element 专栏收录该内容

5 篇文章

订阅专栏

文章目录

前言
1.for循环
2.异步接口
总结

前言

for循环中循环调用接口然后等循环结束获取全部数据。

1.for循环

代码如下（示例）：

async initMapInfoWindowChart(data) {
      const { data: res, code: code } = await getData({
        id: data.id,
      })
      if (code == 200) {
        if (res) {
          var chartList = []
          chartList = res
          for (let i in chartList) {
          //此处的resData  即为每次循环执行后 异步接口返回值
            let resData = await this.getHistoryList(i, chartList[i].id)
          }
          this.chartList = chartList
        }
      } else {
        this.$notify({
          type: 'error',
          title: '失败！',
          message: res.msg,
          position: 'bottom-right'
        })
      }
    },

2.异步接口

代码如下（示例）：

async getHistoryList(i, id) {
      return new Promise(async resolve => {
        pageHistoryList({
          id: id
        }).then(res => {
          if (res.code == 200) {
            if (res.data) {
              var historyList = res.data
              resolve(historyList)
            }
          } else {
            this.$notify({
              type: 'error',
              title: '失败！',
              message: res.msg,
              position: 'bottom-right'
            })
          }
        })
      })
    },