exfetch

Enhanced unfetch API.

Features:

• Progress listeners for download and upload
• Abortable request with custom implementation or AbortController, following abortable Fetch approach

Install

1npm install exfetch --save

Usage

Custom abort implementation

1import exfetch from 'exfetch';
2
3(async () => {
4	const { request, abort, isAborted, onEvent } = exfetch('https://becky.com');
5	let downloaded = 0;
6	let uploaded = 0;
7
8	onEvent('download', (e) => {
9		if (e.lengthComputable) {
10			downloaded = e.loaded / e.total;
11		}
12	});
13
14	onEvent('upload', (e) => {
15		if (e.lengthComputable) {
16			uploaded = e.loaded / e.total;
17		}
18	});
19
20	setTimeout(() => {
21		// Will abort request after 2 seconds
22		abort();
23	}, 2000);
24
25	const response = await request();
26
27	if (isAborted()) {
28		// Request aborted!
29		return;
30	}
31
32	// Parse response as JSON
33	const data = await response.json();
34})();

"Abortable Fetch" approach

Using abort and isAborted export properties will throw error which instructs to use AbortController.abort() method and AbortSignal.aborted property respectively.

1import exfetch from 'exfetch';
2
3(async () => {
4	const controller = new AbortController();
5	const signal = controller.signal;
6	const { request, onEvent } = exfetch('https://becky.com', { signal });
7	let downloaded = 0;
8	let uploaded = 0;
9
10	onEvent('download', (e) => {
11		if (e.lengthComputable) {
12			downloaded = e.loaded / e.total;
13		}
14	});
15
16	onEvent('upload', (e) => {
17		if (e.lengthComputable) {
18			uploaded = e.loaded / e.total;
19		}
20	});
21
22	setTimeout(() => {
23		// Will abort request after 2 seconds
24		controller.abort();
25	}, 2000);
26
27	try {
28		const response = await request();
29		// Parse response as JSON
30		const data = await response.json();
31	} catch (error) {
32		if (error.name === 'AbortError') {
33			// Request aborted!
34			return;
35		}
36	}
37})();

API

exfetch(url, [options])

Returns: Object

See unfetch API documentation for arguments.

Returns API object with following properties:

request

Type: Function
Returns: Promise

Returns request Promise.

onEvent(eventName, handler)

Type: Function
Returns: Function

Wrapper around progress event.

Event name	Original handler
download	xhr.onprogress
upload	xhr.upload.onprogress

Handler receives one argument which is original Event.

Returns function for unlistening event.

abort

Type: Function
Returns: undefined

Aborts request.

This has effect only with custom abort implementation. If you use this method with "abortable Fetch" approach, it will throw error telling you to use AbortController.abort() instead.

isAborted

Type: Function
Returns: boolean

Check if current request is aborted.

This has effect only with custom abort implementation. If you use this method with "abortable Fetch" approach, it will throw error telling you to use AbortSignal.aborted instead.

Questions

Why two different abort implementations?

Original GitHub issue on aborting Fetch is rather long and it culminated with generic AbortController approach not connected only with Fetch, which is great for any kind of abortable operations.

But XHR already has simple solution for aborting requests and it would be shame not to use that.

I wanted to support both approaches, but they have differences in how they are resolved.

For "abortable Fetch" approach, request Promise is rejected with AbortError following standard implementation.

For custom abort approach, request Promise is resolved/fulfilled to response object following XHR abort operation sequence with ok set to false and status set to 0.

Browser support

Tested in IE11+ and all modern browsers, assuming Promise is available (polyfill).

If you want to use "abortable Fetch" approach, you also need to have AbortController available (polyfill).

Test

For automated tests, run npm run test:automated (append :watch for watcher support).

License

MIT © Ivan Nikolić