Vue中API调用失败后如何将data对象重置为初始值

你提到的两种方案都是符合Vue开发规范的常规实现，没有本质优劣，可根据业务场景选择：

方案1：错误时重新拉取服务端最新数据（多数场景优先推荐） #

适用场景：业务允许额外一次API请求，或存在多用户同时操作同一条数据的可能，保证重置后的数据和服务端最新状态完全一致，避免数据冲突。
实现逻辑：把初始数据拉取逻辑抽为独立公共方法，挂载阶段和错误场景下复用即可：

<template>
    <some-component v-model="apiData"></some-component>
</template>
data() {
    return {        
        apiData: {}
    }
},
mounted() {
   this.fetchInitialData()
},
methods: {
    // 抽离初始数据拉取逻辑
    async fetchInitialData() {
        this.apiData = await ApiService.getData()
    },
    async onSubmit() {
        try {
            const response = await ApiService.update(this.apiData);
            this.apiData = response.data;
        } catch (e) {
            showErrorNotification();
            // 直接重新拉取最新数据完成重置
            await this.fetchInitialData()
        }     
    }
}

方案2：本地缓存初始副本 #

适用场景：API请求成本高、或可明确确认提交周期内没有其他操作会修改服务端数据，无需额外请求的场景。
实现逻辑：新增独立字段存储初始数据的深拷贝，错误场景下用备份值覆盖当前数据即可，必须注意引用类型要做深拷贝，避免备份值和当前值引用关联导致备份失效：

<template>
    <some-component v-model="apiData"></some-component>
</template>
data() {
    return {        
        apiData: {},
        // 新增字段存储原始数据备份
        originalApiData: {}
    }
},
async mounted() {
   const initData = await ApiService.getData()
   this.apiData = initData
   // 深拷贝存储初始备份，可选lodash的_.cloneDeep实现更稳妥的深拷贝
   this.originalApiData = JSON.parse(JSON.stringify(initData))
},
methods: {
    async onSubmit() {
        try {
            const response = await ApiService.update(this.apiData);
            this.apiData = response.data;
            // 提交成功后必须同步更新备份，否则下次重置会回到挂载阶段的旧数据
            this.originalApiData = JSON.parse(JSON.stringify(response.data))
        } catch (e) {
            showErrorNotification();
            // 深拷贝备份值完成重置
            this.apiData = JSON.parse(JSON.stringify(this.originalApiData))
        }     
    }
}

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