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

前言

从实战问题中剖析知识点

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并更新数据的资料请关注代码网其它相关文章！