README.md 14.9 KB
Newer Older
M
mzabriskie 已提交
1
# axios
M
mzabriskie 已提交
2 3 4

[![npm version](https://img.shields.io/npm/v/axios.svg?style=flat-square)](https://www.npmjs.org/package/axios)
[![build status](https://img.shields.io/travis/mzabriskie/axios.svg?style=flat-square)](https://travis-ci.org/mzabriskie/axios)
M
mzabriskie 已提交
5
[![code coverage](https://img.shields.io/coveralls/mzabriskie/axios.svg?style=flat-square)](https://coveralls.io/r/mzabriskie/axios)
M
Matt Zabriskie 已提交
6
[![npm downloads](https://img.shields.io/npm/dm/axios.svg?style=flat-square)](http://npm-stat.com/charts.html?package=axios)
M
Matt Zabriskie 已提交
7
[![gitter chat](https://img.shields.io/gitter/room/mzabriskie/axios.svg?style=flat-square)](https://gitter.im/mzabriskie/axios)
M
Matt Zabriskie 已提交
8

M
mzabriskie 已提交
9
Promise based HTTP client for the browser and node.js
M
Matt Zabriskie 已提交
10 11 12

## Features

M
mzabriskie 已提交
13 14
- Make [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) from the browser
- Make [http](http://nodejs.org/api/http.html) requests from node.js
M
mzabriskie 已提交
15
- Supports the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API
M
mzabriskie 已提交
16
- Intercept request and response
M
mzabriskie 已提交
17
- Transform request and response data
M
Matt Zabriskie 已提交
18
- Automatic transforms for JSON data
M
mzabriskie 已提交
19
- Client side support for protecting against [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)
M
Matt Zabriskie 已提交
20

M
mzabriskie 已提交
21
## Browser Support
M
mzabriskie 已提交
22

23 24 25
![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) |
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
M
mzabriskie 已提交
26

M
Matt Zabriskie 已提交
27
[![Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)](https://saucelabs.com/u/axios)
28

M
Matt Zabriskie 已提交
29 30 31 32 33 34 35 36
## Installing

Using npm:

```bash
$ npm install axios
```

M
Matt Zabriskie 已提交
37 38 39 40 41 42
Using bower:

```bash
$ bower install axios
```

M
Matt Zabriskie 已提交
43 44 45 46 47 48
Using cdn:

```html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```

M
Matt Zabriskie 已提交
49 50 51 52 53 54 55
## Example

Performing a `GET` request

```js
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
M
mzabriskie 已提交
56 57 58
  .then(function (response) {
    console.log(response);
  })
N
Nick Uraltsev 已提交
59 60
  .catch(function (error) {
    console.log(error);
M
mzabriskie 已提交
61
  });
62

M
Matt Zabriskie 已提交
63 64
// Optionally the request above could also be done as
axios.get('/user', {
M
mzabriskie 已提交
65 66 67 68 69 70 71
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
N
Nick Uraltsev 已提交
72 73
  .catch(function (error) {
    console.log(error);
M
mzabriskie 已提交
74
  });
M
Matt Zabriskie 已提交
75 76 77 78 79 80
```

Performing a `POST` request

```js
axios.post('/user', {
M
mzabriskie 已提交
81 82 83 84 85 86
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
N
Nick Uraltsev 已提交
87 88
  .catch(function (error) {
    console.log(error);
M
mzabriskie 已提交
89
  });
M
Matt Zabriskie 已提交
90 91
```

M
Matt Zabriskie 已提交
92 93
Performing multiple concurrent requests

M
Matt Zabriskie 已提交
94
```js
M
Matt Zabriskie 已提交
95
function getUserAccount() {
M
mzabriskie 已提交
96
  return axios.get('/user/12345');
M
Matt Zabriskie 已提交
97 98 99
}

function getUserPermissions() {
M
mzabriskie 已提交
100
  return axios.get('/user/12345/permissions');
M
Matt Zabriskie 已提交
101 102 103
}

axios.all([getUserAccount(), getUserPermissions()])
M
mzabriskie 已提交
104 105 106
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));
M
Matt Zabriskie 已提交
107 108
```

M
mzabriskie 已提交
109
## axios API
M
Matt Zabriskie 已提交
110

M
Matt Zabriskie 已提交
111
Requests can be made by passing the relevant config to `axios`.
M
Matt Zabriskie 已提交
112

M
Matt Zabriskie 已提交
113
##### axios(config)
M
Matt Zabriskie 已提交
114 115

```js
M
Matt Zabriskie 已提交
116
// Send a POST request
M
Matt Zabriskie 已提交
117
axios({
M
Matt Zabriskie 已提交
118 119 120 121 122 123
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
M
Matt Zabriskie 已提交
124 125 126
});
```

M
Matt Zabriskie 已提交
127 128 129
##### axios(url[, config])

```js
J
Jamison Dance 已提交
130
// Send a GET request (default method)
M
Matt Zabriskie 已提交
131 132 133
axios('/user/12345');
```

M
Matt Zabriskie 已提交
134 135 136 137
### Request method aliases

For convenience aliases have been provided for all supported request methods.

138
##### axios.request(config)
M
Matt Zabriskie 已提交
139 140 141 142 143 144
##### axios.get(url[, config])
##### axios.delete(url[, config])
##### axios.head(url[, config])
##### axios.post(url[, data[, config]])
##### axios.put(url[, data[, config]])
##### axios.patch(url[, data[, config]])
M
Matt Zabriskie 已提交
145 146

###### NOTE
M
Matt Zabriskie 已提交
147
When using the alias methods `url`, `method`, and `data` properties don't need to be specified in config.
M
Matt Zabriskie 已提交
148

M
Matt Zabriskie 已提交
149 150
### Concurrency

M
Matt Zabriskie 已提交
151 152
Helper functions for dealing with concurrent requests.

M
Matt Zabriskie 已提交
153 154 155
##### axios.all(iterable)
##### axios.spread(callback)

N
Nick Uraltsev 已提交
156 157 158 159 160 161 162 163
### Creating an instance

You can create a new instance of axios with a custom config.

##### axios.create([config])

```js
var instance = axios.create({
164
  baseURL: 'https://some-domain.com/api/',
N
Nick Uraltsev 已提交
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
```

### Instance methods

The available instance methods are listed below. The specified config will be merged with the instance config.

##### axios#request(config)
##### axios#get(url[, config])
##### axios#delete(url[, config])
##### axios#head(url[, config])
##### axios#post(url[, data[, config]])
##### axios#put(url[, data[, config]])
##### axios#patch(url[, data[, config]])

M
Matt Zabriskie 已提交
182
## Request Config
M
Matt Zabriskie 已提交
183

N
Nick Uraltsev 已提交
184
These are the available config options for making requests. Only the `url` is required. Requests will default to `GET` if `method` is not specified.
M
Matt Zabriskie 已提交
185

M
Matt Zabriskie 已提交
186 187
```js
{
M
mzabriskie 已提交
188 189
  // `url` is the server URL that will be used for the request
  url: '/user',
190

191 192 193
  // `method` is the request method to be used when making the request
  method: 'get', // default

194 195
  // `baseURL` will be prepended to `url` unless `url` is absolute.
  // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
196 197
  // to methods of that instance.
  baseURL: 'https://some-domain.com/api/',
M
mzabriskie 已提交
198 199 200

  // `transformRequest` allows changes to the request data before it is sent to the server
  // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
N
Nick Uraltsev 已提交
201
  // The last function in the array must return a string, an ArrayBuffer, or a Stream
M
mzabriskie 已提交
202 203
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
204

M
mzabriskie 已提交
205 206 207 208 209 210 211
    return data;
  }],

  // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data
212

M
mzabriskie 已提交
213 214 215 216 217 218
    return data;
  }],

  // `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},

R
rupertrutland 已提交
219
  // `params` are the URL parameters to be sent with the request
220
  // Must be a plain object or a URLSearchParams object
M
mzabriskie 已提交
221 222 223
  params: {
    ID: 12345
  },
224 225 226 227 228 229

  // `paramsSerializer` is an optional function in charge of serializing `params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
M
mzabriskie 已提交
230 231 232

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
233 234 235 236
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream
M
mzabriskie 已提交
237 238 239 240
  data: {
    firstName: 'Fred'
  },

M
mzabriskie 已提交
241 242 243 244
  // `timeout` specifies the number of milliseconds before the request times out.
  // If the request takes longer than `timeout`, the request will be aborted.
  timeout: 1000,

M
mzabriskie 已提交
245 246 247 248
  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default

249
  // `adapter` allows custom handling of requests which makes testing easier.
250 251
  // Return a promise and supply a valid response (see [response docs](#response-api)).
  adapter: function (config) {
252 253 254
    /* ... */
  },

255
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
256 257
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
258
  auth: {
I
Idan Gazit 已提交
259 260
    username: 'janedoe',
    password: 's00pers3cret'
261 262
  }

M
mzabriskie 已提交
263
  // `responseType` indicates the type of data that the server will respond with
N
Nick Uraltsev 已提交
264
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
M
mzabriskie 已提交
265 266 267 268 269 270
  responseType: 'json', // default

  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
271 272
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

273 274 275 276 277 278 279
  // `onUploadProgress` allows handling of progress events for uploads
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` allows handling of progress events for downloads
  onDownloadProgress: function (progressEvent) {
280
    // Do whatever you want with the native progress event
281
  },
282

283
  // `maxContentLength` defines the max size of the http response content allowed
284 285 286 287 288 289 290 291
  maxContentLength: 2000,

  // `validateStatus` defines whether to resolve or reject the promise for a given
  // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
  // or `undefined`), the promise will be resolved; otherwise, the promise will be
  // rejected.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
N
Nick Uraltsev 已提交
292 293 294 295
  },

  // `maxRedirects` defines the maximum number of redirects to follow in node.js.
  // If set to 0, no redirects will be followed.
296 297 298 299 300 301
  maxRedirects: 5, // default

  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows to configure options like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
302 303 304 305 306 307 308
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' defines the hostname and port of the proxy server
  proxy: {
    host: '127.0.0.1',
    port: 9000
  }
M
Matt Zabriskie 已提交
309 310 311
}
```

M
Matt Zabriskie 已提交
312
## Response Schema
M
Matt Zabriskie 已提交
313

M
mzabriskie 已提交
314 315 316 317
The response for a request contains the following information.

```js
{
M
mzabriskie 已提交
318 319 320 321 322
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,
323

M
mzabriskie 已提交
324
  // `statusText` is the HTTP status message from the server response
M
mzabriskie 已提交
325
  statusText: 'OK',
M
mzabriskie 已提交
326 327 328 329 330 331

  // `headers` the headers that the server responded with
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {}
M
mzabriskie 已提交
332 333 334
}
```

335
When using `then`, you will receive the response as follows:
M
Matt Zabriskie 已提交
336

M
Matt Zabriskie 已提交
337
```js
M
Matt Zabriskie 已提交
338
axios.get('/user/12345')
M
mzabriskie 已提交
339 340 341
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
M
mzabriskie 已提交
342
    console.log(response.statusText);
M
mzabriskie 已提交
343 344
    console.log(response.headers);
    console.log(response.config);
345
  });
M
mzabriskie 已提交
346 347
```

348 349
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.

M
Matt Zabriskie 已提交
350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369
## Config Defaults

You can specify config defaults that will be applied to every request.

### Global axios defaults

```js
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
```

### Custom instance defaults

```js
// Set config defaults when creating the instance
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

M
Marcelo Jorge Vieira 已提交
370
// Alter defaults after instance has been created
M
Matt Zabriskie 已提交
371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
```

### Config order of precedence

Config will be merged with an order of precedence. The order is library defaults found in `lib/defaults.js`, 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.

```js
// Create an instance using the config defaults provided by the library
// At this point the timeout config value is `0` as is the default for the library
var instance = axios.create();

// Override timeout default for the library
// Now all requests will wait 2.5 seconds before timing out
instance.defaults.timeout = 2500;

// Override timeout for this request as it's known to take a long time
instance.get('/longRequest', {
  timeout: 5000
390
});
M
Matt Zabriskie 已提交
391 392
```

M
mzabriskie 已提交
393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423
## Interceptors

You can intercept requests or responses before they are handled by `then` or `catch`.

```js
// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });
```

If you may need to remove an interceptor later you can.

```js
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
```

N
Nick Uraltsev 已提交
424 425 426 427 428 429 430
You can add interceptors to a custom instance of axios.

```js
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
```

M
mzabriskie 已提交
431 432 433 434
## Handling Errors

```js
axios.get('/user/12345')
N
Nick Uraltsev 已提交
435 436
  .catch(function (error) {
    if (error.response) {
M
mzabriskie 已提交
437 438
      // The request was made, but the server responded with a status code
      // that falls out of the range of 2xx
N
Nick Uraltsev 已提交
439 440 441 442 443 444
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
M
mzabriskie 已提交
445
    }
N
Nick Uraltsev 已提交
446
    console.log(error.config);
M
mzabriskie 已提交
447
  });
M
mzabriskie 已提交
448 449
```

450 451 452 453 454 455 456 457 458 459
You can define a custom HTTP status code error range using the `validateStatus` config option.

```js
axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // Reject only if the status code is greater than or equal to 500
  }
})
```

M
mzabriskie 已提交
460 461 462 463 464 465 466 467 468 469
## Semver

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.

## Promises

axios depends on a native ES6 Promise implementation to be [supported](http://caniuse.com/promises).
If your environment doesn't support ES6 Promises, you can [polyfill](https://github.com/jakearchibald/es6-promise).

## TypeScript
N
Nick Uraltsev 已提交
470
axios includes [TypeScript](http://typescriptlang.org) definitions.
471
```typescript
N
Nick Uraltsev 已提交
472
import axios from 'axios';
473 474 475
axios.get('/user?ID=12345');
```

476 477 478
## Resources

* [Changelog](https://github.com/mzabriskie/axios/blob/master/CHANGELOG.md)
N
Nick Uraltsev 已提交
479
* [Upgrade Guide](https://github.com/mzabriskie/axios/blob/master/UPGRADE_GUIDE.md)
480 481 482 483
* [Ecosystem](https://github.com/mzabriskie/axios/blob/master/ECOSYSTEM.md)
* [Contributing Guide](https://github.com/mzabriskie/axios/blob/master/CONTRIBUTING.md)
* [Code of Conduct](https://github.com/mzabriskie/axios/blob/master/CODE_OF_CONDUCT.md)

M
Matt Zabriskie 已提交
484
## Credits
M
Matt Zabriskie 已提交
485

M
Matt Zabriskie 已提交
486 487
axios is heavily inspired by the [$http service](https://docs.angularjs.org/api/ng/service/$http) provided in [Angular](https://angularjs.org/). Ultimately axios is an effort to provide a standalone `$http`-like service for use outside of Angular.

M
Matt Zabriskie 已提交
488 489
## License

490
MIT