首页 > 其他分享 >axios如何在往后端发送数据后,立即更新列表

axios如何在往后端发送数据后,立即更新列表

时间:2023-03-06 12:34:30浏览次数:34  
标签:axios 更新 列表 error 发送数据 getData

在使用 axios 往后端发送数据后,如果需要立即更新列表,可以使用以下方法:

1.在发送数据成功后手动更新列表

在发送数据成功后,手动触发列表的更新。例如,在 Vue 组件中,可以在发送数据成功后,调用组件中的一个方法,该方法可以重新获取列表数据,然后将数据更新到页面上。

methods: {
  addData() {
    axios.post('/api/addData', this.formData)
      .then(() => {
        this.getData() //重新获取列表数据
      })
      .catch((error) => {
        console.log(error)
      })
  },
  getData() {
    axios.get('/api/getData')
      .then((response) => {
        this.list = response.data
      })
      .catch((error) => {
        console.log(error)
      })
  }
}
2.使用异步请求

可以将获取列表数据的操作和发送数据的操作放在同一个异步请求中,当发送数据成功后,再获取最新的列表数据。这样可以保证在发送数据成功后,立即更新列表。

methods: {
  async addData() {
    try {
      await axios.post('/api/addData', this.formData)
      this.getData() //重新获取列表数据
    } catch (error) {
      console.log(error)
    }
  },
  async getData() {
    try {
      const response = await axios.get('/api/getData')
      this.list = response.data
    } catch (error) {
      console.log(error)
    }
  }
}

以上是两种常用的方法,可以根据实际情况选择合适的方式来更新列表。

标签:axios,更新,列表,error,发送数据,getData
From: https://www.cnblogs.com/NetUSA/p/17183327.html

相关文章

  • Vue+axios 解决跨域
    Vue+axios如何解决跨域问题?跨域问题是由于浏览器的同源策略限制导致的,同源策略是浏览器的一种安全策略,目的是保障用户的信息安全,防止恶意网站窃取数据。同源策略的限制......
  • ITK 5.2 .lib文件列表
    ITKBiasCorrection-5.2.libITKColormap-5.2.libITKCommon-5.2.libITKConvolution-5.2.libITKDeformableMesh-5.2.libITKDenoising-5.2.libITKDICOMParser-5.2.libITKDiffus......
  • VTK-9.2 .lib文件列表
    vtkcgns-9.2d.libvtkChartsCore-9.2d.libvtkCommonColor-9.2d.libvtkCommonComputationalGeometry-9.2d.libvtkCommonCore-9.2d.libvtkCommonDataModel-9.2d.libvtkCommonE......
  • python 循环结构 for循环遍历列表 输出所有列表成员
    """for临时变量in列表:处理临时变量"""li=["刘备","关羽","张飞"]print("准备欢迎每个同学")fornameinli:print(name,"你好")......
  • 【易语言】将超级列表框中的数据导出到excel
    需要精益模块.版本2.支持库iext.支持库shell.子程序_按钮1_被单击.局部变量局_表项索引,整数型.局部变量局部_列表,外部超级列表框局_表项索引=超级列表......
  • flex显示列表数据
    <?xmlversion="1.0"encoding="utf-8"?><mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"backgroundColor="#D99191"><mx:Arrayid="coffee......
  • day3列表
    """列表(list)是一种有序的容器,放入list中的元素,将会按照一定顺序排列。Alice同学某次考试语文(Chinese)、数学(Math)、英语(English)三科的成绩分别是92、75、99,1、请......
  • eyoucms 首页以及列表页内容调用标题、关键词、描述
    1、首页调用标题、关键词、描述123<title>{eyou:global name='web_title' /}</title><metaname="description" content="{eyou:globalname='web_descr......
  • 如何判断一个列表中所有元素一致?
    判断列表中元素是否一致deflist_equal(list):returnlist[1:]==list[:-1]如上:只需要运用切片,倒序并进行对比就好,无需for循环一一比较......
  • Unity无限滑动列表
      //解释下Start里的代码 ......