axios 1.13.1 → 1.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +85 -0
- package/MIGRATION_GUIDE.md +876 -2
- package/README.md +136 -81
- package/dist/axios.js +253 -150
- package/dist/axios.js.map +1 -1
- package/dist/axios.min.js +2 -2
- package/dist/axios.min.js.map +1 -1
- package/dist/browser/axios.cjs +152 -168
- package/dist/browser/axios.cjs.map +1 -1
- package/dist/esm/axios.js +152 -168
- package/dist/esm/axios.js.map +1 -1
- package/dist/esm/axios.min.js +2 -2
- package/dist/esm/axios.min.js.map +1 -1
- package/dist/node/axios.cjs +210 -218
- package/dist/node/axios.cjs.map +1 -1
- package/index.d.cts +21 -3
- package/index.d.ts +27 -7
- package/lib/adapters/README.md +1 -1
- package/lib/adapters/http.js +35 -28
- package/lib/adapters/xhr.js +2 -2
- package/lib/cancel/CanceledError.js +15 -18
- package/lib/core/Axios.js +8 -3
- package/lib/core/AxiosError.js +65 -102
- package/lib/core/InterceptorManager.js +2 -1
- package/lib/core/mergeConfig.js +2 -3
- package/lib/core/transformData.js +1 -1
- package/lib/env/data.js +1 -1
- package/lib/helpers/buildURL.js +7 -10
- package/lib/helpers/composeSignals.js +1 -1
- package/lib/helpers/cookies.js +1 -1
- package/lib/helpers/isAxiosError.js +1 -1
- package/lib/helpers/parseHeaders.js +1 -1
- package/lib/helpers/spread.js +1 -1
- package/lib/utils.js +24 -7
- package/package.json +26 -2
package/README.md
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
|
|
2
|
-
<h3 align="center"> 🥇 Gold sponsors <br> </h3> <table align="center" width="100%"><tr width="33.333333333333336%"><td align="center" width="33.333333333333336%"> <a href="https://
|
|
3
|
-
</td><td align="center" width="33.333333333333336%"> <a href="https://www.principal.com/about-us?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="133px" height="43px" src="https://axios-http.com/assets/sponsors/principal.svg" alt="Principal Financial Group"/> </a> <p align="center" title="We’re bound by one common purpose: to give you the financial tools, resources and information you need to live your best life.">We’re bound by one common purpose: to give you the financial tools, resources and information you ne...</p> <p align="center"> <a href="https://www.principal.com/about-us?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>www.principal.com</b></a> </p>
|
|
2
|
+
<h3 align="center"> 🥇 Gold sponsors <br> </h3> <table align="center" width="100%"><tr width="33.333333333333336%"><td align="center" width="33.333333333333336%"> <a href="https://www.principal.com/about-us?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="133px" height="43px" src="https://axios-http.com/assets/sponsors/principal.svg" alt="Principal Financial Group"/> </a> <p align="center" title="We’re bound by one common purpose: to give you the financial tools, resources and information you need to live your best life.">We’re bound by one common purpose: to give you the financial tools, resources and information you ne...</p> <p align="center"> <a href="https://www.principal.com/about-us?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>www.principal.com</b></a> </p>
|
|
4
3
|
</td><td align="center" width="33.333333333333336%"> <a href="https://twicsy.com/buy-instagram-followers?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="85px" height="70px" src="https://axios-http.com/assets/sponsors/opencollective/dfa9670ad5e66eea17315332453c7f4e3a3b5905.png" alt="Buy Instagram Followers Twicsy"/> </a> <p align="center" title="Buy real Instagram followers from Twicsy starting at only $2.97. Twicsy has been voted the best site to buy followers from the likes of US Magazine.">Buy real Instagram followers from Twicsy starting at only $2.97. Twicsy has been voted the best site...</p> <p align="center"> <a href="https://twicsy.com/buy-instagram-followers?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>twicsy.com</b></a> </p>
|
|
5
|
-
</td
|
|
6
|
-
</td><td align="center" width="33.333333333333336%"> <a href="https://route4me.com/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <picture> <source width="200px" height="51px" media="(prefers-color-scheme: dark)" srcset="https://axios-http.com/assets/sponsors/route4me_white.png"> <img width="200px" height="51px" src="https://axios-http.com/assets/sponsors/route4me.png" alt="Route4Me"/> </picture> </a> <p align="center" title="Best Route Planning And Route Optimization Software">Best Route Planning And Route Optimization Software</p> <p align="center"> <a href="https://route4me.com/platform/route-optimization-software?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>Explore</b></a> | <a href="https://route4me.com/platform/marketplace/pricing?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>Free Trial</b></a> | <a href="https://route4me.com/contact?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>Contact</b></a> </p>
|
|
4
|
+
</td><td align="center" width="33.333333333333336%"> <a href="https://www.descope.com/?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <picture> <source width="200px" height="52px" media="(prefers-color-scheme: dark)" srcset="https://axios-http.com/assets/sponsors/descope_white.png"> <img width="200px" height="52px" src="https://axios-http.com/assets/sponsors/descope.png" alt="Descope"/> </picture> </a> <p align="center" title="Hi, we're Descope! We are building something in the authentication space for app developers and can’t wait to place it in your hands.">Hi, we're Descope! We are building something in the authentication space for app developers and...</p> <p align="center"> <a href="https://www.descope.com/?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship" target="_blank"><b>Website</b></a> | <a href="https://docs.descope.com/?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship" target="_blank"><b>Docs</b></a> | <a href="https://www.descope.com/community?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship" target="_blank"><b>Community</b></a> </p>
|
|
5
|
+
</td></tr><tr width="33.333333333333336%"><td align="center" width="33.333333333333336%"> <a href="https://route4me.com/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <picture> <source width="200px" height="51px" media="(prefers-color-scheme: dark)" srcset="https://axios-http.com/assets/sponsors/route4me_white.png"> <img width="200px" height="51px" src="https://axios-http.com/assets/sponsors/route4me.png" alt="Route4Me"/> </picture> </a> <p align="center" title="Best Route Planning And Route Optimization Software">Best Route Planning And Route Optimization Software</p> <p align="center"> <a href="https://route4me.com/platform/route-optimization-software?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>Explore</b></a> | <a href="https://route4me.com/platform/marketplace/pricing?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>Free Trial</b></a> | <a href="https://route4me.com/contact?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>Contact</b></a> </p>
|
|
7
6
|
</td><td align="center" width="33.333333333333336%"> <a href="https://buzzoid.com/buy-instagram-followers/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="62px" height="70px" src="https://axios-http.com/assets/sponsors/opencollective/e1625cb54e10ee40180c99d1495a462e9d6664a4.png" alt="Buzzoid - Buy Instagram Followers"/> </a> <p align="center" title="At Buzzoid, you can buy Instagram followers quickly, safely, and easily with just a few clicks. Rated world's #1 IG service since 2012.">At Buzzoid, you can buy Instagram followers quickly, safely, and easily with just a few clicks. Rate...</p> <p align="center"> <a href="https://buzzoid.com/buy-instagram-followers/?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>buzzoid.com</b></a> </p>
|
|
8
|
-
</td></tr><tr width="33.333333333333336%"><td align="center" width="33.333333333333336%"> <a href="https://www.famety.net/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="70px" height="70px" src="https://axios-http.com/assets/sponsors/opencollective/56645c65d4bad0ab84265e02430d19d64afde927.png" alt="Famety - Buy Instagram Followers"/> </a> <p align="center" title="At Famety, you can grow your social media following quickly, safely, and easily with just a few clicks. Rated the world’s #1 social media service since 2013.">At Famety, you can grow your social media following quickly, safely, and easily with just a few clic...</p> <p align="center"> <a href="https://www.famety.net/?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>www.famety.net</b></a> </p>
|
|
9
7
|
</td><td align="center" width="33.333333333333336%"> <a href="https://poprey.com/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="70px" height="70px" src="https://axios-http.com/assets/sponsors/opencollective/e699ec99f7df3a203ddbc49d3c7712a907e628ea.png" alt="Poprey - Buy Instagram Likes"/> </a> <p align="center" title="Buy Instagram Likes">Buy Instagram Likes</p> <p align="center"> <a href="https://poprey.com/?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>poprey.com</b></a> </p>
|
|
10
|
-
</td><td align="center" width="33.333333333333336%"> <a href="https://requestly.com/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="71px" height="70px" src="https://axios-http.com/assets/sponsors/opencollective/16450b4dc0deb9dab5a511bf2bc8b8b4ac33412f.png" alt="Requestly"/> </a> <p align="center" title="A lightweight open-source API Development, Testing & Mocking platform">A lightweight open-source API Development, Testing & Mocking platform</p> <p align="center"> <a href="https://requestly.com/?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>requestly.com</b></a> </p>
|
|
11
|
-
</td></tr><tr width="33.333333333333336%"><td align="center" width="33.333333333333336%"> <a href="https://opencollective.com/axios/contribute" target="_blank" >💜 Become a sponsor</a>
|
|
8
|
+
</td></tr><tr width="33.333333333333336%"><td align="center" width="33.333333333333336%"> <a href="https://requestly.com/?utm_source=axios&utm_medium=sponsorlist&utm_campaign=sponsorship" style="padding: 10px; display: inline-block" target="_blank"> <img width="71px" height="70px" src="https://axios-http.com/assets/sponsors/opencollective/16450b4dc0deb9dab5a511bf2bc8b8b4ac33412f.png" alt="Requestly"/> </a> <p align="center" title="A lightweight open-source API Development, Testing & Mocking platform">A lightweight open-source API Development, Testing & Mocking platform</p> <p align="center"> <a href="https://requestly.com/?utm_source=axios&utm_medium=readme_sponsorlist&utm_campaign=sponsorship" target="_blank"><b>requestly.com</b></a> </p>
|
|
12
9
|
</td><td align="center" width="33.333333333333336%"> <a href="https://opencollective.com/axios/contribute" target="_blank" >💜 Become a sponsor</a>
|
|
13
10
|
</td><td align="center" width="33.333333333333336%"> <a href="https://opencollective.com/axios/contribute" target="_blank" >💜 Become a sponsor</a>
|
|
14
11
|
</td></tr></table>
|
|
@@ -68,6 +65,7 @@
|
|
|
68
65
|
- [Interceptors](#interceptors)
|
|
69
66
|
- [Multiple Interceptors](#multiple-interceptors)
|
|
70
67
|
- [Handling Errors](#handling-errors)
|
|
68
|
+
- [Handling Timeouts](#handling-timeouts)
|
|
71
69
|
- [Cancellation](#cancellation)
|
|
72
70
|
- [AbortController](#abortcontroller)
|
|
73
71
|
- [CancelToken 👎](#canceltoken-deprecated)
|
|
@@ -164,7 +162,7 @@ import axios from 'axios';
|
|
|
164
162
|
console.log(axios.isCancel('something'));
|
|
165
163
|
````
|
|
166
164
|
|
|
167
|
-
If you use `require` for importing, **only default export is available**:
|
|
165
|
+
If you use `require` for importing, **only the default export is available**:
|
|
168
166
|
|
|
169
167
|
```js
|
|
170
168
|
const axios = require('axios');
|
|
@@ -191,37 +189,27 @@ const axios = require('axios/dist/browser/axios.cjs'); // browser commonJS bundl
|
|
|
191
189
|
Using jsDelivr CDN (ES5 UMD browser module):
|
|
192
190
|
|
|
193
191
|
```html
|
|
194
|
-
<script src="https://cdn.jsdelivr.net/npm/axios@1.
|
|
192
|
+
<script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script>
|
|
195
193
|
```
|
|
196
194
|
|
|
197
195
|
Using unpkg CDN:
|
|
198
196
|
|
|
199
197
|
```html
|
|
200
|
-
<script src="https://unpkg.com/axios@1.
|
|
198
|
+
<script src="https://unpkg.com/axios@1.13.2/dist/axios.min.js"></script>
|
|
201
199
|
```
|
|
202
200
|
|
|
203
201
|
## Example
|
|
204
202
|
|
|
205
|
-
> **Note**: CommonJS usage
|
|
206
|
-
> In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with `require()`, use the following approach:
|
|
207
|
-
|
|
208
203
|
```js
|
|
209
204
|
import axios from 'axios';
|
|
210
205
|
//const axios = require('axios'); // legacy way
|
|
211
206
|
|
|
212
|
-
|
|
213
|
-
axios.get('/user?ID=12345')
|
|
214
|
-
.
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
.catch(function (error) {
|
|
219
|
-
// handle error
|
|
220
|
-
console.log(error);
|
|
221
|
-
})
|
|
222
|
-
.finally(function () {
|
|
223
|
-
// always executed
|
|
224
|
-
});
|
|
207
|
+
try {
|
|
208
|
+
const response = await axios.get('/user?ID=12345');
|
|
209
|
+
console.log(response);
|
|
210
|
+
} catch (error) {
|
|
211
|
+
console.error(error);
|
|
212
|
+
}
|
|
225
213
|
|
|
226
214
|
// Optionally the request above could also be done as
|
|
227
215
|
axios.get('/user', {
|
|
@@ -256,16 +244,11 @@ async function getUser() {
|
|
|
256
244
|
Performing a `POST` request
|
|
257
245
|
|
|
258
246
|
```js
|
|
259
|
-
axios.post('/user', {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
console.log(response);
|
|
265
|
-
})
|
|
266
|
-
.catch(function (error) {
|
|
267
|
-
console.log(error);
|
|
268
|
-
});
|
|
247
|
+
const response = await axios.post('/user', {
|
|
248
|
+
firstName: 'Fred',
|
|
249
|
+
lastName: 'Flintstone'
|
|
250
|
+
});
|
|
251
|
+
console.log(response);
|
|
269
252
|
```
|
|
270
253
|
|
|
271
254
|
Performing multiple concurrent requests
|
|
@@ -306,14 +289,12 @@ axios({
|
|
|
306
289
|
|
|
307
290
|
```js
|
|
308
291
|
// GET request for remote image in node.js
|
|
309
|
-
axios({
|
|
292
|
+
const response = await axios({
|
|
310
293
|
method: 'get',
|
|
311
294
|
url: 'https://bit.ly/2mTM3nY',
|
|
312
295
|
responseType: 'stream'
|
|
313
|
-
})
|
|
314
|
-
|
|
315
|
-
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
|
|
316
|
-
});
|
|
296
|
+
});
|
|
297
|
+
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
|
|
317
298
|
```
|
|
318
299
|
|
|
319
300
|
##### axios(url[, config])
|
|
@@ -387,9 +368,9 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
387
368
|
// `method` is the request method to be used when making the request
|
|
388
369
|
method: 'get', // default
|
|
389
370
|
|
|
390
|
-
// `baseURL` will be prepended to `url` unless `url` is absolute and option `allowAbsoluteUrls` is set to true.
|
|
371
|
+
// `baseURL` will be prepended to `url` unless `url` is absolute and the option `allowAbsoluteUrls` is set to true.
|
|
391
372
|
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
|
|
392
|
-
// to methods of that instance.
|
|
373
|
+
// to the methods of that instance.
|
|
393
374
|
baseURL: 'https://some-domain.com/api/',
|
|
394
375
|
|
|
395
376
|
// `allowAbsoluteUrls` determines whether or not absolute URLs will override a configured `baseUrl`.
|
|
@@ -431,7 +412,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
431
412
|
// Custom encoder function which sends key/value pairs in an iterative fashion.
|
|
432
413
|
encode?: (param: string): string => { /* Do custom operations here and return transformed string */ },
|
|
433
414
|
|
|
434
|
-
// Custom serializer function for the entire parameter. Allows user to mimic pre 1.x behaviour.
|
|
415
|
+
// Custom serializer function for the entire parameter. Allows the user to mimic pre 1.x behaviour.
|
|
435
416
|
serialize?: (params: Record<string, any>, options?: ParamsSerializerOptions ),
|
|
436
417
|
|
|
437
418
|
// Configuration for formatting array indexes in the params.
|
|
@@ -439,8 +420,8 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
439
420
|
},
|
|
440
421
|
|
|
441
422
|
// `data` is the data to be sent as the request body
|
|
442
|
-
// Only applicable for request methods 'PUT', 'POST', 'DELETE
|
|
443
|
-
// When no `transformRequest` is set, must be of one of the following types:
|
|
423
|
+
// Only applicable for request methods 'PUT', 'POST', 'DELETE', and 'PATCH'
|
|
424
|
+
// When no `transformRequest` is set, it must be of one of the following types:
|
|
444
425
|
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
|
|
445
426
|
// - Browser only: FormData, File, Blob
|
|
446
427
|
// - Node only: Stream, Buffer, FormData (form-data package)
|
|
@@ -492,7 +473,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
492
473
|
// 'utf8', 'UTF8', 'utf16le', 'UTF16LE'
|
|
493
474
|
responseEncoding: 'utf8', // default
|
|
494
475
|
|
|
495
|
-
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
|
|
476
|
+
// `xsrfCookieName` is the name of the cookie to use as a value for the xsrf token
|
|
496
477
|
xsrfCookieName: 'XSRF-TOKEN', // default
|
|
497
478
|
|
|
498
479
|
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
|
|
@@ -571,7 +552,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
571
552
|
// Use `false` to disable proxies, ignoring environment variables.
|
|
572
553
|
// `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
|
|
573
554
|
// supplies credentials.
|
|
574
|
-
// This will set
|
|
555
|
+
// This will set a `Proxy-Authorization` header, overwriting any existing
|
|
575
556
|
// `Proxy-Authorization` custom headers you have set using `headers`.
|
|
576
557
|
// If the proxy server uses HTTPS, then you must set the protocol to `https`.
|
|
577
558
|
proxy: {
|
|
@@ -643,7 +624,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
643
624
|
|
|
644
625
|
## Response Schema
|
|
645
626
|
|
|
646
|
-
The response
|
|
627
|
+
The response to a request contains the following information.
|
|
647
628
|
|
|
648
629
|
```js
|
|
649
630
|
{
|
|
@@ -674,14 +655,12 @@ The response for a request contains the following information.
|
|
|
674
655
|
When using `then`, you will receive the response as follows:
|
|
675
656
|
|
|
676
657
|
```js
|
|
677
|
-
axios.get('/user/12345')
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
console.log(response.config);
|
|
684
|
-
});
|
|
658
|
+
const response = await axios.get('/user/12345')
|
|
659
|
+
console.log(response.data);
|
|
660
|
+
console.log(response.status);
|
|
661
|
+
console.log(response.statusText);
|
|
662
|
+
console.log(response.headers);
|
|
663
|
+
console.log(response.config);
|
|
685
664
|
```
|
|
686
665
|
|
|
687
666
|
When using `catch`, or passing a [rejection callback](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) as second parameter of `then`, the response will be available through the `error` object as explained in the [Handling Errors](#handling-errors) section.
|
|
@@ -735,7 +714,8 @@ instance.get('/longRequest', {
|
|
|
735
714
|
|
|
736
715
|
## Interceptors
|
|
737
716
|
|
|
738
|
-
You can intercept requests or responses before
|
|
717
|
+
You can intercept requests or responses before methods like `.get()` or `.post()`
|
|
718
|
+
resolve their promises (before code inside `then` or `catch`, or after `await`)
|
|
739
719
|
|
|
740
720
|
```js
|
|
741
721
|
|
|
@@ -743,20 +723,20 @@ const instance = axios.create();
|
|
|
743
723
|
|
|
744
724
|
// Add a request interceptor
|
|
745
725
|
instance.interceptors.request.use(function (config) {
|
|
746
|
-
// Do something before request is sent
|
|
726
|
+
// Do something before the request is sent
|
|
747
727
|
return config;
|
|
748
728
|
}, function (error) {
|
|
749
|
-
// Do something with request error
|
|
729
|
+
// Do something with the request error
|
|
750
730
|
return Promise.reject(error);
|
|
751
731
|
});
|
|
752
732
|
|
|
753
733
|
// Add a response interceptor
|
|
754
734
|
instance.interceptors.response.use(function (response) {
|
|
755
|
-
// Any status code that
|
|
735
|
+
// Any status code that lies within the range of 2xx causes this function to trigger
|
|
756
736
|
// Do something with response data
|
|
757
737
|
return response;
|
|
758
738
|
}, function (error) {
|
|
759
|
-
// Any status codes that
|
|
739
|
+
// Any status codes that fall outside the range of 2xx cause this function to trigger
|
|
760
740
|
// Do something with response error
|
|
761
741
|
return Promise.reject(error);
|
|
762
742
|
});
|
|
@@ -788,7 +768,7 @@ instance.interceptors.request.use(function () {/*...*/});
|
|
|
788
768
|
|
|
789
769
|
When you add request interceptors, they are presumed to be asynchronous by default. This can cause a delay
|
|
790
770
|
in the execution of your axios request when the main thread is blocked (a promise is created under the hood for
|
|
791
|
-
the interceptor and your request gets put
|
|
771
|
+
the interceptor and your request gets put at the bottom of the call stack). If your request interceptors are synchronous you can add a flag
|
|
792
772
|
to the options object that will tell axios to run the code synchronously and avoid any delays in request execution.
|
|
793
773
|
|
|
794
774
|
```js
|
|
@@ -814,11 +794,46 @@ axios.interceptors.request.use(function (config) {
|
|
|
814
794
|
}, null, { runWhen: onGetCall });
|
|
815
795
|
```
|
|
816
796
|
|
|
817
|
-
> **Note:** options parameter(having `synchronous` and `runWhen` properties) is only supported for request interceptors at the moment.
|
|
797
|
+
> **Note:** The options parameter(having `synchronous` and `runWhen` properties) is only supported for request interceptors at the moment.
|
|
798
|
+
|
|
799
|
+
### Interceptor Execution Order
|
|
800
|
+
|
|
801
|
+
**Important:** Interceptors have different execution orders depending on their type!
|
|
802
|
+
|
|
803
|
+
Request interceptors are executed in **reverse order** (LIFO - Last In, First Out). This means the _last_ interceptor added is executed **first**.
|
|
804
|
+
|
|
805
|
+
Response interceptors are executed in the **order they were added** (FIFO - First In, First Out). This means the _first_ interceptor added is executed **first**.
|
|
806
|
+
|
|
807
|
+
Example:
|
|
808
|
+
|
|
809
|
+
```js
|
|
810
|
+
const instance = axios.create();
|
|
811
|
+
|
|
812
|
+
const interceptor = (id) => (base) => {
|
|
813
|
+
console.log(id);
|
|
814
|
+
return base;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
instance.interceptors.request.use(interceptor('Request Interceptor 1'));
|
|
818
|
+
instance.interceptors.request.use(interceptor('Request Interceptor 2'));
|
|
819
|
+
instance.interceptors.request.use(interceptor('Request Interceptor 3'));
|
|
820
|
+
instance.interceptors.response.use(interceptor('Response Interceptor 1'));
|
|
821
|
+
instance.interceptors.response.use(interceptor('Response Interceptor 2'));
|
|
822
|
+
instance.interceptors.response.use(interceptor('Response Interceptor 3'));
|
|
823
|
+
|
|
824
|
+
// Console output:
|
|
825
|
+
// Request Interceptor 3
|
|
826
|
+
// Request Interceptor 2
|
|
827
|
+
// Request Interceptor 1
|
|
828
|
+
// [HTTP request is made]
|
|
829
|
+
// Response Interceptor 1
|
|
830
|
+
// Response Interceptor 2
|
|
831
|
+
// Response Interceptor 3
|
|
832
|
+
```
|
|
818
833
|
|
|
819
834
|
### Multiple Interceptors
|
|
820
835
|
|
|
821
|
-
Given you add multiple response interceptors
|
|
836
|
+
Given that you add multiple response interceptors
|
|
822
837
|
and when the response was fulfilled
|
|
823
838
|
- then each interceptor is executed
|
|
824
839
|
- then they are executed in the order they were added
|
|
@@ -829,11 +844,11 @@ and when the response was fulfilled
|
|
|
829
844
|
- then the following rejection-interceptor is called
|
|
830
845
|
- once caught, another following fulfill-interceptor is called again (just like in a promise chain).
|
|
831
846
|
|
|
832
|
-
Read [the interceptor tests](./test/specs/interceptors.spec.js)
|
|
847
|
+
Read [the interceptor tests](./test/specs/interceptors.spec.js) to see all this in code.
|
|
833
848
|
|
|
834
849
|
## Error Types
|
|
835
850
|
|
|
836
|
-
There are many different axios error messages that can appear
|
|
851
|
+
There are many different axios error messages that can appear which can provide basic information about the specifics of the error and where opportunities may lie in debugging.
|
|
837
852
|
|
|
838
853
|
The general structure of axios errors is as follows:
|
|
839
854
|
| Property | Definition |
|
|
@@ -842,7 +857,7 @@ The general structure of axios errors is as follows:
|
|
|
842
857
|
| name | This defines where the error originated from. For axios, it will always be an 'AxiosError'. |
|
|
843
858
|
| stack | Provides the stack trace of the error. |
|
|
844
859
|
| config | An axios config object with specific instance configurations defined by the user from when the request was made |
|
|
845
|
-
| code | Represents an axios identified error. The table below lists
|
|
860
|
+
| code | Represents an axios identified error. The table below lists specific definitions for internal axios error. |
|
|
846
861
|
| status | HTTP response status code. See [here](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) for common HTTP response status code meanings.
|
|
847
862
|
|
|
848
863
|
Below is a list of potential axios identified error:
|
|
@@ -856,7 +871,7 @@ Below is a list of potential axios identified error:
|
|
|
856
871
|
| ERR_INVALID_URL | Invalid URL provided for axios request. |
|
|
857
872
|
| ECONNABORTED | Typically indicates that the request has been timed out (unless `transitional.clarifyTimeoutError` is set) or aborted by the browser or its plugin. |
|
|
858
873
|
| ERR_CANCELED | Feature or method is canceled explicitly by the user using an AbortSignal (or a CancelToken). |
|
|
859
|
-
| ETIMEDOUT | Request timed out due to exceeding default axios timelimit. `transitional.clarifyTimeoutError` must be set to `true`, otherwise a generic `ECONNABORTED` error will be thrown instead. |
|
|
874
|
+
| ETIMEDOUT | Request timed out due to exceeding the default axios timelimit. `transitional.clarifyTimeoutError` must be set to `true`, otherwise a generic `ECONNABORTED` error will be thrown instead. |
|
|
860
875
|
| ERR_NETWORK | Network-related issue. In the browser, this error can also be caused by a [CORS](https://developer.mozilla.org/ru/docs/Web/HTTP/Guides/CORS) or [Mixed Content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) policy violation. The browser does not allow the JS code to clarify the real reason for the error caused by security issues, so please check the console. |
|
|
861
876
|
| ERR_FR_TOO_MANY_REDIRECTS | Request is redirected too many times; exceeds max redirects specified in axios configuration. |
|
|
862
877
|
| ERR_BAD_RESPONSE | Response cannot be parsed properly or is in an unexpected format. Usually related to a response with `5xx` status code. |
|
|
@@ -864,7 +879,7 @@ Below is a list of potential axios identified error:
|
|
|
864
879
|
|
|
865
880
|
## Handling Errors
|
|
866
881
|
|
|
867
|
-
|
|
882
|
+
The default behavior is to reject every response that returns with a status code that falls out of the range of 2xx and treat it as an error.
|
|
868
883
|
|
|
869
884
|
```js
|
|
870
885
|
axios.get('/user/12345')
|
|
@@ -907,11 +922,32 @@ axios.get('/user/12345')
|
|
|
907
922
|
});
|
|
908
923
|
```
|
|
909
924
|
|
|
925
|
+
## Handling Timeouts
|
|
926
|
+
|
|
927
|
+
```js
|
|
928
|
+
async function fetchWithTimeout() {
|
|
929
|
+
try {
|
|
930
|
+
const response = await axios.get('https://example.com/data', {
|
|
931
|
+
timeout: 5000 // 5 seconds
|
|
932
|
+
});
|
|
933
|
+
|
|
934
|
+
console.log('Response:', response.data);
|
|
935
|
+
|
|
936
|
+
} catch (error) {
|
|
937
|
+
if (axios.isAxiosError(error) && error.code === 'ECONNABORTED') {
|
|
938
|
+
console.error('❌ Request timed out!');
|
|
939
|
+
} else {
|
|
940
|
+
console.error('❌ Error:', error.message);
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
```
|
|
945
|
+
|
|
910
946
|
## Cancellation
|
|
911
947
|
|
|
912
948
|
### AbortController
|
|
913
949
|
|
|
914
|
-
Starting from `v0.22.0` Axios supports AbortController to cancel requests in fetch API way:
|
|
950
|
+
Starting from `v0.22.0` Axios supports AbortController to cancel requests in a fetch API way:
|
|
915
951
|
|
|
916
952
|
```js
|
|
917
953
|
const controller = new AbortController();
|
|
@@ -1068,7 +1104,7 @@ The server will handle it as:
|
|
|
1068
1104
|
If your backend body-parser (like `body-parser` of `express.js`) supports nested objects decoding, you will get the same object on the server-side automatically
|
|
1069
1105
|
|
|
1070
1106
|
```js
|
|
1071
|
-
|
|
1107
|
+
const app = express();
|
|
1072
1108
|
|
|
1073
1109
|
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
|
|
1074
1110
|
|
|
@@ -1084,7 +1120,7 @@ If your backend body-parser (like `body-parser` of `express.js`) supports nested
|
|
|
1084
1120
|
|
|
1085
1121
|
### FormData
|
|
1086
1122
|
|
|
1087
|
-
To send the data as a `multipart/
|
|
1123
|
+
To send the data as a `multipart/form-data` you need to pass a formData instance as a payload.
|
|
1088
1124
|
Setting the `Content-Type` header is not required as Axios guesses it based on the payload type.
|
|
1089
1125
|
|
|
1090
1126
|
```js
|
|
@@ -1225,7 +1261,7 @@ All files will be sent with the same field names: `files[]`.
|
|
|
1225
1261
|
|
|
1226
1262
|
## 🆕 HTML Form Posting (browser)
|
|
1227
1263
|
|
|
1228
|
-
Pass HTML Form element as a payload to submit it as `multipart/form-data` content.
|
|
1264
|
+
Pass an HTML Form element as a payload to submit it as `multipart/form-data` content.
|
|
1229
1265
|
|
|
1230
1266
|
```js
|
|
1231
1267
|
await axios.postForm('https://httpbin.org/post', document.querySelector('#htmlForm'));
|
|
@@ -1337,7 +1373,7 @@ const {data} = await axios.post(SERVER_URL, readableStream, {
|
|
|
1337
1373
|
|
|
1338
1374
|
> **⚠️ Warning**
|
|
1339
1375
|
> It is recommended to disable redirects by setting maxRedirects: 0 to upload the stream in the **node.js** environment,
|
|
1340
|
-
> as follow-redirects package will buffer the entire stream in RAM without following the "backpressure" algorithm.
|
|
1376
|
+
> as the follow-redirects package will buffer the entire stream in RAM without following the "backpressure" algorithm.
|
|
1341
1377
|
|
|
1342
1378
|
|
|
1343
1379
|
## 🆕 Rate limiting
|
|
@@ -1358,8 +1394,8 @@ const {data} = await axios.post(LOCAL_SERVER_URL, myBuffer, {
|
|
|
1358
1394
|
|
|
1359
1395
|
Axios has its own `AxiosHeaders` class to manipulate headers using a Map-like API that guarantees caseless work.
|
|
1360
1396
|
Although HTTP is case-insensitive in headers, Axios will retain the case of the original header for stylistic reasons
|
|
1361
|
-
and
|
|
1362
|
-
The old approach of directly manipulating headers object is still available, but deprecated and not recommended for future usage.
|
|
1397
|
+
and as a workaround when servers mistakenly consider the header's case.
|
|
1398
|
+
The old approach of directly manipulating the headers object is still available, but deprecated and not recommended for future usage.
|
|
1363
1399
|
|
|
1364
1400
|
### Working with headers
|
|
1365
1401
|
|
|
@@ -1451,7 +1487,7 @@ set(headers?: RawAxiosHeaders | AxiosHeaders | string, rewrite?: boolean);
|
|
|
1451
1487
|
```
|
|
1452
1488
|
|
|
1453
1489
|
The `rewrite` argument controls the overwriting behavior:
|
|
1454
|
-
- `false` - do not overwrite if header's value is set (is not `undefined`)
|
|
1490
|
+
- `false` - do not overwrite if the header's value is set (is not `undefined`)
|
|
1455
1491
|
- `undefined` (default) - overwrite the header unless its value is set to `false`
|
|
1456
1492
|
- `true` - rewrite anyway
|
|
1457
1493
|
|
|
@@ -1540,7 +1576,7 @@ Returns `true` if at least one header has been cleared.
|
|
|
1540
1576
|
If the headers object was changed directly, it can have duplicates with the same name but in different cases.
|
|
1541
1577
|
This method normalizes the headers object by combining duplicate keys into one.
|
|
1542
1578
|
Axios uses this method internally after calling each interceptor.
|
|
1543
|
-
Set `format` to true for converting
|
|
1579
|
+
Set `format` to true for converting header names to lowercase and capitalizing the initial letters (`cOntEnt-type` => `Content-Type`)
|
|
1544
1580
|
|
|
1545
1581
|
```js
|
|
1546
1582
|
const headers = new AxiosHeaders({
|
|
@@ -1573,7 +1609,7 @@ Returns a new `AxiosHeaders` instance.
|
|
|
1573
1609
|
toJSON(asStrings?: boolean): RawAxiosHeaders;
|
|
1574
1610
|
````
|
|
1575
1611
|
|
|
1576
|
-
Resolve all internal
|
|
1612
|
+
Resolve all internal header values into a new null prototype object.
|
|
1577
1613
|
Set `asStrings` to true to resolve arrays as a string containing all elements, separated by commas.
|
|
1578
1614
|
|
|
1579
1615
|
### AxiosHeaders.from(thing?)
|
|
@@ -1629,7 +1665,7 @@ const fetchAxios = axios.create({
|
|
|
1629
1665
|
const {data} = fetchAxios.get(url);
|
|
1630
1666
|
```
|
|
1631
1667
|
|
|
1632
|
-
The adapter supports the same functionality as `xhr` adapter, **including upload and download progress capturing**.
|
|
1668
|
+
The adapter supports the same functionality as the `xhr` adapter, **including upload and download progress capturing**.
|
|
1633
1669
|
Also, it supports additional response types such as `stream` and `formdata` (if supported by the environment).
|
|
1634
1670
|
|
|
1635
1671
|
### 🔥 Custom fetch
|
|
@@ -1764,6 +1800,25 @@ If use ESM, your settings should be fine.
|
|
|
1764
1800
|
If you compile TypeScript to CJS and you can’t use `"moduleResolution": "node 16"`, you have to enable `esModuleInterop`.
|
|
1765
1801
|
If you use TypeScript to type check CJS JavaScript code, your only option is to use `"moduleResolution": "node16"`.
|
|
1766
1802
|
|
|
1803
|
+
|
|
1804
|
+
You can also create a custom instance with typed interceptors:
|
|
1805
|
+
|
|
1806
|
+
```typescript
|
|
1807
|
+
import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
|
|
1808
|
+
|
|
1809
|
+
const apiClient: AxiosInstance = axios.create({
|
|
1810
|
+
baseURL: 'https://api.example.com',
|
|
1811
|
+
timeout: 10000,
|
|
1812
|
+
});
|
|
1813
|
+
|
|
1814
|
+
apiClient.interceptors.request.use(
|
|
1815
|
+
(config: InternalAxiosRequestConfig) => {
|
|
1816
|
+
// Add auth token
|
|
1817
|
+
return config;
|
|
1818
|
+
}
|
|
1819
|
+
);
|
|
1820
|
+
```
|
|
1821
|
+
|
|
1767
1822
|
## Online one-click setup
|
|
1768
1823
|
|
|
1769
1824
|
You can use Gitpod, an online IDE(which is free for Open Source) for contributing or running the examples online.
|