request-extensions
请求(axios、fetch)扩展,包括取消请求的扩展、锁定请求的扩展、缓存请求的扩展等。
功能
- 重复请求时,取消未完成的前请求
- 切换路由时,取消未完成的所有请求
- 锁定请求,防止重复提交请求
- 缓存请求数据
安装
yarn add request-extensions
示例
axios
扩展 axios
// http.js;;const cancelableAxios isCancel lockableAxios isRepeatSubmit cacheableAxios = axiosExtensions; // 这个适配器,可以是自定义或用 axios 默认的let adapter = axiosdefaultsadapter;// 使用不能重复提交请求扩展,如果重复提交,后一个提交请求不能发起adapter = ;// 使用可以取消请求扩展,如果前一个请求没有完成,后一个请求又发起,则会取消前一个请求adapter = ;// 使用可缓存请求扩展,如果前一个请求已经完成,同时后一个请求和前一个请求参数相同,则可以取缓存数据adapter = ; const http = axios; { const defaultConfig = // 表示切换路由时,取消未完成的请求 onlySwitchRouteCancelable: true ; return ;}
使用
- 可以取消的请求
// 可取消的查询请求const queryData = { return ;} // 当前请求会被取消
- 切换路由时,取消未完成的请求
;;;;; const cancelAllAxios = axiosExtensions;const commonRender = { return { // 切换路由时,取消未完成的请求 ; const params = match || {}params || {}; return <Component params=params route=match location=location history=history />; };}; PureComponent { return <BrowserRouter basename="/abc"> <Switch> <Route exact path="/a" key="/a" render= /> <Route exact path="/b" key="/b" render= /> </Switch> </BrowserRouter> ; }
- 不可重复提交的请求
// 不能重复的提交请求const postData = { return ;} ; ; // 当前请求不能发起
- 可缓存的请求
// 可缓存的查询请求const getCity = { return ;}
fetch
扩展 fetch
// fetch.js;;const cancelableFetch isCancel lockableFetch isRepeatSubmit cacheableFetch = fetchExtensions; // 这个适配器,可以是自定义或用 Fetch 默认的let extFetch = fetch;// 使用不能重复提交请求扩展,如果重复提交,后一个提交请求不能发起extFetch = ;// 使用可以取消请求扩展,如果前一个请求没有完成,后一个请求又发起,则会取消前一个请求extFetch = ;// 使用可缓存请求扩展,如果前一个请求已经完成,同时后一个请求和前一个请求参数相同,则可以取缓存数据extFetch = ; { const defaultConfig = // 表示切换路由时,取消未完成的请求 onlySwitchRouteCancelable: true ; return ;}
使用
- 可以取消的请求
// 可取消的查询请求const queryData = { return ;} // 当前请求会被取消
- 切换路由时,取消未完成的请求
;;;;; const cancelAllFetch = fetchExtensions;const commonRender = { return { // 切换路由时,取消未完成的请求 ; const params = match || {}params || {}; return <Component params=params route=match location=location history=history />; };}; PureComponent { return <BrowserRouter basename="/abc"> <Switch> <Route exact path="/a" key="/a" render= /> <Route exact path="/b" key="/b" render= /> </Switch> </BrowserRouter> ; }
- 不可重复提交的请求
// 不能重复的提交请求const postData = { return ;} ; ; // 当前请求不能发起
- 可缓存的请求
// 可缓存的查询请求const getCity = { return ;}
request-extensions api
axios extensions
取消请求
- cancelableAxios(axiosAdapter): 取消请求的扩展
- cancelAllAxios(): 取消所有未完成的请求
- isCancel(error): 判断该请求是否被取消,在 catch 中,通过 error 判断
不能重复提交请求
- lockableAxios(axiosAdapter): 不能重复提交请求的扩展
- deleteLockedUrl(url): 手动删除请求,入列的提交请求需要使用
- isRepeatSubmit(error): 判断该请求是否因为重复提交被阻止,在 catch 中,通过 error 判断
缓存请求
- cacheableAxios(axiosAdapter):缓存请求的扩展
- deleteCacheItem(url): 删除缓存项
fetch extensions
取消请求
- cancelableFetch(fetch): 取消请求的扩展
- cancelAllFetch(): 取消所有未完成的请求
- isCancel(error): 判断该请求是否被取消,在 catch 中,通过 error 判断
重复提交请求
- lockableFetch(fetch): 不能重复提交请求的扩展
- deleteLockedUrl(url): 手动删除请求,入列的提交请求需要使用
- isRepeatSubmit(error): 判断该请求是否因为重复提交被阻止,在 catch 中,通过 error 判断
缓存请求
- cacheableFetch(fetch):缓存请求的扩展
- deleteCacheItem(url): 删除缓存项
request-extensions config
const requestExtensionsConfig = // 是否可以取消请求,切换路由时也会取消未完成的请求 cancelable: boolean // 切换路由时,是否取消未完成的请求 onlySwitchRouteCancelable: boolean // 是否不能重复提交请求 lockable: boolean // lockable 为 true 时,该请求是否为入队列的提交请求(就是提交结果需要异步获取),如果是,则提交完成后需要手动删除请求 isEnqueueSubmit: boolean // 是否可以缓存请求 cacheable: boolean // cacheable 为 true 时,是否强制更新缓存数据 forceUpdate: boolean // axios // fetch