如何在modal打开时执行函数，实现每次打开都刷新数据？

核心逻辑：监听modal的显示触发时机，每次modal被打开时执行内部的axios请求函数即可，不需要修改外部代码逻辑，所有改动都可以放在modal内部完成。

1. 原生JS实现 #

如果是手写的原生modal组件，直接把数据请求和modal显示逻辑绑定即可：

// modal内部代码
let dataList = []
// 封装数据请求函数
const fetchModalData = async () => {
  const res = await axios.get('/你的接口地址')
  dataList = res.data
  // 执行modal内容渲染逻辑
  renderModalContent(dataList)
}
// 绑定打开modal的触发事件
document.querySelector('#openModalBtn').addEventListener('click', () => {
  // 原有显示modal的逻辑
  document.querySelector('#myModal').style.display = 'block'
  // 每次打开都调用请求刷新数据
  fetchModalData()
})
// 关闭modal时可选清空旧数据，避免下次打开闪旧内容
document.querySelector('.close-modal').addEventListener('click', () => {
  document.querySelector('#myModal').style.display = 'none'
  dataList = []
})

2. React实现 #

如果使用React+组件库（如Antd、MUI）的Modal，有两种常用实现方式：

• 监听控制显隐的visible状态变量，切换为显示时触发请求
• 直接使用Modal组件自带的onOpen/afterOpen回调绑定请求函数

import { useState, useEffect } from 'react'
import { Modal } from 'antd'
import axios from 'axios'

const MyModal = ({ visible, onClose }) => {
  const [dataList, setDataList] = useState([])
  // 封装数据请求函数
  const fetchModalData = async () => {
    const res = await axios.get('/你的接口地址')
    setDataList(res.data)
  }
  // 方式1：监听显隐状态变化触发请求
  useEffect(() => {
    if (visible) fetchModalData()
    // 关闭时清空旧数据
    return () => setDataList([])
  }, [visible])
  // 方式2：直接用组件自带的onOpen回调，不需要额外写useEffect
  return (
    <Modal visible={visible} onCancel={onClose} onOpen={fetchModalData}>
      {/* modal内容渲染dataList */}
    </Modal>
  )
}

3. Vue实现 #

如果使用Vue+组件库（如Element Plus、Vuetify）的Modal，也有两种常用实现方式：

• 监听v-model绑定的显隐变量，值变为true时触发请求
• 直接绑定Modal组件自带的@open/@show事件

<template>
  <!-- 方式2：直接绑定open事件 -->
  <el-modal v-model="visible" @open="fetchModalData">
    <!-- 渲染dataList -->
  </el-modal>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import axios from 'axios'
const props = defineProps({ modelValue: Boolean })
const emit = defineEmits(['update:modelValue'])
const dataList = ref([])
// 对接v-modal的显隐变量
const visible = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val)
})
const fetchModalData = async () => {
  const res = await axios.get('/你的接口地址')
  dataList.value = res.data
}
// 方式1：监听显隐变量变化触发请求
// watch(() => props.modelValue, (newVal) => {
//   if (newVal) fetchModalData()
// })
</script>

额外优化点 #

• 关闭modal时可以清空旧数据，避免下次打开时先闪现上次的旧内容再刷新
• 可以加loading状态，请求过程中显示加载中，提升用户体验
• 避免重复请求：如果打开后请求还没完成就关闭再打开，可以加个请求锁，或者取消上次未完成的请求

内容的提问来源于stack exchange，提问作者ArcticMediaRyan