README.md 11.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 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

M
mzabriskie 已提交
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) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) |
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
M
mzabriskie 已提交
26

M
Matt Zabriskie 已提交
27 28 29 30 31 32 33 34 35 36 37 38 39 40
## Installing

Using bower:

```bash
$ bower install axios
```

Using npm:

```bash
$ npm install axios
```

M
Matt Zabriskie 已提交
41 42 43 44 45 46 47
## Example

Performing a `GET` request

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

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

Performing a `POST` request

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

M
Matt Zabriskie 已提交
84 85
Performing multiple concurrent requests

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

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

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

M
mzabriskie 已提交
101
## axios API
M
Matt Zabriskie 已提交
102

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

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

```js
axios({
M
mzabriskie 已提交
109 110
  method: 'get',
  url: '/user/12345'
M
Matt Zabriskie 已提交
111 112 113 114 115 116 117
});
```

### Request method aliases

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

M
Matt Zabriskie 已提交
118 119 120 121 122 123
##### 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 已提交
124 125

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

M
Matt Zabriskie 已提交
128 129
### Concurrency

M
Matt Zabriskie 已提交
130 131
Helper functions for dealing with concurrent requests.

M
Matt Zabriskie 已提交
132 133 134
##### axios.all(iterable)
##### axios.spread(callback)

N
Nick Uraltsev 已提交
135 136 137 138 139 140 141 142
### Creating an instance

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

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

```js
var instance = axios.create({
143
  baseURL: 'https://some-domain.com/api/',
N
Nick Uraltsev 已提交
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
  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
mzabriskie 已提交
161
## Request API
M
Matt Zabriskie 已提交
162

N
Nick Uraltsev 已提交
163
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 已提交
164

M
Matt Zabriskie 已提交
165 166
```js
{
M
mzabriskie 已提交
167 168
  // `url` is the server URL that will be used for the request
  url: '/user',
169
  
170 171 172
  // `method` is the request method to be used when making the request
  method: 'get', // default

173 174 175 176
  // `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 已提交
177 178 179 180 181 182

  // `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
183

M
mzabriskie 已提交
184 185 186 187 188 189 190
    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
191

M
mzabriskie 已提交
192 193 194 195 196 197 198 199 200 201
    return data;
  }],

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

  // `param` are the URL parameters to be sent with the request
  params: {
    ID: 12345
  },
202 203 204 205 206 207

  // `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 已提交
208 209 210 211 212 213 214 215

  // `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 已提交
216 217 218 219
  // `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 已提交
220 221 222 223
  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default

224 225 226 227 228 229
  // `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) {
    /* ... */
  },

230
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
231 232
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
233
  auth: {
I
Idan Gazit 已提交
234 235
    username: 'janedoe',
    password: 's00pers3cret'
236 237
  }

M
mzabriskie 已提交
238 239 240 241 242 243 244 245 246
  // `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
  xsrfHeaderName: 'X-XSRF-TOKEN' // default
M
Matt Zabriskie 已提交
247 248 249 250 251
}
```

## Response API

M
mzabriskie 已提交
252 253 254 255
The response for a request contains the following information.

```js
{
M
mzabriskie 已提交
256 257 258 259 260
  // `data` is the response that was provided by the server
  data: {},

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

M
mzabriskie 已提交
262
  // `statusText` is the HTTP status message from the server response
M
mzabriskie 已提交
263
  statusText: 'OK',
M
mzabriskie 已提交
264 265 266 267 268 269

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

  // `config` is the config that was provided to `axios` for the request
  config: {}
M
mzabriskie 已提交
270 271 272
}
```

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

M
Matt Zabriskie 已提交
275
```js
M
Matt Zabriskie 已提交
276
axios.get('/user/12345')
M
mzabriskie 已提交
277 278 279
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
M
mzabriskie 已提交
280
    console.log(response.statusText);
M
mzabriskie 已提交
281 282 283 284 285
    console.log(response.headers);
    console.log(response.config);
});
```

M
Matt Zabriskie 已提交
286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328
## 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'
});

// Alter defaults after instace has been created
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 已提交
329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359
## 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 已提交
360 361 362 363 364 365 366
You can add interceptors to a custom instance of axios.

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

M
mzabriskie 已提交
367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383
## 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 已提交
384 385
```

M
mzabriskie 已提交
386 387 388 389 390 391 392 393 394 395
## 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 已提交
396
axios includes a [TypeScript](http://typescriptlang.org) definition.
397 398 399 400 401 402
```typescript
/// <reference path="axios.d.ts" />
import axios = require('axios');
axios.get('/user?ID=12345');
```

M
Matt Zabriskie 已提交
403
## Credits
M
Matt Zabriskie 已提交
404

M
Matt Zabriskie 已提交
405 406
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 已提交
407 408
## License

409
MIT