循环数组调接口，按顺序返回对应数据

q249859693

已于 2024-03-05 17:07:40 修改

阅读量990

点赞数

文章标签： javascript 前端 vue.js

于 2023-02-18 14:42:08 首次发布

本文链接：https://blog.csdn.net/q249859693/article/details/129097659

版权

文章探讨了在JavaScript中使用async/await和Promise处理异步数据的方式，以及它们对Vue.js中页面渲染的影响。通过示例代码展示了数据依次增加和一步到位的渲染策略，并提到了将数据转换为对象数组的方法，强调了不同异步处理方式在并行性和效率上的差异。

摘要由CSDN通过智能技术生成

1. async+await

    <div v-for="(item, index) in list" :key="index">
      <span> {{ item }} </span>
    </div>

//数据依次增加，页面依次渲染
    async aaa () {
      this.arr1=[]
      for (let index = 0; index < this.list.length; index++) {
        await getXX(this.list[index].id).then(res => {
          this.arr1.push(res.data.name)
        })
      }
    },
 //数据一步到位，页面渲染一次
    async aaa () {
      let arr=[]
      for (let index = 0; index < this.list.length; index++) {
        await getXX(this.list[index].id).then(res => {
          this.arr1.push(res.data.name)
        })
      }
       this.arr1=arr
    },

2. promise

    <div v-for="(item, index) in list" :key="index">
      <span> {{ item }} </span>
    </div>

	fun1(id){
      return new Promise((resolve, reject) => {
        getXX(id).then(res => {
          let name= res.data.name
          resolve(name)
        })
      })
	},
    aaa () {
      this.arr1=[]
      let qq = this.list.map((item, index) => {
        return this.fun1(item.id)
      })
      Promise.all(qq).then(value => {
        this.arr1= value //数据一步到位
      })
    },

3.转成对象数组

    <div v-for="(item, index) in list" :key="index">
      <span> {{ item.name }} </span>
    </div>

	aaa(){
	  this.arr1=[]
      this.list.forEach(item => {
        this.arr1.push({ params: item.id})
      })
       this.arr1.forEach((item, index) => {
        getXX(item.params).then(res => {
          item.name= res.data.name //数据依次增加
        })
      })
    },