README.md 12.5 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
mzabriskie 已提交
7
[![dev dependencies](https://img.shields.io/david/dev/mzabriskie/axios.svg?style=flat-square)](https://david-dm.org/mzabriskie/axios#info=devDependencies)
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 31 32 33 34 35 36 37 38 39 40 41 42
## Installing

Using bower:

```bash
$ bower install axios
```

Using npm:

```bash
$ npm install axios
```

M
Matt Zabriskie 已提交
43 44 45 46 47 48 49
## Example

Performing a `GET` request

```js
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
M
mzabriskie 已提交
50 51 52 53 54 55
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
56

M
Matt Zabriskie 已提交
57 58
// Optionally the request above could also be done as
axios.get('/user', {
M
mzabriskie 已提交
59 60 61 62 63 64 65 66 67 68
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
M
Matt Zabriskie 已提交
69 70 71 72 73 74
```

Performing a `POST` request

```js
axios.post('/user', {
M
mzabriskie 已提交
75 76 77 78 79 80 81 82 83
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
M
Matt Zabriskie 已提交
84 85
```

M
Matt Zabriskie 已提交
86 87
Performing multiple concurrent requests

M
Matt Zabriskie 已提交
88
```js
M
Matt Zabriskie 已提交
89
function getUserAccount() {
M
mzabriskie 已提交
90
  return axios.get('/user/12345');
M
Matt Zabriskie 已提交
91 92 93
}

function getUserPermissions() {
M
mzabriskie 已提交
94
  return axios.get('/user/12345/permissions');
M
Matt Zabriskie 已提交
95 96 97
}

axios.all([getUserAccount(), getUserPermissions()])
M
mzabriskie 已提交
98 99 100
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));
M
Matt Zabriskie 已提交
101 102
```

M
mzabriskie 已提交
103
## axios API
M
Matt Zabriskie 已提交
104

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

M
Matt Zabriskie 已提交
107
##### axios(config)
M
Matt Zabriskie 已提交
108 109

```js
M
Matt Zabriskie 已提交
110
// Send a POST request
M
Matt Zabriskie 已提交
111
axios({
M
Matt Zabriskie 已提交
112 113 114 115 116 117
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
M
Matt Zabriskie 已提交
118 119 120
});
```

M
Matt Zabriskie 已提交
121 122 123 124 125 126 127
##### axios(url[, config])

```js
// Sned a GET request (default method)
axios('/user/12345');
```

M
Matt Zabriskie 已提交
128 129 130 131
### Request method aliases

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

M
Matt Zabriskie 已提交
132 133 134 135 136 137
##### 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 已提交
138 139

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

M
Matt Zabriskie 已提交
142 143
### Concurrency

M
Matt Zabriskie 已提交
144 145
Helper functions for dealing with concurrent requests.

M
Matt Zabriskie 已提交
146 147 148
##### axios.all(iterable)
##### axios.spread(callback)

N
Nick Uraltsev 已提交
149 150 151 152 153 154 155 156
### Creating an instance

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

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

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

N
Nick Uraltsev 已提交
177
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 已提交
178

M
Matt Zabriskie 已提交
179 180
```js
{
M
mzabriskie 已提交
181 182
  // `url` is the server URL that will be used for the request
  url: '/user',
183
  
184 185 186
  // `method` is the request method to be used when making the request
  method: 'get', // default

187 188 189 190
  // `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 
  // to methods of that instance.
  baseURL: 'https://some-domain.com/api/',
M
mzabriskie 已提交
191 192 193 194 195 196

  // `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'
  // The last function in the array must return a string or an ArrayBuffer
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
197

M
mzabriskie 已提交
198 199 200 201 202 203 204
    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
205

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

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

R
rupertrutland 已提交
212
  // `params` are the URL parameters to be sent with the request
M
mzabriskie 已提交
213 214 215
  params: {
    ID: 12345
  },
216 217 218 219 220 221

  // `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 已提交
222 223 224 225 226 227 228 229

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  // When no `transformRequest` is set, must be a string, an ArrayBuffer or a hash
  data: {
    firstName: 'Fred'
  },

M
mzabriskie 已提交
230 231 232 233
  // `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 已提交
234 235 236 237
  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default

238 239 240 241 242 243
  // `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) {
    /* ... */
  },

244
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
245 246
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
247
  auth: {
I
Idan Gazit 已提交
248 249
    username: 'janedoe',
    password: 's00pers3cret'
250 251
  }

M
mzabriskie 已提交
252 253 254 255 256 257 258 259
  // `responseType` indicates the type of data that the server will respond with
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text'
  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
260 261 262 263 264 265 266
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

  // `progress` allows handling of progress events for 'POST' and 'PUT uploads'
  // as well as 'GET' downloads
  progress: function(progressEvent) {
    // Do whatever you want with the native progress event
  }
M
Matt Zabriskie 已提交
267 268 269
}
```

M
Matt Zabriskie 已提交
270
## Response Schema
M
Matt Zabriskie 已提交
271

M
mzabriskie 已提交
272 273 274 275
The response for a request contains the following information.

```js
{
M
mzabriskie 已提交
276 277 278 279 280
  // `data` is the response that was provided by the server
  data: {},

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

M
mzabriskie 已提交
282
  // `statusText` is the HTTP status message from the server response
M
mzabriskie 已提交
283
  statusText: 'OK',
M
mzabriskie 已提交
284 285 286 287 288 289

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

  // `config` is the config that was provided to `axios` for the request
  config: {}
M
mzabriskie 已提交
290 291 292
}
```

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

M
Matt Zabriskie 已提交
295
```js
M
Matt Zabriskie 已提交
296
axios.get('/user/12345')
M
mzabriskie 已提交
297 298 299
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
M
mzabriskie 已提交
300
    console.log(response.statusText);
M
mzabriskie 已提交
301 302 303 304 305
    console.log(response.headers);
    console.log(response.config);
});
```

M
Matt Zabriskie 已提交
306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325
## 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 已提交
326
// Alter defaults after instance has been created
M
Matt Zabriskie 已提交
327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348
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
}); 
```

M
mzabriskie 已提交
349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379
## 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 已提交
380 381 382 383 384 385 386
You can add interceptors to a custom instance of axios.

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

M
mzabriskie 已提交
387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
## 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 已提交
404 405
```

M
mzabriskie 已提交
406 407 408 409 410 411 412 413 414 415
## 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 已提交
416
axios includes a [TypeScript](http://typescriptlang.org) definition.
417 418
```typescript
/// <reference path="axios.d.ts" />
419
import * as axios from 'axios';
420 421 422
axios.get('/user?ID=12345');
```

M
Matt Zabriskie 已提交
423
## Credits
M
Matt Zabriskie 已提交
424

M
Matt Zabriskie 已提交
425 426
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 已提交
427 428
## License

429
MIT