README.md 13.6 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 6
[![code coverage](https://img.shields.io/coveralls/mzabriskie/axios.svg?style=flat-square)](https://coveralls.io/r/mzabriskie/axios)
[![npm downloads](https://img.shields.io/npm/dm/axios.svg?style=flat-square)](https://www.npmjs.org/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

27 28
[![Browser Matrix](https://saucelabs.com/browser-matrix/axios.svg)](https://saucelabs.com/u/axios)

M
Matt Zabriskie 已提交
29 30
## Installing

M
Matt Zabriskie 已提交
31
Using cdn:
M
Matt Zabriskie 已提交
32

M
Matt Zabriskie 已提交
33 34
```html
<script src="https://npmcdn.com/axios/dist/axios.min.js"></script>
M
Matt Zabriskie 已提交
35 36 37 38 39 40 41 42
```

Using npm:

```bash
$ npm install axios
```

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

```bash
$ bower install axios
```

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 59 60 61
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
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 72 73 74
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
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 87 88 89
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
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.

M
Matt Zabriskie 已提交
138 139 140 141 142 143
##### 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 已提交
144 145

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

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

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

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

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

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

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

```js
var instance = axios.create({
163
  baseURL: 'https://some-domain.com/api/',
N
Nick Uraltsev 已提交
164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
  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 已提交
181
## Request Config
M
Matt Zabriskie 已提交
182

N
Nick Uraltsev 已提交
183
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 已提交
184

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

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

193 194
  // `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
195 196
  // to methods of that instance.
  baseURL: 'https://some-domain.com/api/',
M
mzabriskie 已提交
197 198 199

  // `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 已提交
200
  // The last function in the array must return a string, an ArrayBuffer, or a Stream
M
mzabriskie 已提交
201 202
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
203

M
mzabriskie 已提交
204 205 206 207 208 209 210
    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
211

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

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

R
rupertrutland 已提交
218
  // `params` are the URL parameters to be sent with the request
M
mzabriskie 已提交
219 220 221
  params: {
    ID: 12345
  },
222 223 224 225 226 227

  // `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 已提交
228 229 230

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
N
Nick Uraltsev 已提交
231
  // When no `transformRequest` is set, must be a string, an ArrayBuffer, a hash, or a Stream
M
mzabriskie 已提交
232 233 234 235
  data: {
    firstName: 'Fred'
  },

M
mzabriskie 已提交
236 237 238 239
  // `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 已提交
240 241 242 243
  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default

244 245 246 247 248 249
  // `adapter` allows custom handling of requests which makes testing easier.
  // Call `resolve` or `reject` and supply a valid response (see [response docs](#response-api)).
  adapter: function (resolve, reject, config) {
    /* ... */
  },

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

M
mzabriskie 已提交
258
  // `responseType` indicates the type of data that the server will respond with
N
Nick Uraltsev 已提交
259
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
M
mzabriskie 已提交
260 261 262 263 264 265
  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
266 267 268 269
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

  // `progress` allows handling of progress events for 'POST' and 'PUT uploads'
  // as well as 'GET' downloads
270
  progress: function (progressEvent) {
271
    // Do whatever you want with the native progress event
272
  },
273

274
  // `maxContentLength` defines the max size of the http response content allowed
275 276 277 278 279 280 281 282 283
  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
  }
M
Matt Zabriskie 已提交
284 285 286
}
```

M
Matt Zabriskie 已提交
287
## Response Schema
M
Matt Zabriskie 已提交
288

M
mzabriskie 已提交
289 290 291 292
The response for a request contains the following information.

```js
{
M
mzabriskie 已提交
293 294 295 296 297
  // `data` is the response that was provided by the server
  data: {},

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

M
mzabriskie 已提交
299
  // `statusText` is the HTTP status message from the server response
M
mzabriskie 已提交
300
  statusText: 'OK',
M
mzabriskie 已提交
301 302 303 304 305 306

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

  // `config` is the config that was provided to `axios` for the request
  config: {}
M
mzabriskie 已提交
307 308 309
}
```

M
mzabriskie 已提交
310
When using `then` or `catch`, you will receive the response as follows:
M
Matt Zabriskie 已提交
311

M
Matt Zabriskie 已提交
312
```js
M
Matt Zabriskie 已提交
313
axios.get('/user/12345')
M
mzabriskie 已提交
314 315 316
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
M
mzabriskie 已提交
317
    console.log(response.statusText);
M
mzabriskie 已提交
318 319 320 321 322
    console.log(response.headers);
    console.log(response.config);
});
```

M
Matt Zabriskie 已提交
323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342
## 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 已提交
343
// Alter defaults after instance has been created
M
Matt Zabriskie 已提交
344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362
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
363
});
M
Matt Zabriskie 已提交
364 365
```

M
mzabriskie 已提交
366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396
## 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 已提交
397 398 399 400 401 402 403
You can add interceptors to a custom instance of axios.

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

M
mzabriskie 已提交
404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420
## Handling Errors

```js
axios.get('/user/12345')
  .catch(function (response) {
    if (response instanceof Error) {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', response.message);
    } else {
      // The request was made, but the server responded with a status code
      // that falls out of the range of 2xx
      console.log(response.data);
      console.log(response.status);
      console.log(response.headers);
      console.log(response.config);
    }
  });
M
mzabriskie 已提交
421 422
```

423 424 425 426 427 428 429 430 431 432
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 已提交
433 434 435 436 437 438 439 440 441 442
## 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
M
mzabriskie 已提交
443
axios includes a [TypeScript](http://typescriptlang.org) definition.
444 445
```typescript
/// <reference path="axios.d.ts" />
446
import * as axios from 'axios';
447 448 449
axios.get('/user?ID=12345');
```

450 451 452 453 454 455 456
## Resources

* [Changelog](https://github.com/mzabriskie/axios/blob/master/CHANGELOG.md)
* [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 已提交
457
## Credits
M
Matt Zabriskie 已提交
458

M
Matt Zabriskie 已提交
459 460
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 已提交
461 462
## License

463
MIT