转自:https://www.kancloud.cn/yunye/axios/234845
axios. get ( ’/user’ , { params: { ID : 12345 } } ) . then ( function ( response) { console. log ( response) ; } ) . catch ( function ( error) { console. log ( error) ; } ) ;
执行 POST
请求
axios. post ( '/user' , {
firstName: 'Fred' ,
lastName: 'Flintstone'
} )
. then ( function ( response) {
console. log ( response) ;
} )
. catch ( function ( error) {
console. log ( error) ;
} ) ;
执行多个并发请求
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) { } ) ) ;
axios API
可以通过向 axios
传递相关配置来创建请求
axios(config)
axios ( {
method: 'post' ,
url: '/user/12345' ,
data: {
firstName: 'Fred' ,
lastName: 'Flintstone'
}
} ) ;
axios(url[, config])
axios ( '/user/12345' ) ;
请求方法的别名
为方便起见,为所有支持的请求方法提供了别名
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]])
NOTE
在使用别名方法时, url
、method
、data
这些属性都不必在配置中指定。
并发
处理并发请求的助手函数
axios.all(iterable)
axios.spread(callback)
创建实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])
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
是必需的。如果没有指定 method
,请求将默认使用 get
方法。
{
url: '/user' ,
method: ‘get’ ,
baseURL: ‘https://some-domain.com/api/ ’ ,
transformRequest: [ function ( data) {
<span class="token keyword">return</span> data<span class="token punctuation">;</span>
} ] ,
transformResponse: [ function ( data) {
<span class="token keyword">return</span> data<span class="token punctuation">;</span>
} ] ,
headers: { ‘X-Requested-With’ : ‘XMLHttpRequest’ } ,
params: { ID : 12345 } ,
paramsSerializer: function ( params) { return Qs. stringify ( params, { arrayFormat: ‘brackets’ } ) } ,
data: { firstName: ‘Fred’ } ,
timeout: 1000 ,
withCredentials: false ,
adapter: function ( config) { } ,
auth: { username: ‘janedoe’ , password: ‘s00pers3cret’ } ,
responseType: ‘json’ ,
xsrfCookieName: ‘XSRF-TOKEN’ ,
xsrfHeaderName: ‘X-XSRF-TOKEN’ ,
onUploadProgress: function ( progressEvent) { } ,
onDownloadProgress: function ( progressEvent) { } ,
maxContentLength: 2000 ,
validateStatus: function ( status) { return status >= 200 && status < 300 ; } ,
maxRedirects: 5 ,
httpAgent: new http. Agent ( { keepAlive: true } ) , httpsAgent: new https. Agent ( { keepAlive: true } ) ,
proxy: { host: ‘127.0.0.1’ , port: 9000 , auth: : { username: ‘mikeymike’ , password: ‘rapunz3l’ } } ,
cancelToken: new CancelToken ( function ( cancel) { } ) }
响应结构
某个请求的响应包含以下信息
{
data: { } ,
status: 200 ,
statusText: ‘OK’ ,
headers: { } ,
config: { } }
使用 then
时,你将接收下面这样的响应:
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) ;
} ) ;
在使用 catch
时,或传递 rejection callback 作为 then
的第二个参数时,响应可以通过 error
对象可被使用,正如在错误处理 这一节所讲。
配置的默认值/defaults
你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值
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' ;
自定义实例默认值
var instance = axios. create ( {
baseURL: 'https://api.example.com'
} ) ;
instance. defaults. headers. common[ ‘Authorization’ ] = AUTH_TOKEN ;
配置的优先顺序
配置会以一个优先顺序进行合并。这个顺序是:在 lib/defaults.js
找到的库的默认值,然后是实例的 defaults
属性,最后是请求的 config
参数。后者将优先于前者。这里是一个例子:
var instance = axios. create ( ) ;
instance. defaults. timeout = 2500 ;
instance. get ( ’/longRequest’ , { timeout: 5000 } ) ;
拦截器
在请求或响应被 then
或 catch
处理前拦截它们。
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) ; } ) ;
如果你想在稍后移除拦截器,可以这样:
var myInterceptor = axios. interceptors. request. use ( function ( ) { } ) ;
axios. interceptors. request. eject ( myInterceptor) ;
可以为自定义 axios 实例添加拦截器
var instance = axios. create ( ) ;
instance. interceptors. request. use ( function ( ) { } ) ;
错误处理
axios. get ( '/user/12345' )
. catch ( function ( error) {
if ( error. response) {
console. log ( error. response. data) ;
console. log ( error. response. status) ;
console. log ( error. response. headers) ;
} else {
console. log ( 'Error' , error. message) ;
}
console. log ( error. config) ;
} ) ;
可以使用 validateStatus
配置选项定义一个自定义 HTTP 状态码的错误范围。
axios. get ( '/user/12345' , {
validateStatus: function ( status) {
return status < 500 ;
}
} )
取消
使用 cancel token 取消请求
Axios 的 cancel token API 基于cancelable promises proposal ,它还处于第一阶段。
可以使用 CancelToken.source
工厂方法创建 cancel token,像这样:
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 ( ‘Operation canceled by the user.’ ) ;
还可以通过传递一个 executor 函数到 CancelToken
的构造函数来创建 cancel token:
var CancelToken = axios. CancelToken;
var cancel;
axios. get ( ’/user/12345’ , { cancelToken: new CancelToken ( function executor ( c) { cancel = c; } ) } ) ;
cancel ( ) ;
Note : 可以使用同一个 cancel token 取消多个请求
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 依赖原生的 ES6 Promise 实现而被支持 . 如果你的环境不支持 ES6 Promise,你可以使用 polyfill .
TypeScript
axios includes TypeScript definitions.
import axios from 'axios' ;
axios. get ( '/user?ID=12345' ) ;
Resources
Credits
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.
License
MIT