在Vue3中处理异步API调用并更新表单数据的方法示例

更新时间：2024年06月20日 09:41:47 作者：码农研究僧

这篇文章主要介绍了如何在Vue3中处理异步API调用并更新表单数据（附Demo）,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

前言

从实战问题中剖析知识点

1. 问题所示

执行Vue3数据的时候，终端输出的data如下所示

Promise {<pending>}
[[Prototype]] :  Promise
[[PromiseState]] :  "fulfilled"
[[PromiseResult]] :  Array(13)

截图如下所示：

2. 知识分析

输出的数据是JavaScript的Promise对象的

对于这个数据基本的数据分析如下：

Promise {<pending>}：Promise对象的初始状态，处于等待状态
[[Prototype]]: Promise：对象的原型链，通过Promise构造函数创建的
[[PromiseState]]: "fulfilled"：Promise对象的内部状态，已经成功完成
[[PromiseResult]]: Array(13)：对象的结果

对于Promise的状态有如下：

Pending（待定）：Promise刚创建时的初始状态
Fulfilled（成功）：操作成功完成，Promise有了结果
Rejected（失败）：操作失败，Promise有了失败的原因

Promise的结果：当Promise状态变为fulfilled时，会有一个对应的结果值，这里是一个包含13个元素的数组

正确处理Promise的结果，例如使用.then()和.catch()方法

比如查看输出内容：

myPromise.then(result => console.log(result));

做适当的错误处理：

myPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error('Error:', error);
    });

给个示例Demo：

function fetchData() {
    return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
            const data = Array(13).fill('example data');
            resolve(data);
        }, 1000);
    });
}

// 使用Promise
fetchData()
    .then(result => {
        console.log('Promise fulfilled with result:', result);
    })
    .catch(error => {
        console.error('Promise rejected with error:', error);
    });

3. 实战

通过实战理解更加透彻

const handleAdd = () => {
  if (props.formType === 'detail') return // 禁用“添加危险品”按钮
  const row = {
    id: undefined,
    shipName: undefined,
    voyage: undefined,
    billNumber: undefined,
    boxNumber: undefined,
    boxSize: undefined,
    boxType: undefined,
    productName: undefined,
    hazardousLevel: undefined,
    hazardCode: undefined,
    isOpentopOrHigh: undefined,
    appointmentId: undefined,
  }
  row.appointmentId = props.appointmentId
  const data =  AppointmentCommissionApi.getEnterSiteListByAppointmentId(props.appointmentId)
  console.log(data)
  // 确保 data 是数组并赋值给 formData.value.list
  const fetchedData = Array.isArray(data) ? data : [];
  formData.value.list = [...formData.value.list, ...fetchedData];
  formData.value.list.push(row) // 添加新条目到列表中
  console.log('Updated list:', formData.value.list);
}

其中data输出问题所示的内容，那么处理此类问题有如下两种方式

使用Promise的.then()方法来处理异步API调用的结果

const handleAdd = () => {
  if (props.formType === 'detail') return // 禁用按钮
  const row = {
    id: undefined,
    shipName: undefined,
    voyage: undefined,
    billNumber: undefined,
    boxNumber: undefined,
    boxSize: undefined,
    boxType: undefined,
    productName: undefined,
    hazardousLevel: undefined,
    hazardCode: undefined,
    isOpentopOrHigh: undefined,
    appointmentId: undefined,
  }
  row.appointmentId = props.appointmentId

  // 调用API并处理结果
  AppointmentCommissionApi.getEnterSiteListByAppointmentId(props.appointmentId)
    .then(data => {
      // 确保 data 是数组并赋值给 formData.value.list
      const fetchedData = Array.isArray(data) ? data : [];
      formData.value.list = [...formData.value.list, ...fetchedData];
      formData.value.list.push(row); // 添加新条目到列表中
      console.log('Updated list:', formData.value.list);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

另一种更现代和清晰的方法是使用async/await

const handleAdd = async () => {
  if (props.formType === 'detail') return // 禁用按钮
  const row = {
    id: undefined,
    shipName: undefined,
    voyage: undefined,
    billNumber: undefined,
    boxNumber: undefined,
    boxSize: undefined,
    boxType: undefined,
    productName: undefined,
    hazardousLevel: undefined,
    hazardCode: undefined,
    isOpentopOrHigh: undefined,
    appointmentId: undefined,
  }
  row.appointmentId = props.appointmentId

  try {
    // 调用API并等待结果
    const data = await AppointmentCommissionApi.getEnterSiteListByAppointmentId(props.appointmentId);
    
    // 确保 data 是数组并赋值给 formData.value.list
    const fetchedData = Array.isArray(data) ? data : [];
    formData.value.list = [...formData.value.list, ...fetchedData];
    formData.value.list.push(row); // 添加新条目到列表中
    console.log('Updated list:', formData.value.list);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

以上就是在Vue3中处理异步API调用并更新表单数据的方法示例的详细内容，更多关于Vue3处理异步API并更新数据的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue动态样式几种常用方法总结
这篇文章主要给大家介绍了关于Vue动态样式几种常用方法总结的相关资料,在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的,需要的朋友可以参考下
2023-08-08
vue3使用video.js播放m3u8格式视频的操作指南
有时候我们需要播放 m3u8 格式的视频,或者实现视频播放器更多定制化需求,HTML 的 video 元素无法实现这些需求,这时候可以考虑使用 Video.js,本文给大家介绍了vue3使用video.js播放m3u8格式视频的操作指南,需要的朋友可以参考下
2024-07-07
vue 全局封装loading加载教程(全局监听)
这篇文章主要介绍了vue 全局封装loading加载教程(全局监听)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue调用PC摄像头实现拍照功能
这篇文章主要为大家详细介绍了Vue调用PC摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
分享一个基于Ace的Markdown编辑器
相信开发中或多或少都会有使用md的时候。那么一个简易的md编辑器显得尤为重要，如果想要在自己的项目中添加一个md编辑器，那么不妨来看看这篇文章
2021-10-10
vue操作下拉选择器获取选择的数据的id方法
今天小编就为大家分享一篇vue操作下拉选择器获取选择的数据的id方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
解决Vue axios post请求,后台获取不到数据的问题方法
今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue 双向数据绑定的实现学习之监听器的实现方法
这篇文章主要介绍了vue 双向数据绑定的实现学习之监听器的实现方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
如何利用Echarts根据经纬度给地图画点画线
最近工作中遇到了一个需求,需要利用echarts在地图上面标记点位,所下面这篇文章主要给大家介绍了关于如何利用Echarts根据经纬度给地图画点画线的相关资料,需要的朋友可以参考下
2022-05-05
Vue关键字搜索功能实战小案例
在vue项目中,搜索功能是我们经常需要使用的一个场景,下面这篇文章主要给大家介绍了关于Vue关键字搜索功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06