Ky is a tiny and elegant HTTP client based on the browser Fetch API
Ky targets modern browsers and Deno. For older browsers, you will need to transpile and use a fetch
polyfill. For Node.js, check out Got. For isomorphic needs (like SSR), check out ky-universal
.
It's just a tiny file with no dependencies.
fetch
Benefits over plain - Simpler API
- Method shortcuts (
ky.post()
) - Treats non-2xx status codes as errors
- Retries failed requests
- JSON option
- Timeout support
- URL prefix option
- Instances with custom defaults
- Hooks
Install
$ npm install ky
Download
CDN
Usage
import ky from 'ky';
(async () => {
const parsed = await ky.post('https://example.com', {json: {foo: true}}).json();
console.log(parsed);
//=> `{data: '🦄'}`
})();
With plain fetch
, it would be:
(async () => {
class HTTPError extends Error {}
const response = await fetch('https://example.com', {
method: 'POST',
body: JSON.stringify({foo: true}),
headers: {
'content-type': 'application/json'
}
});
if (!response.ok) {
throw new HTTPError('Fetch error:', response.statusText);
}
const parsed = await response.json();
console.log(parsed);
//=> `{data: '🦄'}`
})();
If you are using Deno, import Ky from a URL. For example, using a CDN:
import ky from 'https://unpkg.com/ky/index.js';
In environments that do not support import
, you can load ky
in UMD format. For example, using require()
:
const ky = require('ky/umd').default;
With the UMD version, it's also easy to use ky
without a bundler or module system.
API
ky(input, options?)
The input
and options
are the same as fetch
, with some exceptions:
- The
credentials
option issame-origin
by default, which is the default in the spec too, but not all browsers have caught up yet. - Adds some more options. See below.
Returns a Response
object with Body
methods added for convenience. So you can, for example, call ky.get(input).json()
directly without having to await the Response
first. When called like that, an appropriate Accept
header will be set depending on the body method used. Unlike the Body
methods of window.Fetch
; these will throw an HTTPError
if the response status is not in the range of 200...299
. Also, .json()
will return an empty string if the response status is 204
instead of throwing a parse error due to an empty body.
ky.get(input, options?)
ky.post(input, options?)
ky.put(input, options?)
ky.patch(input, options?)
ky.head(input, options?)
ky.delete(input, options?)
Sets options.method
to the method name and makes a request.
When using a Request
instance as input
, any URL altering options (such as prefixUrl
) will be ignored.
options
Type: object
method
Type: string
Default: get
HTTP method used to make the request.
Internally, the standard methods (GET
, POST
, PUT
, PATCH
, HEAD
and DELETE
) are uppercased in order to avoid server errors due to case sensitivity.
json
Type: object
Shortcut for sending JSON. Use this instead of the body
option. Accepts a plain object which will be JSON.stringify()
'd and the correct header will be set for you.
searchParams
Type: string | object<string, string | number | boolean> | Array<Array<string | number | boolean>> | URLSearchParams
Default: ''
Search parameters to include in the request URL. Setting this will override all existing search parameters in the input URL.
Accepts any value supported by URLSearchParams()
.
prefixUrl
Type: string | URL
A prefix to prepend to the input
URL when making the request. It can be any valid URL, either relative or absolute. A trailing slash /
is optional and will be added automatically, if needed, when it is joined with input
. Only takes effect when input
is a string. The input
argument cannot start with a slash /
when using this option.
Useful when used with ky.extend()
to create niche-specific Ky-instances.
import ky from 'ky';
// On https://example.com
(async () => {
await ky('unicorn', {prefixUrl: '/api'});
//=> 'https://example.com/api/unicorn'
await ky('unicorn', {prefixUrl: 'https://cats.com'});
//=> 'https://cats.com/unicorn'
})();
Notes:
- After
prefixUrl
andinput
are joined, the result is resolved against the base URL of the page (if any). - Leading slashes in
input
are disallowed when using this option to enforce consistency and avoid confusion about how theinput
URL is handled, given thatinput
will not follow the normal URL resolution rules whenprefixUrl
is being used, which changes the meaning of a leading slash.
retry
Type: object | number
Default:
limit
:2
methods
:get
put
head
delete
options
trace
statusCodes
:408
413
429
500
502
503
504
maxRetryAfter
:undefined
An object representing limit
, methods
, statusCodes
and maxRetryAfter
fields for maximum retry count, allowed methods, allowed status codes and maximum Retry-After
time.
If retry
is a number, it will be used as limit
and other defaults will remain in place.
If maxRetryAfter
is set to undefined
, it will use options.timeout
. If Retry-After
header is greater than maxRetryAfter
, it will cancel the request.
Delays between retries is calculated with the function 0.3 * (2 ** (retry - 1)) * 1000
, where retry
is the attempt number (starts from 1).
import ky from 'ky';
(async () => {
const parsed = await ky('https://example.com', {
retry: {
limit: 10,
methods: ['get'],
statusCodes: [413]
}
}).json();
})();
timeout
Type: number | false
Default: 10000
Timeout in milliseconds for getting a response. Can not be greater than 2147483647.
If set to false
, there will be no timeout.
hooks
Type: object<string, Function[]>
Default: {beforeRequest: [], beforeRetry: [], afterResponse: []}
Hooks allow modifications during the request lifecycle. Hook functions may be async and are run serially.
hooks.beforeRequest
Type: Function[]
Default: []
This hook enables you to modify the request right before it is sent. Ky will make no further changes to the request after this. The hook function receives request
and options
as arguments. You could, for example, modify the request.headers
here.
The hook can return a Request
to replace the outgoing request, or return a Response
to completely avoid making an HTTP request. This can be used to mock a request, check an internal cache, etc. An important consideration when returning a request or response from this hook is that any remaining beforeRequest
hooks will be skipped, so you may want to only return them from the last hook.
import ky from 'ky';
const api = ky.extend({
hooks: {
beforeRequest: [
request => {
request.headers.set('X-Requested-With', 'ky');
}
]
}
});
(async () => {
const users = await api.get('https://example.com/api/users');
// ...
})();
hooks.beforeRetry
Type: Function[]
Default: []
This hook enables you to modify the request right before retry. Ky will make no further changes to the request after this. The hook function receives the normalized request and options, an error instance and the retry count as arguments. You could, for example, modify request.headers
here.
import ky from 'ky';
(async () => {
await ky('https://example.com', {
hooks: {
beforeRetry: [
async (request, options, errors, retryCount) => {
const token = await ky('https://example.com/refresh-token');
request.headers.set('Authorization', `token ${token}`);
}
]
}
});
})();
hooks.afterResponse
Type: Function[]
Default: []
This hook enables you to read and optionally modify the response. The hook function receives normalized request, options, and a clone of the response as arguments. The return value of the hook function will be used by Ky as the response object if it's an instance of Response
.
import ky from 'ky';
(async () => {
await ky('https://example.com', {
hooks: {
afterResponse: [
(_request, _options, response) => {
// You could do something with the response, for example, logging.
log(response);
// Or return a `Response` instance to overwrite the response.
return new Response('A different response', {status: 200});
},
// Or retry with a fresh token on a 403 error
async (request, options, response) => {
if (response.status === 403) {
// Get a fresh token
const token = await ky('https://example.com/token').text();
// Retry with the token
request.headers.set('Authorization', `token ${token}`);
return ky(request);
}
}
]
}
});
})();
throwHttpErrors
Type: boolean
Default: true
Throw a HTTPError
for error responses (non-2xx status codes).
Setting this to false
may be useful if you are checking for resource availability and are expecting error responses.
onDownloadProgress
Type: Function
Download progress event handler.
The function receives a progress
and chunk
argument:
- The
progress
object contains the following elements:percent
,transferredBytes
andtotalBytes
. If it's not possible to retrieve the body size,totalBytes
will be0
. - The
chunk
argument is an instance ofUint8Array
. It's empty for the first call.
import ky from 'ky';
(async () => {
await ky('https://example.com', {
onDownloadProgress: (progress, chunk) => {
// Example output:
// `0% - 0 of 1271 bytes`
// `100% - 1271 of 1271 bytes`
console.log(`${progress.percent * 100}% - ${progress.transferredBytes} of ${progress.totalBytes} bytes`);
}
});
})();
ky.extend(defaultOptions)
Create a new ky
instance with some defaults overridden with your own.
In contrast to ky.create()
, ky.extend()
inherits defaults from its parent.
ky.create(defaultOptions)
Create a new Ky instance with complete new defaults.
import ky from 'ky';
// On https://my-site.com
const api = ky.create({prefixUrl: 'https://example.com/api'});
(async () => {
await api.get('users/123');
//=> 'https://example.com/api/users/123'
await api.get('/status', {prefixUrl: ''});
//=> 'https://my-site.com/status'
})();
defaultOptions
Type: object
ky.HTTPError
Exposed for instanceof
checks. The error has a response
property with the Response
object.
ky.TimeoutError
The error thrown when the request times out.
ky.stop
A Symbol
that can be returned by a beforeRetry
hook to stop the retry. This will also short circuit the remaining beforeRetry
hooks.
import ky from 'ky';
(async () => {
await ky('https://example.com', {
hooks: {
beforeRetry: [
async (request, options, errors, retryCount) => {
const shouldStopRetry = await ky('https://example.com/api');
if (shouldStopRetry) {
return ky.stop;
}
}
]
}
});
})();
Tips
Sending Form Data
Sending form data in Ky is identical to fetch
. Just pass a FormData
instance to the body
option. The Content-Type
header will be automatically set to multipart/form-data
. Setting it manually will result in an error.
import ky from 'ky';
(async () => {
// `multipart/form-data`
const formData = new FormData();
formData.append('food', 'fries');
formData.append('drink', 'icetea');
await ky.post(url, {
body: formData
});
})();
If you want to send the data in application/x-www-form-urlencoded
format, you will need to encode the data with URLSearchParams
.
import ky from 'ky';
(async () => {
// `application/x-www-form-urlencoded`
const searchParams = new URLSearchParams();
searchParams.set('food', 'fries');
searchParams.set('drink', 'icetea');
await ky.post(url, {
body: searchParams
});
})();
Cancellation
Fetch (and hence Ky) has built-in support for request cancellation through the AbortController
API. Read more.
Example:
import ky from 'ky';
const controller = new AbortController();
const {signal} = controller;
setTimeout(() => {
controller.abort();
}, 5000);
(async () => {
try {
console.log(await ky(url, {signal}).text());
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', error);
}
}
})();
FAQ
How do I use this in Node.js?
Check out ky-universal
.
How do I use this with a web app (React, Vue.js, etc.) that uses server-side rendering (SSR)?
Check out ky-universal
.
How do I test a browser library that uses this?
Either use a test runner that can run in the browser, like Mocha, or use AVA with ky-universal
. Read more.
How do I use this without a bundler like Webpack?
Upload the index.js
file in this repo somewhere, for example, to your website server, or use a CDN version. Then import the file.
<script type="module">
import ky from 'https://cdn.jsdelivr.net/npm/ky@latest/index.js';
(async () => {
const parsed = await ky('https://jsonplaceholder.typicode.com/todos/1').json();
console.log(parsed.title);
//=> 'delectus aut autem
})();
</script>
Alternatively, you can use the umd.js
file with a traditional <script>
tag (without type="module"
), in which case ky
will be a global.
<script src="https://cdn.jsdelivr.net/npm/ky@latest/umd.js"></script>
<script>
(async () => {
const client = ky.default;
const parsed = await client('https://jsonplaceholder.typicode.com/todos/1').json();
console.log(parsed.title);
//=> 'delectus aut autem
})();
</script>
got
How is it different from See my answer here. Got is maintained by the same people as Ky.
axios
?
How is it different from See my answer here.
r2
?
How is it different from See my answer in #10.
ky
mean?
What does It's just a random short npm package name I managed to get. It does, however, have a meaning in Japanese:
A form of text-able slang, KY is an abbreviation for 空気読めない (kuuki yomenai), which literally translates into “cannot read the air.” It's a phrase applied to someone who misses the implied meaning.
Browser support
The latest version of Chrome, Firefox, and Safari.
Node.js support
Ky requires Node.js 10 or later, but it indicates Node.js 8 in package.json so you can use it with Node.js 8 by polyfilling the globals without having Yarn fail on install. However, you should just use ky-universal
.
Related
- ky-universal - Use Ky in both Node.js and browsers
- got - Simplified HTTP requests for Node.js