Comments (5)
For those who will come here, i'll leave examples of using type script code and code.
const fetchWithTimeout =
(timeoutMs: number) =>
(input: RequestInfo, init?: RequestInit): Promise<Response> => {
return fetch(input, {
...init,
signal: abortFetchSignal(timeoutMs),
})
}
const abortFetchSignal = (timeoutMs: number) => {
if (typeof window === 'undefined' || window.AbortController === undefined) {
return undefined
}
const abortController = new AbortController()
setTimeout(() => abortController.abort(), timeoutMs)
return abortController.signal
}
// Usage #1
redaxios.create({
fetch: fetchWithTimeout(1000),
})
// Usage #2
redaxios.get('~~', {
fetch: fetchWithTimeout(1000),
})
// Usage #3
export const axios = redaxios.create({
fetch: fetchWithTimeout(1000),
}) as typeof redaxios
from redaxios.
Indeed, good catch.
from redaxios.
@developit I think we can pick this up after request cancellation feature is done.
Since fetch does not support timeout (I don't know if fetch
does support timeout) out of the box (we can acheive via setTimeout
and AbortController
)
One way to implement this is when the timeout
is provided in the options
we'll create an AbortController and pass the singal to fetch and we'll set off a setTimeout
for the duration specified in the timeout option and inside the callback we'll abort
the signal.
But there is a catch, If cancelToken
option is also provided along with timeout
then we'll need to chain the signals (singal from cancelToken
& the signal that we will create for timeout) Refer this snippet for chaining of singals
and while passing singnal to fetch we'll have to do it this way I think
{ signal: timeoutAbortController.signal || options.cancelToken }
In the event when both cancelToken
& timeout
are provided higher precedence should be given to timeoutAbortController
because we'll have access to it's abort()
handle which will be required to cancel the fetch onTimeout or cancel being called externally.
I don't know if there is a simpler way to implement this, I'll be happy if there is a simpler way with less code.
from redaxios.
I've also good experience of using AbortController. Here is a full code example of utility function implementing the timeout:
/**
Aborts fetch request after given time. Usage:
fetch('chatoptions/waittime', {
signal: abortFetchInSeconds(10)
})
@param { number } timeout - abort time (timeout) in seconds
@return AbortSignal|undefined - undefined is returned when browser does not support AbortController
*/
function abortFetchInSeconds(timeout) {
if (window.AbortController === undefined) {
return undefined;
}
const abortController = new AbortController();
setTimeout(() => abortController.abort(), timeout * 1000);
return abortController.signal;
}
from redaxios.
hi, this is VERY useful feature, when this ll be supported in options?
from redaxios.
Related Issues (20)
- In next.js 14 fetch can accept extra options. Is it possible to send with redaxios?
- Improve documentation regarding response.headers
- Fetch blocked by CORS policy HOT 2
- Put request doesnt work HOT 7
- Put request doesnt work (reopened from #76) HOT 1
- Not possible to transform headers per request
- return type of `create` cannot be named HOT 2
- POST requests that work with Axios throw CORS error with Redaxios HOT 9
- Usage on Deno HOT 2
- Adding Axios like Typescript support HOT 6
- Add interceptors HOT 2
- Proxy support
- Missing adapter support HOT 1
- Missing defaults support HOT 1
- Axios is adding a fetch adapter natively. Will Redaxios have any use then? HOT 2
- add next and cache support HOT 1
- Response Parsing Error when Status Code is 204 (No Content) HOT 1
- State of the project ? HOT 2
- Does redaxios support adaptor? HOT 2
- Mock redaxios with vi.mock()
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redaxios.