vue 在map循环中调接口 接口500时如何进行延时操作处理 然后再调接口 代码

在Vue的map循环中调用接口，如果接口返回500错误，可以使用async/await结合setTimeout来进行延时操作处理，然后再次调用接口。

例如，在模板中有一个数组需要进行循环处理，每个元素需要调用接口进行处理，在接口返回500错误时，需要进行延时后再次调用接口处理当前元素，可以这样写：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

在组件的script中，可以这样写：

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
        { id: 4, name: 'item4' },
        { id: 5, name: 'item5' }
      ]
    }
  },
  async mounted() {
    for (const item of this.list) {
      while (true) {
        try {
          const res = await this.apiCall(item.id) // 调用接口处理当前元素
          console.log(res)
          break // 跳出循环
        } catch (error) {
          if (error.response && error.response.status === 500) {
            console.log('接口返回500，延时后再次调用接口处理当前元素')
            await this.sleep(1000) // 延时1s
          } else {
            console.log(error)
            break // 跳出循环
          }
        }
      }
    }
  },
  methods: {
    apiCall(id) {
      return axios.get(`/api/item/${id}`)
    },
    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    }
  }
}

这样，当接口返回500错误时，会先进行延时1秒后再次调用接口处理当前元素，直到接口返回正确的结果或者接口返回非500错误时跳出循环，实现了在map循环中进行接口调用的延时操作处理。