48b9d8eae5d04ab1199ea20c8b7589e82ff230c3b390aee5749c39bf733f4519c464f4572661f0c55197386f51118e49385b38c67dbc4cd7daa62f05e577f8-exec 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182
  1. # axios
  2. [![npm version](https://img.shields.io/npm/v/axios.svg?style=flat-square)](https://www.npmjs.org/package/axios)
  3. [![CDNJS](https://img.shields.io/cdnjs/v/axios.svg?style=flat-square)](https://cdnjs.com/libraries/axios)
  4. ![Build status](https://github.com/axios/axios/actions/workflows/ci.yml/badge.svg)
  5. [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/axios/axios)
  6. [![code coverage](https://img.shields.io/coveralls/mzabriskie/axios.svg?style=flat-square)](https://coveralls.io/r/mzabriskie/axios)
  7. [![install size](https://packagephobia.now.sh/badge?p=axios)](https://packagephobia.now.sh/result?p=axios)
  8. [![npm downloads](https://img.shields.io/npm/dm/axios.svg?style=flat-square)](https://npm-stat.com/charts.html?package=axios)
  9. [![gitter chat](https://img.shields.io/gitter/room/mzabriskie/axios.svg?style=flat-square)](https://gitter.im/mzabriskie/axios)
  10. [![code helpers](https://www.codetriage.com/axios/axios/badges/users.svg)](https://www.codetriage.com/axios/axios)
  11. [![Known Vulnerabilities](https://snyk.io/test/npm/axios/badge.svg)](https://snyk.io/test/npm/axios)
  12. ![npm bundle size](https://img.shields.io/bundlephobia/minzip/axios)
  13. Promise based HTTP client for the browser and node.js
  14. > New axios docs website: [click here](https://axios-http.com/)
  15. ## Table of Contents
  16. - [Features](#features)
  17. - [Browser Support](#browser-support)
  18. - [Installing](#installing)
  19. - [Example](#example)
  20. - [Axios API](#axios-api)
  21. - [Request method aliases](#request-method-aliases)
  22. - [Concurrency 👎](#concurrency-deprecated)
  23. - [Creating an instance](#creating-an-instance)
  24. - [Instance methods](#instance-methods)
  25. - [Request Config](#request-config)
  26. - [Response Schema](#response-schema)
  27. - [Config Defaults](#config-defaults)
  28. - [Global axios defaults](#global-axios-defaults)
  29. - [Custom instance defaults](#custom-instance-defaults)
  30. - [Config order of precedence](#config-order-of-precedence)
  31. - [Interceptors](#interceptors)
  32. - [Multiple Interceptors](#multiple-interceptors)
  33. - [Handling Errors](#handling-errors)
  34. - [Cancellation](#cancellation)
  35. - [AbortController](#abortcontroller)
  36. - [CancelToken 👎](#canceltoken-deprecated)
  37. - [Using application/x-www-form-urlencoded format](#using-applicationx-www-form-urlencoded-format)
  38. - [URLSearchParams](#urlsearchparams)
  39. - [Query string](#query-string-older-browsers)
  40. - [🆕 Automatic serialization](#-automatic-serialization-to-urlsearchparams)
  41. - [Using multipart/form-data format](#using-multipartform-data-format)
  42. - [FormData](#formdata)
  43. - [🆕 Automatic serialization](#-automatic-serialization-to-formdata)
  44. - [Files Posting](#files-posting)
  45. - [HTML Form Posting](#html-form-posting-browser)
  46. - [Semver](#semver)
  47. - [Promises](#promises)
  48. - [TypeScript](#typescript)
  49. - [Resources](#resources)
  50. - [Credits](#credits)
  51. - [License](#license)
  52. ## Features
  53. - Make [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) from the browser
  54. - Make [http](https://nodejs.org/api/http.html) requests from node.js
  55. - Supports the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API
  56. - Intercept request and response
  57. - Transform request and response data
  58. - Cancel requests
  59. - Automatic transforms for JSON data
  60. - 🆕 Automatic data object serialization to `multipart/form-data` and `x-www-form-urlencoded` body encodings
  61. - Client side support for protecting against [XSRF](https://en.wikipedia.org/wiki/Cross-site_request_forgery)
  62. ## Browser Support
  63. ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
  64. --- | --- | --- | --- | --- | --- |
  65. Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
  66. [![Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)](https://saucelabs.com/u/axios)
  67. ## Installing
  68. Using npm:
  69. ```bash
  70. $ npm install axios
  71. ```
  72. Using bower:
  73. ```bash
  74. $ bower install axios
  75. ```
  76. Using yarn:
  77. ```bash
  78. $ yarn add axios
  79. ```
  80. Using pnpm:
  81. ```bash
  82. $ pnpm add axios
  83. ```
  84. Using jsDelivr CDN:
  85. ```html
  86. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  87. ```
  88. Using unpkg CDN:
  89. ```html
  90. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  91. ```
  92. ## Example
  93. ### note: CommonJS usage
  94. In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with `require()` use the following approach:
  95. ```js
  96. const axios = require('axios').default;
  97. // axios.<method> will now provide autocomplete and parameter typings
  98. ```
  99. Performing a `GET` request
  100. ```js
  101. const axios = require('axios').default;
  102. // Make a request for a user with a given ID
  103. axios.get('/user?ID=12345')
  104. .then(function (response) {
  105. // handle success
  106. console.log(response);
  107. })
  108. .catch(function (error) {
  109. // handle error
  110. console.log(error);
  111. })
  112. .then(function () {
  113. // always executed
  114. });
  115. // Optionally the request above could also be done as
  116. axios.get('/user', {
  117. params: {
  118. ID: 12345
  119. }
  120. })
  121. .then(function (response) {
  122. console.log(response);
  123. })
  124. .catch(function (error) {
  125. console.log(error);
  126. })
  127. .then(function () {
  128. // always executed
  129. });
  130. // Want to use async/await? Add the `async` keyword to your outer function/method.
  131. async function getUser() {
  132. try {
  133. const response = await axios.get('/user?ID=12345');
  134. console.log(response);
  135. } catch (error) {
  136. console.error(error);
  137. }
  138. }
  139. ```
  140. > **NOTE:** `async/await` is part of ECMAScript 2017 and is not supported in Internet
  141. > Explorer and older browsers, so use with caution.
  142. Performing a `POST` request
  143. ```js
  144. axios.post('/user', {
  145. firstName: 'Fred',
  146. lastName: 'Flintstone'
  147. })
  148. .then(function (response) {
  149. console.log(response);
  150. })
  151. .catch(function (error) {
  152. console.log(error);
  153. });
  154. ```
  155. Performing multiple concurrent requests
  156. ```js
  157. function getUserAccount() {
  158. return axios.get('/user/12345');
  159. }
  160. function getUserPermissions() {
  161. return axios.get('/user/12345/permissions');
  162. }
  163. Promise.all([getUserAccount(), getUserPermissions()])
  164. .then(function (results) {
  165. const acct = results[0];
  166. const perm = results[1];
  167. });
  168. ```
  169. ## axios API
  170. Requests can be made by passing the relevant config to `axios`.
  171. ##### axios(config)
  172. ```js
  173. // Send a POST request
  174. axios({
  175. method: 'post',
  176. url: '/user/12345',
  177. data: {
  178. firstName: 'Fred',
  179. lastName: 'Flintstone'
  180. }
  181. });
  182. ```
  183. ```js
  184. // GET request for remote image in node.js
  185. axios({
  186. method: 'get',
  187. url: 'https://bit.ly/2mTM3nY',
  188. responseType: 'stream'
  189. })
  190. .then(function (response) {
  191. response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  192. });
  193. ```
  194. ##### axios(url[, config])
  195. ```js
  196. // Send a GET request (default method)
  197. axios('/user/12345');
  198. ```
  199. ### Request method aliases
  200. For convenience, aliases have been provided for all common request methods.
  201. ##### axios.request(config)
  202. ##### axios.get(url[, config])
  203. ##### axios.delete(url[, config])
  204. ##### axios.head(url[, config])
  205. ##### axios.options(url[, config])
  206. ##### axios.post(url[, data[, config]])
  207. ##### axios.put(url[, data[, config]])
  208. ##### axios.patch(url[, data[, config]])
  209. ###### NOTE
  210. When using the alias methods `url`, `method`, and `data` properties don't need to be specified in config.
  211. ### Concurrency (Deprecated)
  212. Please use `Promise.all` to replace the below functions.
  213. Helper functions for dealing with concurrent requests.
  214. axios.all(iterable)
  215. axios.spread(callback)
  216. ### Creating an instance
  217. You can create a new instance of axios with a custom config.
  218. ##### axios.create([config])
  219. ```js
  220. const instance = axios.create({
  221. baseURL: 'https://some-domain.com/api/',
  222. timeout: 1000,
  223. headers: {'X-Custom-Header': 'foobar'}
  224. });
  225. ```
  226. ### Instance methods
  227. The available instance methods are listed below. The specified config will be merged with the instance config.
  228. ##### axios#request(config)
  229. ##### axios#get(url[, config])
  230. ##### axios#delete(url[, config])
  231. ##### axios#head(url[, config])
  232. ##### axios#options(url[, config])
  233. ##### axios#post(url[, data[, config]])
  234. ##### axios#put(url[, data[, config]])
  235. ##### axios#patch(url[, data[, config]])
  236. ##### axios#getUri([config])
  237. ## Request Config
  238. These are the available config options for making requests. Only the `url` is required. Requests will default to `GET` if `method` is not specified.
  239. ```js
  240. {
  241. // `url` is the server URL that will be used for the request
  242. url: '/user',
  243. // `method` is the request method to be used when making the request
  244. method: 'get', // default
  245. // `baseURL` will be prepended to `url` unless `url` is absolute.
  246. // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
  247. // to methods of that instance.
  248. baseURL: 'https://some-domain.com/api/',
  249. // `transformRequest` allows changes to the request data before it is sent to the server
  250. // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
  251. // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
  252. // FormData or Stream
  253. // You may modify the headers object.
  254. transformRequest: [function (data, headers) {
  255. // Do whatever you want to transform the data
  256. return data;
  257. }],
  258. // `transformResponse` allows changes to the response data to be made before
  259. // it is passed to then/catch
  260. transformResponse: [function (data) {
  261. // Do whatever you want to transform the data
  262. return data;
  263. }],
  264. // `headers` are custom headers to be sent
  265. headers: {'X-Requested-With': 'XMLHttpRequest'},
  266. // `params` are the URL parameters to be sent with the request
  267. // Must be a plain object or a URLSearchParams object
  268. params: {
  269. ID: 12345
  270. },
  271. // `paramsSerializer` is an optional config in charge of serializing `params`
  272. paramsSerializer: {
  273. indexes: null // array indexes format (null - no brackets, false - empty brackets, true - brackets with indexes)
  274. },
  275. // `data` is the data to be sent as the request body
  276. // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
  277. // When no `transformRequest` is set, must be of one of the following types:
  278. // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  279. // - Browser only: FormData, File, Blob
  280. // - Node only: Stream, Buffer
  281. data: {
  282. firstName: 'Fred'
  283. },
  284. // syntax alternative to send data into the body
  285. // method post
  286. // only the value is sent, not the key
  287. data: 'Country=Brasil&City=Belo Horizonte',
  288. // `timeout` specifies the number of milliseconds before the request times out.
  289. // If the request takes longer than `timeout`, the request will be aborted.
  290. timeout: 1000, // default is `0` (no timeout)
  291. // `withCredentials` indicates whether or not cross-site Access-Control requests
  292. // should be made using credentials
  293. withCredentials: false, // default
  294. // `adapter` allows custom handling of requests which makes testing easier.
  295. // Return a promise and supply a valid response (see lib/adapters/README.md).
  296. adapter: function (config) {
  297. /* ... */
  298. },
  299. // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
  300. // This will set an `Authorization` header, overwriting any existing
  301. // `Authorization` custom headers you have set using `headers`.
  302. // Please note that only HTTP Basic auth is configurable through this parameter.
  303. // For Bearer tokens and such, use `Authorization` custom headers instead.
  304. auth: {
  305. username: 'janedoe',
  306. password: 's00pers3cret'
  307. },
  308. // `responseType` indicates the type of data that the server will respond with
  309. // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
  310. // browser only: 'blob'
  311. responseType: 'json', // default
  312. // `responseEncoding` indicates encoding to use for decoding responses (Node.js only)
  313. // Note: Ignored for `responseType` of 'stream' or client-side requests
  314. responseEncoding: 'utf8', // default
  315. // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  316. xsrfCookieName: 'XSRF-TOKEN', // default
  317. // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  318. xsrfHeaderName: 'X-XSRF-TOKEN', // default
  319. // `undefined` (default) - set XSRF header only for the same origin requests
  320. withXSRFToken: boolean | undefined | ((config: AxiosRequestConfig) => boolean | undefined),
  321. // `onUploadProgress` allows handling of progress events for uploads
  322. // browser only
  323. onUploadProgress: function (progressEvent) {
  324. // Do whatever you want with the native progress event
  325. },
  326. // `onDownloadProgress` allows handling of progress events for downloads
  327. // browser only
  328. onDownloadProgress: function (progressEvent) {
  329. // Do whatever you want with the native progress event
  330. },
  331. // `maxContentLength` defines the max size of the http response content in bytes allowed in node.js
  332. maxContentLength: 2000,
  333. // `maxBodyLength` (Node only option) defines the max size of the http request content in bytes allowed
  334. maxBodyLength: 2000,
  335. // `validateStatus` defines whether to resolve or reject the promise for a given
  336. // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
  337. // or `undefined`), the promise will be resolved; otherwise, the promise will be
  338. // rejected.
  339. validateStatus: function (status) {
  340. return status >= 200 && status < 300; // default
  341. },
  342. // `maxRedirects` defines the maximum number of redirects to follow in node.js.
  343. // If set to 0, no redirects will be followed.
  344. maxRedirects: 21, // default
  345. // `beforeRedirect` defines a function that will be called before redirect.
  346. // Use this to adjust the request options upon redirecting,
  347. // to inspect the latest response headers,
  348. // or to cancel the request by throwing an error
  349. // If maxRedirects is set to 0, `beforeRedirect` is not used.
  350. beforeRedirect: (options, { headers }) => {
  351. if (options.hostname === "example.com") {
  352. options.auth = "user:password";
  353. }
  354. },
  355. // `socketPath` defines a UNIX Socket to be used in node.js.
  356. // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  357. // Only either `socketPath` or `proxy` can be specified.
  358. // If both are specified, `socketPath` is used.
  359. socketPath: null, // default
  360. // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  361. // and https requests, respectively, in node.js. This allows options to be added like
  362. // `keepAlive` that are not enabled by default.
  363. httpAgent: new http.Agent({ keepAlive: true }),
  364. httpsAgent: new https.Agent({ keepAlive: true }),
  365. // `proxy` defines the hostname, port, and protocol of the proxy server.
  366. // You can also define your proxy using the conventional `http_proxy` and
  367. // `https_proxy` environment variables. If you are using environment variables
  368. // for your proxy configuration, you can also define a `no_proxy` environment
  369. // variable as a comma-separated list of domains that should not be proxied.
  370. // Use `false` to disable proxies, ignoring environment variables.
  371. // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
  372. // supplies credentials.
  373. // This will set an `Proxy-Authorization` header, overwriting any existing
  374. // `Proxy-Authorization` custom headers you have set using `headers`.
  375. // If the proxy server uses HTTPS, then you must set the protocol to `https`.
  376. proxy: {
  377. protocol: 'https',
  378. host: '127.0.0.1',
  379. port: 9000,
  380. auth: {
  381. username: 'mikeymike',
  382. password: 'rapunz3l'
  383. }
  384. },
  385. // `cancelToken` specifies a cancel token that can be used to cancel the request
  386. // (see Cancellation section below for details)
  387. cancelToken: new CancelToken(function (cancel) {
  388. }),
  389. // an alternative way to cancel Axios requests using AbortController
  390. signal: new AbortController().signal,
  391. // `decompress` indicates whether or not the response body should be decompressed
  392. // automatically. If set to `true` will also remove the 'content-encoding' header
  393. // from the responses objects of all decompressed responses
  394. // - Node only (XHR cannot turn off decompression)
  395. decompress: true // default
  396. // `insecureHTTPParser` boolean.
  397. // Indicates where to use an insecure HTTP parser that accepts invalid HTTP headers.
  398. // This may allow interoperability with non-conformant HTTP implementations.
  399. // Using the insecure parser should be avoided.
  400. // see options https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http_request_url_options_callback
  401. // see also https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/#strict-http-header-parsing-none
  402. insecureHTTPParser: undefined // default
  403. // transitional options for backward compatibility that may be removed in the newer versions
  404. transitional: {
  405. // silent JSON parsing mode
  406. // `true` - ignore JSON parsing errors and set response.data to null if parsing failed (old behaviour)
  407. // `false` - throw SyntaxError if JSON parsing failed (Note: responseType must be set to 'json')
  408. silentJSONParsing: true, // default value for the current Axios version
  409. // try to parse the response string as JSON even if `responseType` is not 'json'
  410. forcedJSONParsing: true,
  411. // throw ETIMEDOUT error instead of generic ECONNABORTED on request timeouts
  412. clarifyTimeoutError: false,
  413. },
  414. env: {
  415. // The FormData class to be used to automatically serialize the payload into a FormData object
  416. FormData: window?.FormData || global?.FormData
  417. },
  418. formSerializer: {
  419. visitor: (value, key, path, helpers)=> {}; // custom visitor function to serialize form values
  420. dots: boolean; // use dots instead of brackets format
  421. metaTokens: boolean; // keep special endings like {} in parameter key
  422. indexes: boolean; // array indexes format null - no brackets, false - empty brackets, true - brackets with indexes
  423. }
  424. }
  425. ```
  426. ## Response Schema
  427. The response for a request contains the following information.
  428. ```js
  429. {
  430. // `data` is the response that was provided by the server
  431. data: {},
  432. // `status` is the HTTP status code from the server response
  433. status: 200,
  434. // `statusText` is the HTTP status message from the server response
  435. statusText: 'OK',
  436. // `headers` the HTTP headers that the server responded with
  437. // All header names are lowercase and can be accessed using the bracket notation.
  438. // Example: `response.headers['content-type']`
  439. headers: {},
  440. // `config` is the config that was provided to `axios` for the request
  441. config: {},
  442. // `request` is the request that generated this response
  443. // It is the last ClientRequest instance in node.js (in redirects)
  444. // and an XMLHttpRequest instance in the browser
  445. request: {}
  446. }
  447. ```
  448. When using `then`, you will receive the response as follows:
  449. ```js
  450. axios.get('/user/12345')
  451. .then(function (response) {
  452. console.log(response.data);
  453. console.log(response.status);
  454. console.log(response.statusText);
  455. console.log(response.headers);
  456. console.log(response.config);
  457. });
  458. ```
  459. 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.
  460. ## Config Defaults
  461. You can specify config defaults that will be applied to every request.
  462. ### Global axios defaults
  463. ```js
  464. axios.defaults.baseURL = 'https://api.example.com';
  465. // Important: If axios is used with multiple domains, the AUTH_TOKEN will be sent to all of them.
  466. // See below for an example using Custom instance defaults instead.
  467. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  468. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  469. ```
  470. ### Custom instance defaults
  471. ```js
  472. // Set config defaults when creating the instance
  473. const instance = axios.create({
  474. baseURL: 'https://api.example.com'
  475. });
  476. // Alter defaults after instance has been created
  477. instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  478. ```
  479. ### Config order of precedence
  480. Config will be merged with an order of precedence. The order is library defaults found in [lib/defaults.js](https://github.com/axios/axios/blob/master/lib/defaults/index.js#L28), then `defaults` property of the instance, and finally `config` argument for the request. The latter will take precedence over the former. Here's an example.
  481. ```js
  482. // Create an instance using the config defaults provided by the library
  483. // At this point the timeout config value is `0` as is the default for the library
  484. const instance = axios.create();
  485. // Override timeout default for the library
  486. // Now all requests using this instance will wait 2.5 seconds before timing out
  487. instance.defaults.timeout = 2500;
  488. // Override timeout for this request as it's known to take a long time
  489. instance.get('/longRequest', {
  490. timeout: 5000
  491. });
  492. ```
  493. ## Interceptors
  494. You can intercept requests or responses before they are handled by `then` or `catch`.
  495. ```js
  496. // Add a request interceptor
  497. axios.interceptors.request.use(function (config) {
  498. // Do something before request is sent
  499. return config;
  500. }, function (error) {
  501. // Do something with request error
  502. return Promise.reject(error);
  503. });
  504. // Add a response interceptor
  505. axios.interceptors.response.use(function (response) {
  506. // Any status code that lie within the range of 2xx cause this function to trigger
  507. // Do something with response data
  508. return response;
  509. }, function (error) {
  510. // Any status codes that falls outside the range of 2xx cause this function to trigger
  511. // Do something with response error
  512. return Promise.reject(error);
  513. });
  514. ```
  515. If you need to remove an interceptor later you can.
  516. ```js
  517. const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
  518. axios.interceptors.request.eject(myInterceptor);
  519. ```
  520. You can also clear all interceptors for requests or responses.
  521. ```js
  522. const instance = axios.create();
  523. instance.interceptors.request.use(function () {/*...*/});
  524. instance.interceptors.request.clear(); // Removes interceptors from requests
  525. instance.interceptors.response.use(function () {/*...*/});
  526. instance.interceptors.response.clear(); // Removes interceptors from responses
  527. ```
  528. You can add interceptors to a custom instance of axios.
  529. ```js
  530. const instance = axios.create();
  531. instance.interceptors.request.use(function () {/*...*/});
  532. ```
  533. When you add request interceptors, they are presumed to be asynchronous by default. This can cause a delay
  534. in the execution of your axios request when the main thread is blocked (a promise is created under the hood for
  535. the interceptor and your request gets put on the bottom of the call stack). If your request interceptors are synchronous you can add a flag
  536. to the options object that will tell axios to run the code synchronously and avoid any delays in request execution.
  537. ```js
  538. axios.interceptors.request.use(function (config) {
  539. config.headers.test = 'I am only a header!';
  540. return config;
  541. }, null, { synchronous: true });
  542. ```
  543. If you want to execute a particular interceptor based on a runtime check,
  544. you can add a `runWhen` function to the options object. The interceptor will not be executed **if and only if** the return
  545. of `runWhen` is `false`. The function will be called with the config
  546. object (don't forget that you can bind your own arguments to it as well.) This can be handy when you have an
  547. asynchronous request interceptor that only needs to run at certain times.
  548. ```js
  549. function onGetCall(config) {
  550. return config.method === 'get';
  551. }
  552. axios.interceptors.request.use(function (config) {
  553. config.headers.test = 'special get headers';
  554. return config;
  555. }, null, { runWhen: onGetCall });
  556. ```
  557. ### Multiple Interceptors
  558. Given you add multiple response interceptors
  559. and when the response was fulfilled
  560. - then each interceptor is executed
  561. - then they are executed in the order they were added
  562. - then only the last interceptor's result is returned
  563. - then every interceptor receives the result of its predecessor
  564. - and when the fulfillment-interceptor throws
  565. - then the following fulfillment-interceptor is not called
  566. - then the following rejection-interceptor is called
  567. - once caught, another following fulfill-interceptor is called again (just like in a promise chain).
  568. Read [the interceptor tests](./test/specs/interceptors.spec.js) for seeing all this in code.
  569. ## Handling Errors
  570. ```js
  571. axios.get('/user/12345')
  572. .catch(function (error) {
  573. if (error.response) {
  574. // The request was made and the server responded with a status code
  575. // that falls out of the range of 2xx
  576. console.log(error.response.data);
  577. console.log(error.response.status);
  578. console.log(error.response.headers);
  579. } else if (error.request) {
  580. // The request was made but no response was received
  581. // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
  582. // http.ClientRequest in node.js
  583. console.log(error.request);
  584. } else {
  585. // Something happened in setting up the request that triggered an Error
  586. console.log('Error', error.message);
  587. }
  588. console.log(error.config);
  589. });
  590. ```
  591. Using the `validateStatus` config option, you can define HTTP code(s) that should throw an error.
  592. ```js
  593. axios.get('/user/12345', {
  594. validateStatus: function (status) {
  595. return status < 500; // Resolve only if the status code is less than 500
  596. }
  597. })
  598. ```
  599. Using `toJSON` you get an object with more information about the HTTP error.
  600. ```js
  601. axios.get('/user/12345')
  602. .catch(function (error) {
  603. console.log(error.toJSON());
  604. });
  605. ```
  606. ## Cancellation
  607. ### AbortController
  608. Starting from `v0.22.0` Axios supports AbortController to cancel requests in fetch API way:
  609. ```js
  610. const controller = new AbortController();
  611. axios.get('/foo/bar', {
  612. signal: controller.signal
  613. }).then(function(response) {
  614. //...
  615. });
  616. // cancel the request
  617. controller.abort()
  618. ```
  619. ### CancelToken `👎deprecated`
  620. You can also cancel a request using a *CancelToken*.
  621. > The axios cancel token API is based on the withdrawn [cancelable promises proposal](https://github.com/tc39/proposal-cancelable-promises).
  622. > This API is deprecated since v0.22.0 and shouldn't be used in new projects
  623. You can create a cancel token using the `CancelToken.source` factory as shown below:
  624. ```js
  625. const CancelToken = axios.CancelToken;
  626. const source = CancelToken.source();
  627. axios.get('/user/12345', {
  628. cancelToken: source.token
  629. }).catch(function (thrown) {
  630. if (axios.isCancel(thrown)) {
  631. console.log('Request canceled', thrown.message);
  632. } else {
  633. // handle error
  634. }
  635. });
  636. axios.post('/user/12345', {
  637. name: 'new name'
  638. }, {
  639. cancelToken: source.token
  640. })
  641. // cancel the request (the message parameter is optional)
  642. source.cancel('Operation canceled by the user.');
  643. ```
  644. You can also create a cancel token by passing an executor function to the `CancelToken` constructor:
  645. ```js
  646. const CancelToken = axios.CancelToken;
  647. let cancel;
  648. axios.get('/user/12345', {
  649. cancelToken: new CancelToken(function executor(c) {
  650. // An executor function receives a cancel function as a parameter
  651. cancel = c;
  652. })
  653. });
  654. // cancel the request
  655. cancel();
  656. ```
  657. > Note: you can cancel several requests with the same cancel token/abort controller.
  658. > If a cancellation token is already cancelled at the moment of starting an Axios request, then the request is cancelled immediately, without any attempts to make a real request.
  659. > During the transition period, you can use both cancellation APIs, even for the same request:
  660. ## Using `application/x-www-form-urlencoded` format
  661. ### URLSearchParams
  662. By default, axios serializes JavaScript objects to `JSON`. To send data in the [`application/x-www-form-urlencoded` format](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) instead, you can use the [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) API, which is [supported](http://www.caniuse.com/#feat=urlsearchparams) in the vast majority of browsers, [and Node](https://nodejs.org/api/url.html#url_class_urlsearchparams) starting with v10 (released in 2018).
  663. ```js
  664. const params = new URLSearchParams({ foo: 'bar' });
  665. params.append('extraparam', 'value');
  666. axios.post('/foo', params);
  667. ```
  668. ### Query string (Older browsers)
  669. For compatibility with very old browsers, there is a [polyfill](https://github.com/WebReflection/url-search-params) available (make sure to polyfill the global environment).
  670. Alternatively, you can encode data using the [`qs`](https://github.com/ljharb/qs) library:
  671. ```js
  672. const qs = require('qs');
  673. axios.post('/foo', qs.stringify({ 'bar': 123 }));
  674. ```
  675. Or in another way (ES6),
  676. ```js
  677. import qs from 'qs';
  678. const data = { 'bar': 123 };
  679. const options = {
  680. method: 'POST',
  681. headers: { 'content-type': 'application/x-www-form-urlencoded' },
  682. data: qs.stringify(data),
  683. url,
  684. };
  685. axios(options);
  686. ```
  687. ### Older Node.js versions
  688. For older Node.js engines, you can use the [`querystring`](https://nodejs.org/api/querystring.html) module as follows:
  689. ```js
  690. const querystring = require('querystring');
  691. axios.post('https://something.com/', querystring.stringify({ foo: 'bar' }));
  692. ```
  693. You can also use the [`qs`](https://github.com/ljharb/qs) library.
  694. > NOTE:
  695. > The `qs` library is preferable if you need to stringify nested objects, as the `querystring` method has [known issues](https://github.com/nodejs/node-v0.x-archive/issues/1665) with that use case.
  696. ### 🆕 Automatic serialization to URLSearchParams
  697. Axios will automatically serialize the data object to urlencoded format if the content-type header is set to "application/x-www-form-urlencoded".
  698. ```
  699. const data = {
  700. x: 1,
  701. arr: [1, 2, 3],
  702. arr2: [1, [2], 3],
  703. users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
  704. };
  705. await axios.postForm('https://postman-echo.com/post', data,
  706. {headers: {'content-type': 'application/x-www-form-urlencoded'}}
  707. );
  708. ```
  709. The server will handle it as
  710. ```js
  711. {
  712. x: '1',
  713. 'arr[]': [ '1', '2', '3' ],
  714. 'arr2[0]': '1',
  715. 'arr2[1][0]': '2',
  716. 'arr2[2]': '3',
  717. 'arr3[]': [ '1', '2', '3' ],
  718. 'users[0][name]': 'Peter',
  719. 'users[0][surname]': 'griffin',
  720. 'users[1][name]': 'Thomas',
  721. 'users[1][surname]': 'Anderson'
  722. }
  723. ````
  724. 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
  725. ```js
  726. var app = express();
  727. app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
  728. app.post('/', function (req, res, next) {
  729. // echo body as JSON
  730. res.send(JSON.stringify(req.body));
  731. });
  732. server = app.listen(3000);
  733. ```
  734. ## Using `multipart/form-data` format
  735. ### FormData
  736. To send the data as a `multipart/formdata` you need to pass a formData instance as a payload.
  737. Setting the `Content-Type` header is not required as Axios guesses it based on the payload type.
  738. ```js
  739. const formData = new FormData();
  740. formData.append('foo', 'bar');
  741. axios.post('https://httpbin.org/post', formData);
  742. ```
  743. In node.js, you can use the [`form-data`](https://github.com/form-data/form-data) library as follows:
  744. ```js
  745. const FormData = require('form-data');
  746. const form = new FormData();
  747. form.append('my_field', 'my value');
  748. form.append('my_buffer', new Buffer(10));
  749. form.append('my_file', fs.createReadStream('/foo/bar.jpg'));
  750. axios.post('https://example.com', form)
  751. ```
  752. ### 🆕 Automatic serialization to FormData
  753. Starting from `v0.27.0`, Axios supports automatic object serialization to a FormData object if the request `Content-Type`
  754. header is set to `multipart/form-data`.
  755. The following request will submit the data in a FormData format (Browser & Node.js):
  756. ```js
  757. import axios from 'axios';
  758. axios.post('https://httpbin.org/post', {x: 1}, {
  759. headers: {
  760. 'Content-Type': 'multipart/form-data'
  761. }
  762. }).then(({data})=> console.log(data));
  763. ```
  764. In the `node.js` build, the ([`form-data`](https://github.com/form-data/form-data)) polyfill is used by default.
  765. You can overload the FormData class by setting the `env.FormData` config variable,
  766. but you probably won't need it in most cases:
  767. ```js
  768. const axios= require('axios');
  769. var FormData = require('form-data');
  770. axios.post('https://httpbin.org/post', {x: 1, buf: new Buffer(10)}, {
  771. headers: {
  772. 'Content-Type': 'multipart/form-data'
  773. }
  774. }).then(({data})=> console.log(data));
  775. ```
  776. Axios FormData serializer supports some special endings to perform the following operations:
  777. - `{}` - serialize the value with JSON.stringify
  778. - `[]` - unwrap the array-like object as separate fields with the same key
  779. > NOTE:
  780. > unwrap/expand operation will be used by default on arrays and FileList objects
  781. FormData serializer supports additional options via `config.formSerializer: object` property to handle rare cases:
  782. - `visitor: Function` - user-defined visitor function that will be called recursively to serialize the data object
  783. to a `FormData` object by following custom rules.
  784. - `dots: boolean = false` - use dot notation instead of brackets to serialize arrays and objects;
  785. - `metaTokens: boolean = true` - add the special ending (e.g `user{}: '{"name": "John"}'`) in the FormData key.
  786. The back-end body-parser could potentially use this meta-information to automatically parse the value as JSON.
  787. - `indexes: null|false|true = false` - controls how indexes will be added to unwrapped keys of `flat` array-like objects
  788. - `null` - don't add brackets (`arr: 1`, `arr: 2`, `arr: 3`)
  789. - `false`(default) - add empty brackets (`arr[]: 1`, `arr[]: 2`, `arr[]: 3`)
  790. - `true` - add brackets with indexes (`arr[0]: 1`, `arr[1]: 2`, `arr[2]: 3`)
  791. Let's say we have an object like this one:
  792. ```js
  793. const obj = {
  794. x: 1,
  795. arr: [1, 2, 3],
  796. arr2: [1, [2], 3],
  797. users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
  798. 'obj2{}': [{x:1}]
  799. };
  800. ```
  801. The following steps will be executed by the Axios serializer internally:
  802. ```js
  803. const formData= new FormData();
  804. formData.append('x', '1');
  805. formData.append('arr[]', '1');
  806. formData.append('arr[]', '2');
  807. formData.append('arr[]', '3');
  808. formData.append('arr2[0]', '1');
  809. formData.append('arr2[1][0]', '2');
  810. formData.append('arr2[2]', '3');
  811. formData.append('users[0][name]', 'Peter');
  812. formData.append('users[0][surname]', 'Griffin');
  813. formData.append('users[1][name]', 'Thomas');
  814. formData.append('users[1][surname]', 'Anderson');
  815. formData.append('obj2{}', '[{"x":1}]');
  816. ```
  817. Axios supports the following shortcut methods: `postForm`, `putForm`, `patchForm`
  818. which are just the corresponding http methods with the `Content-Type` header preset to `multipart/form-data`.
  819. ## Files Posting
  820. You can easily sumbit a single file
  821. ```js
  822. await axios.postForm('https://httpbin.org/post', {
  823. 'myVar' : 'foo',
  824. 'file': document.querySelector('#fileInput').files[0]
  825. });
  826. ```
  827. or multiple files as `multipart/form-data`.
  828. ```js
  829. await axios.postForm('https://httpbin.org/post', {
  830. 'files[]': document.querySelector('#fileInput').files
  831. });
  832. ```
  833. `FileList` object can be passed directly:
  834. ```js
  835. await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)
  836. ```
  837. All files will be sent with the same field names: `files[]`.
  838. ## 🆕 HTML Form Posting (browser)
  839. Pass HTML Form element as a payload to submit it as `multipart/form-data` content.
  840. ```js
  841. await axios.postForm('https://httpbin.org/post', document.querySelector('#htmlForm'));
  842. ```
  843. `FormData` and `HTMLForm` objects can also be posted as `JSON` by explicitly setting the `Content-Type` header to `application/json`:
  844. ```js
  845. await axios.post('https://httpbin.org/post', document.querySelector('#htmlForm'), {
  846. headers: {
  847. 'Content-Type': 'application/json'
  848. }
  849. })
  850. ```
  851. For example, the Form
  852. ```html
  853. <form id="form">
  854. <input type="text" name="foo" value="1">
  855. <input type="text" name="deep.prop" value="2">
  856. <input type="text" name="deep prop spaced" value="3">
  857. <input type="text" name="baz" value="4">
  858. <input type="text" name="baz" value="5">
  859. <select name="user.age">
  860. <option value="value1">Value 1</option>
  861. <option value="value2" selected>Value 2</option>
  862. <option value="value3">Value 3</option>
  863. </select>
  864. <input type="submit" value="Save">
  865. </form>
  866. ```
  867. will be submitted as the following JSON object:
  868. ```js
  869. {
  870. "foo": "1",
  871. "deep": {
  872. "prop": {
  873. "spaced": "3"
  874. }
  875. },
  876. "baz": [
  877. "4",
  878. "5"
  879. ],
  880. "user": {
  881. "age": "value2"
  882. }
  883. }
  884. ````
  885. Sending `Blobs`/`Files` as JSON (`base64`) is not currently supported.
  886. ## Semver
  887. Until axios reaches a `1.0` release, breaking changes will be released with a new minor version. For example `0.5.1`, and `0.5.4` will have the same API, but `0.6.0` will have breaking changes.
  888. ## Promises
  889. axios depends on a native ES6 Promise implementation to be [supported](https://caniuse.com/promises).
  890. If your environment doesn't support ES6 Promises, you can [polyfill](https://github.com/jakearchibald/es6-promise).
  891. ## TypeScript
  892. axios includes [TypeScript](https://typescriptlang.org) definitions and a type guard for axios errors.
  893. ```typescript
  894. let user: User = null;
  895. try {
  896. const { data } = await axios.get('/user?ID=12345');
  897. user = data.userDetails;
  898. } catch (error) {
  899. if (axios.isAxiosError(error)) {
  900. handleAxiosError(error);
  901. } else {
  902. handleUnexpectedError(error);
  903. }
  904. }
  905. ```
  906. ## Online one-click setup
  907. You can use Gitpod, an online IDE(which is free for Open Source) for contributing or running the examples online.
  908. [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/axios/axios/blob/master/examples/server.js)
  909. ## Resources
  910. * [Changelog](https://github.com/axios/axios/blob/master/CHANGELOG.md)
  911. * [Upgrade Guide](https://github.com/axios/axios/blob/master/UPGRADE_GUIDE.md)
  912. * [Ecosystem](https://github.com/axios/axios/blob/master/ECOSYSTEM.md)
  913. * [Contributing Guide](https://github.com/axios/axios/blob/master/CONTRIBUTING.md)
  914. * [Code of Conduct](https://github.com/axios/axios/blob/master/CODE_OF_CONDUCT.md)
  915. ## Credits
  916. axios is heavily inspired by the [$http service](https://docs.angularjs.org/api/ng/service/$http) provided in [AngularJS](https://angularjs.org/). Ultimately axios is an effort to provide a standalone `$http`-like service for use outside of AngularJS.
  917. ## License
  918. [MIT](LICENSE)