axios 1.13.2 → 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 +67 -0
- package/MIGRATION_GUIDE.md +876 -2
- package/README.md +138 -80
- 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 +187 -200
- 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 +13 -10
- 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,12 +1,12 @@
|
|
|
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
|
|
9
|
-
</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>
|
|
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>
|
|
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>
|
|
9
|
+
</td><td align="center" width="33.333333333333336%"> <a href="https://opencollective.com/axios/contribute" target="_blank" >💜 Become a sponsor</a>
|
|
10
10
|
</td><td align="center" width="33.333333333333336%"> <a href="https://opencollective.com/axios/contribute" target="_blank" >💜 Become a sponsor</a>
|
|
11
11
|
</td></tr></table>
|
|
12
12
|
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
- [Interceptors](#interceptors)
|
|
66
66
|
- [Multiple Interceptors](#multiple-interceptors)
|
|
67
67
|
- [Handling Errors](#handling-errors)
|
|
68
|
+
- [Handling Timeouts](#handling-timeouts)
|
|
68
69
|
- [Cancellation](#cancellation)
|
|
69
70
|
- [AbortController](#abortcontroller)
|
|
70
71
|
- [CancelToken 👎](#canceltoken-deprecated)
|
|
@@ -161,7 +162,7 @@ import axios from 'axios';
|
|
|
161
162
|
console.log(axios.isCancel('something'));
|
|
162
163
|
````
|
|
163
164
|
|
|
164
|
-
If you use `require` for importing, **only default export is available**:
|
|
165
|
+
If you use `require` for importing, **only the default export is available**:
|
|
165
166
|
|
|
166
167
|
```js
|
|
167
168
|
const axios = require('axios');
|
|
@@ -188,37 +189,27 @@ const axios = require('axios/dist/browser/axios.cjs'); // browser commonJS bundl
|
|
|
188
189
|
Using jsDelivr CDN (ES5 UMD browser module):
|
|
189
190
|
|
|
190
191
|
```html
|
|
191
|
-
<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>
|
|
192
193
|
```
|
|
193
194
|
|
|
194
195
|
Using unpkg CDN:
|
|
195
196
|
|
|
196
197
|
```html
|
|
197
|
-
<script src="https://unpkg.com/axios@1.
|
|
198
|
+
<script src="https://unpkg.com/axios@1.13.2/dist/axios.min.js"></script>
|
|
198
199
|
```
|
|
199
200
|
|
|
200
201
|
## Example
|
|
201
202
|
|
|
202
|
-
> **Note**: CommonJS usage
|
|
203
|
-
> In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with `require()`, use the following approach:
|
|
204
|
-
|
|
205
203
|
```js
|
|
206
204
|
import axios from 'axios';
|
|
207
205
|
//const axios = require('axios'); // legacy way
|
|
208
206
|
|
|
209
|
-
|
|
210
|
-
axios.get('/user?ID=12345')
|
|
211
|
-
.
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
.catch(function (error) {
|
|
216
|
-
// handle error
|
|
217
|
-
console.log(error);
|
|
218
|
-
})
|
|
219
|
-
.finally(function () {
|
|
220
|
-
// always executed
|
|
221
|
-
});
|
|
207
|
+
try {
|
|
208
|
+
const response = await axios.get('/user?ID=12345');
|
|
209
|
+
console.log(response);
|
|
210
|
+
} catch (error) {
|
|
211
|
+
console.error(error);
|
|
212
|
+
}
|
|
222
213
|
|
|
223
214
|
// Optionally the request above could also be done as
|
|
224
215
|
axios.get('/user', {
|
|
@@ -253,16 +244,11 @@ async function getUser() {
|
|
|
253
244
|
Performing a `POST` request
|
|
254
245
|
|
|
255
246
|
```js
|
|
256
|
-
axios.post('/user', {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
console.log(response);
|
|
262
|
-
})
|
|
263
|
-
.catch(function (error) {
|
|
264
|
-
console.log(error);
|
|
265
|
-
});
|
|
247
|
+
const response = await axios.post('/user', {
|
|
248
|
+
firstName: 'Fred',
|
|
249
|
+
lastName: 'Flintstone'
|
|
250
|
+
});
|
|
251
|
+
console.log(response);
|
|
266
252
|
```
|
|
267
253
|
|
|
268
254
|
Performing multiple concurrent requests
|
|
@@ -303,14 +289,12 @@ axios({
|
|
|
303
289
|
|
|
304
290
|
```js
|
|
305
291
|
// GET request for remote image in node.js
|
|
306
|
-
axios({
|
|
292
|
+
const response = await axios({
|
|
307
293
|
method: 'get',
|
|
308
294
|
url: 'https://bit.ly/2mTM3nY',
|
|
309
295
|
responseType: 'stream'
|
|
310
|
-
})
|
|
311
|
-
|
|
312
|
-
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
|
|
313
|
-
});
|
|
296
|
+
});
|
|
297
|
+
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
|
|
314
298
|
```
|
|
315
299
|
|
|
316
300
|
##### axios(url[, config])
|
|
@@ -384,9 +368,9 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
384
368
|
// `method` is the request method to be used when making the request
|
|
385
369
|
method: 'get', // default
|
|
386
370
|
|
|
387
|
-
// `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.
|
|
388
372
|
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
|
|
389
|
-
// to methods of that instance.
|
|
373
|
+
// to the methods of that instance.
|
|
390
374
|
baseURL: 'https://some-domain.com/api/',
|
|
391
375
|
|
|
392
376
|
// `allowAbsoluteUrls` determines whether or not absolute URLs will override a configured `baseUrl`.
|
|
@@ -428,7 +412,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
428
412
|
// Custom encoder function which sends key/value pairs in an iterative fashion.
|
|
429
413
|
encode?: (param: string): string => { /* Do custom operations here and return transformed string */ },
|
|
430
414
|
|
|
431
|
-
// 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.
|
|
432
416
|
serialize?: (params: Record<string, any>, options?: ParamsSerializerOptions ),
|
|
433
417
|
|
|
434
418
|
// Configuration for formatting array indexes in the params.
|
|
@@ -436,8 +420,8 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
436
420
|
},
|
|
437
421
|
|
|
438
422
|
// `data` is the data to be sent as the request body
|
|
439
|
-
// Only applicable for request methods 'PUT', 'POST', 'DELETE
|
|
440
|
-
// 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:
|
|
441
425
|
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
|
|
442
426
|
// - Browser only: FormData, File, Blob
|
|
443
427
|
// - Node only: Stream, Buffer, FormData (form-data package)
|
|
@@ -489,7 +473,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
489
473
|
// 'utf8', 'UTF8', 'utf16le', 'UTF16LE'
|
|
490
474
|
responseEncoding: 'utf8', // default
|
|
491
475
|
|
|
492
|
-
// `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
|
|
493
477
|
xsrfCookieName: 'XSRF-TOKEN', // default
|
|
494
478
|
|
|
495
479
|
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
|
|
@@ -568,7 +552,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
568
552
|
// Use `false` to disable proxies, ignoring environment variables.
|
|
569
553
|
// `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
|
|
570
554
|
// supplies credentials.
|
|
571
|
-
// This will set
|
|
555
|
+
// This will set a `Proxy-Authorization` header, overwriting any existing
|
|
572
556
|
// `Proxy-Authorization` custom headers you have set using `headers`.
|
|
573
557
|
// If the proxy server uses HTTPS, then you must set the protocol to `https`.
|
|
574
558
|
proxy: {
|
|
@@ -640,7 +624,7 @@ These are the available config options for making requests. Only the `url` is re
|
|
|
640
624
|
|
|
641
625
|
## Response Schema
|
|
642
626
|
|
|
643
|
-
The response
|
|
627
|
+
The response to a request contains the following information.
|
|
644
628
|
|
|
645
629
|
```js
|
|
646
630
|
{
|
|
@@ -671,14 +655,12 @@ The response for a request contains the following information.
|
|
|
671
655
|
When using `then`, you will receive the response as follows:
|
|
672
656
|
|
|
673
657
|
```js
|
|
674
|
-
axios.get('/user/12345')
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
console.log(response.config);
|
|
681
|
-
});
|
|
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);
|
|
682
664
|
```
|
|
683
665
|
|
|
684
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.
|
|
@@ -732,7 +714,8 @@ instance.get('/longRequest', {
|
|
|
732
714
|
|
|
733
715
|
## Interceptors
|
|
734
716
|
|
|
735
|
-
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`)
|
|
736
719
|
|
|
737
720
|
```js
|
|
738
721
|
|
|
@@ -740,20 +723,20 @@ const instance = axios.create();
|
|
|
740
723
|
|
|
741
724
|
// Add a request interceptor
|
|
742
725
|
instance.interceptors.request.use(function (config) {
|
|
743
|
-
// Do something before request is sent
|
|
726
|
+
// Do something before the request is sent
|
|
744
727
|
return config;
|
|
745
728
|
}, function (error) {
|
|
746
|
-
// Do something with request error
|
|
729
|
+
// Do something with the request error
|
|
747
730
|
return Promise.reject(error);
|
|
748
731
|
});
|
|
749
732
|
|
|
750
733
|
// Add a response interceptor
|
|
751
734
|
instance.interceptors.response.use(function (response) {
|
|
752
|
-
// Any status code that
|
|
735
|
+
// Any status code that lies within the range of 2xx causes this function to trigger
|
|
753
736
|
// Do something with response data
|
|
754
737
|
return response;
|
|
755
738
|
}, function (error) {
|
|
756
|
-
// Any status codes that
|
|
739
|
+
// Any status codes that fall outside the range of 2xx cause this function to trigger
|
|
757
740
|
// Do something with response error
|
|
758
741
|
return Promise.reject(error);
|
|
759
742
|
});
|
|
@@ -785,7 +768,7 @@ instance.interceptors.request.use(function () {/*...*/});
|
|
|
785
768
|
|
|
786
769
|
When you add request interceptors, they are presumed to be asynchronous by default. This can cause a delay
|
|
787
770
|
in the execution of your axios request when the main thread is blocked (a promise is created under the hood for
|
|
788
|
-
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
|
|
789
772
|
to the options object that will tell axios to run the code synchronously and avoid any delays in request execution.
|
|
790
773
|
|
|
791
774
|
```js
|
|
@@ -811,11 +794,46 @@ axios.interceptors.request.use(function (config) {
|
|
|
811
794
|
}, null, { runWhen: onGetCall });
|
|
812
795
|
```
|
|
813
796
|
|
|
814
|
-
> **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
|
+
```
|
|
815
833
|
|
|
816
834
|
### Multiple Interceptors
|
|
817
835
|
|
|
818
|
-
Given you add multiple response interceptors
|
|
836
|
+
Given that you add multiple response interceptors
|
|
819
837
|
and when the response was fulfilled
|
|
820
838
|
- then each interceptor is executed
|
|
821
839
|
- then they are executed in the order they were added
|
|
@@ -826,11 +844,11 @@ and when the response was fulfilled
|
|
|
826
844
|
- then the following rejection-interceptor is called
|
|
827
845
|
- once caught, another following fulfill-interceptor is called again (just like in a promise chain).
|
|
828
846
|
|
|
829
|
-
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.
|
|
830
848
|
|
|
831
849
|
## Error Types
|
|
832
850
|
|
|
833
|
-
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.
|
|
834
852
|
|
|
835
853
|
The general structure of axios errors is as follows:
|
|
836
854
|
| Property | Definition |
|
|
@@ -839,7 +857,7 @@ The general structure of axios errors is as follows:
|
|
|
839
857
|
| name | This defines where the error originated from. For axios, it will always be an 'AxiosError'. |
|
|
840
858
|
| stack | Provides the stack trace of the error. |
|
|
841
859
|
| config | An axios config object with specific instance configurations defined by the user from when the request was made |
|
|
842
|
-
| 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. |
|
|
843
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.
|
|
844
862
|
|
|
845
863
|
Below is a list of potential axios identified error:
|
|
@@ -853,7 +871,7 @@ Below is a list of potential axios identified error:
|
|
|
853
871
|
| ERR_INVALID_URL | Invalid URL provided for axios request. |
|
|
854
872
|
| ECONNABORTED | Typically indicates that the request has been timed out (unless `transitional.clarifyTimeoutError` is set) or aborted by the browser or its plugin. |
|
|
855
873
|
| ERR_CANCELED | Feature or method is canceled explicitly by the user using an AbortSignal (or a CancelToken). |
|
|
856
|
-
| 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. |
|
|
857
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. |
|
|
858
876
|
| ERR_FR_TOO_MANY_REDIRECTS | Request is redirected too many times; exceeds max redirects specified in axios configuration. |
|
|
859
877
|
| ERR_BAD_RESPONSE | Response cannot be parsed properly or is in an unexpected format. Usually related to a response with `5xx` status code. |
|
|
@@ -861,7 +879,7 @@ Below is a list of potential axios identified error:
|
|
|
861
879
|
|
|
862
880
|
## Handling Errors
|
|
863
881
|
|
|
864
|
-
|
|
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.
|
|
865
883
|
|
|
866
884
|
```js
|
|
867
885
|
axios.get('/user/12345')
|
|
@@ -904,11 +922,32 @@ axios.get('/user/12345')
|
|
|
904
922
|
});
|
|
905
923
|
```
|
|
906
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
|
+
|
|
907
946
|
## Cancellation
|
|
908
947
|
|
|
909
948
|
### AbortController
|
|
910
949
|
|
|
911
|
-
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:
|
|
912
951
|
|
|
913
952
|
```js
|
|
914
953
|
const controller = new AbortController();
|
|
@@ -1065,7 +1104,7 @@ The server will handle it as:
|
|
|
1065
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
|
|
1066
1105
|
|
|
1067
1106
|
```js
|
|
1068
|
-
|
|
1107
|
+
const app = express();
|
|
1069
1108
|
|
|
1070
1109
|
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
|
|
1071
1110
|
|
|
@@ -1081,7 +1120,7 @@ If your backend body-parser (like `body-parser` of `express.js`) supports nested
|
|
|
1081
1120
|
|
|
1082
1121
|
### FormData
|
|
1083
1122
|
|
|
1084
|
-
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.
|
|
1085
1124
|
Setting the `Content-Type` header is not required as Axios guesses it based on the payload type.
|
|
1086
1125
|
|
|
1087
1126
|
```js
|
|
@@ -1222,7 +1261,7 @@ All files will be sent with the same field names: `files[]`.
|
|
|
1222
1261
|
|
|
1223
1262
|
## 🆕 HTML Form Posting (browser)
|
|
1224
1263
|
|
|
1225
|
-
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.
|
|
1226
1265
|
|
|
1227
1266
|
```js
|
|
1228
1267
|
await axios.postForm('https://httpbin.org/post', document.querySelector('#htmlForm'));
|
|
@@ -1334,7 +1373,7 @@ const {data} = await axios.post(SERVER_URL, readableStream, {
|
|
|
1334
1373
|
|
|
1335
1374
|
> **⚠️ Warning**
|
|
1336
1375
|
> It is recommended to disable redirects by setting maxRedirects: 0 to upload the stream in the **node.js** environment,
|
|
1337
|
-
> 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.
|
|
1338
1377
|
|
|
1339
1378
|
|
|
1340
1379
|
## 🆕 Rate limiting
|
|
@@ -1355,8 +1394,8 @@ const {data} = await axios.post(LOCAL_SERVER_URL, myBuffer, {
|
|
|
1355
1394
|
|
|
1356
1395
|
Axios has its own `AxiosHeaders` class to manipulate headers using a Map-like API that guarantees caseless work.
|
|
1357
1396
|
Although HTTP is case-insensitive in headers, Axios will retain the case of the original header for stylistic reasons
|
|
1358
|
-
and
|
|
1359
|
-
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.
|
|
1360
1399
|
|
|
1361
1400
|
### Working with headers
|
|
1362
1401
|
|
|
@@ -1448,7 +1487,7 @@ set(headers?: RawAxiosHeaders | AxiosHeaders | string, rewrite?: boolean);
|
|
|
1448
1487
|
```
|
|
1449
1488
|
|
|
1450
1489
|
The `rewrite` argument controls the overwriting behavior:
|
|
1451
|
-
- `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`)
|
|
1452
1491
|
- `undefined` (default) - overwrite the header unless its value is set to `false`
|
|
1453
1492
|
- `true` - rewrite anyway
|
|
1454
1493
|
|
|
@@ -1537,7 +1576,7 @@ Returns `true` if at least one header has been cleared.
|
|
|
1537
1576
|
If the headers object was changed directly, it can have duplicates with the same name but in different cases.
|
|
1538
1577
|
This method normalizes the headers object by combining duplicate keys into one.
|
|
1539
1578
|
Axios uses this method internally after calling each interceptor.
|
|
1540
|
-
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`)
|
|
1541
1580
|
|
|
1542
1581
|
```js
|
|
1543
1582
|
const headers = new AxiosHeaders({
|
|
@@ -1570,7 +1609,7 @@ Returns a new `AxiosHeaders` instance.
|
|
|
1570
1609
|
toJSON(asStrings?: boolean): RawAxiosHeaders;
|
|
1571
1610
|
````
|
|
1572
1611
|
|
|
1573
|
-
Resolve all internal
|
|
1612
|
+
Resolve all internal header values into a new null prototype object.
|
|
1574
1613
|
Set `asStrings` to true to resolve arrays as a string containing all elements, separated by commas.
|
|
1575
1614
|
|
|
1576
1615
|
### AxiosHeaders.from(thing?)
|
|
@@ -1626,7 +1665,7 @@ const fetchAxios = axios.create({
|
|
|
1626
1665
|
const {data} = fetchAxios.get(url);
|
|
1627
1666
|
```
|
|
1628
1667
|
|
|
1629
|
-
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**.
|
|
1630
1669
|
Also, it supports additional response types such as `stream` and `formdata` (if supported by the environment).
|
|
1631
1670
|
|
|
1632
1671
|
### 🔥 Custom fetch
|
|
@@ -1761,6 +1800,25 @@ If use ESM, your settings should be fine.
|
|
|
1761
1800
|
If you compile TypeScript to CJS and you can’t use `"moduleResolution": "node 16"`, you have to enable `esModuleInterop`.
|
|
1762
1801
|
If you use TypeScript to type check CJS JavaScript code, your only option is to use `"moduleResolution": "node16"`.
|
|
1763
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
|
+
|
|
1764
1822
|
## Online one-click setup
|
|
1765
1823
|
|
|
1766
1824
|
You can use Gitpod, an online IDE(which is free for Open Source) for contributing or running the examples online.
|