如何中止/取消/忽略以前的查询结果,如果新的查询被发送Redux Toolkit Query

tsm1rwdh  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(105)

所以我有这样的问题,用户有3个选项可供选择,当他选择一个,请求被发送到后端,更新状态,并将其发送回来,我也更新本地状态时,发送请求显示结果给用户即时(类似于乐观更新)一切都很好,直到用户决定太快地改变选项,并且在这种情况下,如果他选择选项1,然后选项2,然后选项3,UI结果是即时的,但是当我收到后端响应时,选项跳回到2,然后跳到3。
所以我想以某种方式中止/取消/忽略以前的请求,如果新的一个被发送。

sxissh06

sxissh061#

由于这是使用JavaScript Fetch API,我们可以使用Signal选项。

export const apiController = new AbortController();
export const apiSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl : API_BASE_URL
    }),
    endpoints: (builder)=> ({
        getAlbums: builder.query({
            query: (page)=> ({
                url : 'photos?_start=0&_limit=5',
                signal: apiController.signal
            })
        })
    })
})

export const {useGetAlbumsQuery} = apiSlice;

字符串
按您的需要使用

import {useGetAlbumsQuery, apiController} from './apiSlice';

const doCancel = ()=> {
    apiController.abort();
}


有关Fetch API中止控制器的更多详细信息,请参阅此文档https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort

相关问题