axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
可以通过将相关配置传递给 axios 来进行请求。
为了方便起见，已经为所有支持的请求方法提供了别名。
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]]）注意 当使用别名方法时，不需要在config中指定url，method和data属性。
帮助函数处理并发请求。
axios.all（iterable）axios.spread（callback）您可以使用自定义配置创建axios的新实例。
axios.create（[config]）
1 2 3 4 5 var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });可用的实例方法如下所示。 指定的配置将与实例配置合并。
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]]）
这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法，请求将默认为GET。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 { // `url`是将用于请求的服务器URL url: '/user', // `method`是发出请求时使用的请求方法 method: 'get', // 默认 // `baseURL`将被添加到`url`前面，除非`url`是绝对的。 // 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。 baseURL: 'https://some-domain.com/api/', // `transformRequest`允许在请求数据发送到服务器之前对其进行更改 // 这只适用于请求方法'PUT'，'POST'和'PATCH' // 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream transformRequest: [ function (data) { // 做任何你想要的数据转换 return data; }], // `transformResponse`允许在 then / catch之前对响应数据进行更改 transformResponse: [ function (data) { // Do whatever you want to transform the data return data; }], // `headers`是要发送的自定义 headers headers: { 'X-Requested-With': 'XMLHttpRequest'}, // `params`是要与请求一起发送的URL参数 // 必须是纯对象或URLSearchParams对象 params: { ID: 12345 }, // `paramsSerializer`是一个可选的函数，负责序列化`params` // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data`是要作为请求主体发送的数据 // 仅适用于请求方法“PUT”，“POST”和“PATCH” // 当没有设置`transformRequest`时，必须是以下类型之一： // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream data: { firstName: 'Fred' }, // `timeout`指定请求超时之前的毫秒数。 // 如果请求的时间超过'timeout'，请求将被中止。 timeout: 1000, // `withCredentials`指示是否跨站点访问控制请求 // should be made using credentials withCredentials: false, // default // `adapter'允许自定义处理请求，这使得测试更容易。 // 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api）） adapter: function (config) { /* ... */ }, // `auth'表示应该使用 HTTP 基本认证，并提供凭据。 // 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。 auth: { username: 'janedoe', password: 's00pers3cret' }, // “responseType”表示服务器将响应的数据类型 // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称 xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName`是携带xsrf令牌值的http头的名称 xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress`允许处理上传的进度事件 onUploadProgress: function (progressEvent) { // 使用本地 progress 事件做任何你想要做的 }, // `onDownloadProgress`允许处理下载的进度事件 onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `maxContentLength`定义允许的http响应内容的最大大小 maxContentLength: 2000, // `validateStatus`定义是否解析或拒绝给定的promise // HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被 // 拒绝。 validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects`定义在node.js中要遵循的重定向的最大数量。 // 如果设置为0，则不会遵循重定向。 maxRedirects: 5, // 默认 // `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。 // 允许配置类似`keepAlive`的选项， // 默认情况下不启用。 httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy'定义代理服务器的主机名和端口 // `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。 // 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。 proxy: { host: '127.0.0.1', port: 9000, auth: : { username: 'mikeymike', password: 'rapunz3l' } }, // “cancelToken”指定可用于取消请求的取消令牌 // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }) }使用 then 时，您将收到如下响应：
1 2 3 4 5 6 7 8 axios.get( '/user/12345') .then( function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });您可以指定将应用于每个请求的配置默认值。
配置将与优先顺序合并。 顺序是lib / defaults.js中的库默认值，然后是实例的defaults属性，最后是请求的config参数。 后者将优先于前者。 这里有一个例子。
1 2 3 4 5 6 7 8 9 10 11 12 //使用库提供的配置默认值创建实例 //此时，超时配置值为`0`，这是库的默认值 var instance = axios.create（）; //覆盖库的超时默认值 //现在所有请求将在超时前等待2.5秒 instance.defaults.timeout = 2500; //覆盖此请求的超时，因为它知道需要很长时间 instance.get（ '/ longRequest'，{ timeout： 5000 }）;你可以截取请求或响应在被 then 或者 catch 处理之前
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //添加请求拦截器 axios.interceptors.request.use（ function（config）{ //在发送请求之前做某事 return config; }， function（error）{ //请求错误时做些事 return Promise.reject（error）; }）; //添加响应拦截器 axios.interceptors.response.use（ function（response）{ //对响应数据做些事 return response; }， function（error）{ //请求错误时做些事 return Promise.reject（error）; }）;如果你以后可能需要删除拦截器。
1 2 var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);你可以将拦截器添加到axios的自定义实例。
1 2 var instance = axios.create(); instance.interceptors.request.use( function () {/*...*/});您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。
1 2 3 4 5 axios.get（ '/ user / 12345'，{ validateStatus： function（status）{ return status < 500; //仅当状态代码大于或等于500时拒绝 }} }）您可以使用取消令牌取消请求。
axios cancel token API基于可取消的promise提议，目前处于阶段1。
您可以使用CancelToken.source工厂创建一个取消令牌，如下所示：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var CancelToken = axios.CancelToken; var source = CancelToken.source（）; axios.get( '/user/12345', { cancelToken: source.token }).catch( function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); //取消请求（消息参数是可选的） source.cancel（ '操作被用户取消。'）;您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌：
1 2 3 4 5 6 7 8 9 10 11 12 var CancelToken = axios.CancelToken; var cancel; axios.get（ '/ user / 12345'，{ cancelToken： new CancelToken（function executor（c）{ //一个执行器函数接收一个取消函数作为参数 cancel = c; }） }）; // 取消请求 clear();注意：您可以使用相同的取消令牌取消几个请求。
默认情况下，axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。
在浏览器中，您可以使用URLSearchParams API，如下所示：
1 2 3 4 var params = new URLSearchParams(); params.append( 'param1', 'value1'); params.append( 'param2', 'value2'); axios.post( '/foo', params);请注意，所有浏览器都不支持URLSearchParams，但是有一个polyfill可用（确保polyfill全局环境）。
或者，您可以使用qs库对数据进行编码：
1 2 var qs = require('qs'); axios.post( '/foo', qs.stringify({ 'bar': 123 });在node.js中，可以使用querystring模块，如下所示：
1 2 var querystring = require('querystring'); axios.post( 'http://something.com/', querystring.stringify({ foo: 'bar' });你也可以使用qs库。
axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises，您可以使用polyfill。
axios包括TypeScript定义。
1 2 import axios from 'axios'; axios.get( '/user?ID=12345');axios在很大程度上受到Angular提供的$http服务的启发。 最终，axios努力提供一个在Angular外使用的独立的$http-like服务。
Promise based HTTP client for the browser and node.js
Using npm:
$ npm install axiosUsing bower:
$ bower install axiosUsing cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Performing a GET request
// Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });Performing a POST request
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });Performing multiple concurrent requests
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete }));Requests can be made by passing the relevant config to axios.
For convenience aliases have been provided for all supported request methods.
When using the alias methods url, method, and data properties don't need to be specified in config.
Helper functions for dealing with concurrent requests.
You can create a new instance of axios with a custom config.
The available instance methods are listed below. The specified config will be merged with the instance config.
These are the available config options for making requests. Only the url is required. Requests will default to GET if method is not specified.
{ // `url` is the server URL that will be used for the request url: '/user', // `method` is the request method to be used when making the request method: 'get', // default // `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/', // `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 instance of Buffer, ArrayBuffer, // FormData or Stream transformRequest: [function (data) { // Do whatever you want to transform the data 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 return data; }], // `headers` are custom headers to be sent headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` are the URL parameters to be sent with the request // Must be a plain object or a URLSearchParams object params: { ID: 12345 }, // `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'}) }, // `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 of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream, Buffer data: { firstName: 'Fred' }, // `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, // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default // `adapter` allows custom handling of requests which makes testing easier. // Return a promise and supply a valid response (see lib/adapters/README.md). adapter: function (config) { /* ... */ }, // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. // This will set an `Authorization` header, overwriting any existing // `Authorization` custom headers you have set using `headers`. auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` indicates the type of data that the server will respond with // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' 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 // `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) { // Do whatever you want with the native progress event }, // `maxContentLength` defines the max size of the http response content allowed 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 }, // `maxRedirects` defines the maximum number of redirects to follow in node.js. // If set to 0, no redirects will be followed. 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 options to be added like // `keepAlive` that are not enabled by default. httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy' defines the hostname and port of the proxy server // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and // supplies credentials. // This will set an `Proxy-Authorization` header, overwriting any existing // `Proxy-Authorization` custom headers you have set using `headers`. proxy: { host: '127.0.0.1', port: 9000, auth: { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` specifies a cancel token that can be used to cancel the request // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }) }The response for a request contains the following information.
{ // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the headers that the server responded with // All header names are lower cased headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance the browser request: {} }When using then, you will receive the response as follows:
axios.get('/user/12345') .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });When using catch, or passing a rejection callback as second parameter of then, the response will be available through the error object as explained in the Handling Errors section.
You can specify config defaults that will be applied to every request.
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.
// 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 });You can intercept requests or responses before they are handled by then or catch.
// 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.
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);You can add interceptors to a custom instance of axios.
var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});You can define a custom HTTP status code error range using the validateStatus config option.
axios.get('/user/12345', { validateStatus: function (status) { return status < 500; // Reject only if the status code is greater than or equal to 500 } })You can cancel a request using a cancel token.
The axios cancel token API is based on the withdrawn cancelable promises proposal.
You can create a cancel token using the CancelToken.source factory as shown below:
var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // handle error } }); // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');You can also create a cancel token by passing an executor function to the CancelToken constructor:
var CancelToken = axios.CancelToken; var cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // An executor function receives a cancel function as a parameter cancel = c; }) }); // cancel the request cancel();Note: you can cancel several requests with the same cancel token.
By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencodedformat instead, you can use one of the following options.
In a browser, you can use the URLSearchParams API as follows:
var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);Note that URLSearchParams is not supported by all browsers, but there is a polyfill available (make sure to polyfill the global environment).
Alternatively, you can encode data using the qs library:
var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));In node.js, you can use the querystring module as follows:
var querystring = require('querystring'); axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));You can also use the qs library.
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.
axios depends on a native ES6 Promise implementation to be supported. If your environment doesn't support ES6 Promises, you can polyfill.
axios includes TypeScript definitions.
import axios from 'axios'; axios.get('/user?ID=12345');axios is heavily inspired by the $http service provided in Angular. Ultimately axios is an effort to provide a standalone $http-like service for use outside of Angular.
MIT
