Svelte界面数据变更后未刷新问题求助

你的api_calls.js里的updateData、addData、deleteData三个异步函数存在逻辑缺陷：它们声明为async但内部既没有等待fetch请求完成，也没有返回请求的Promise。这导致调用这些函数后，refreshData会立即执行——此时API请求可能还没完成数据库修改，刷新拿到的还是旧数据，自然界面不会更新。

Delete功能看似正常只是因为请求耗时短，刚好在刷新前完成的概率高；Update偶尔生效同理；Add因为新数据写入需要一定时间，刷新时肯定拿不到新数据，所以完全不生效。手动刷新按钮有效是因为点击时数据库已经完成修改了。

1. 修正api_calls.js的异步函数 #

让三个操作函数返回fetch的Promise，确保外部可以等待请求完成：

// READ
export const getData = async (getPath) => {
    var response = await fetch(getPath, 
        {  method: 'GET' }
    );
    let result = await response.json();
    return result;
}

// UPDATE
export const updateData = async (patchPath, payload) => {
    return fetch(patchPath, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });
}
// CREATE
export const addData = async (addPath, payload) => {
    return fetch(addPath, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'accept': 'application/json'},
        body: JSON.stringify(payload)
    });
}
// DELETE
export const deleteData = async (deletePath) => {
    return fetch(deletePath, {method: 'DELETE' });
}

2. 修改页面中的调用逻辑 #

在调用API后等待请求完成，再执行刷新：

async function updateManufacturer() {
    const payload = { 
        id: editForm.id,
        name: editForm.name
    };
    const patchPath = getPath+"/"+editForm.id;
    await updateData(patchPath, payload);
    refreshData('update');
    updatetoggle();
}

async function addManufacturer() {
    addManufacturerForm.id = null;
    await addData(getPath, addManufacturerForm);
    refreshData('add');
    addtoggle();
 }

async function removeManufacturer(manufacturerID) {
    await deleteData(getPath+"/"+manufacturerID);
    refreshData('remove');
 }

这样就能确保只有当数据库修改完成后，才会执行刷新操作，界面就能正确同步最新数据了。

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