Vue 中axios配置实例详解
1.GET请求
//向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
//也可以通过params对象传递参数
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
2.POST请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
3执行多个并发请求
functiongetUserAccount(){
returnaxios.get('/user/12345');
}
functiongetUserPermissions(){
returnaxios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//两个请求现已完成
}));
4.请求配置
这些是用于发出请求的可用配置选项。只有url是必需的。如果未指定方法，请求将默认为GET.
{//`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){
//做任何你想要的数据转换
returndata;
}],
//`transformResponse`允许在then/catch之前对响应数据进行更改
transformResponse:[function(data){
//Dowhateveryouwanttotransformthedata
returndata;
}],
//`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){
returnQs.stringify(params,{arrayFormat:'brackets'})
},
//`data`是要作为请求主体发送的数据
//仅适用于请求方法“PUT”，“POST”和“PATCH”
//当没有设置`transformRequest`时，必须是以下类型之一：
//-string,plainobject,ArrayBuffer,ArrayBufferView,URLSearchParams
//-Browseronly:FormData,File,Blob
//-Nodeonly:Stream
data:{
firstName:'Fred'
},
//`timeout`指定请求超时之前的毫秒数。
//如果请求的时间超过'timeout'，请求将被中止。
timeout:1000,
//`withCredentials`指示是否跨站点访问控制请求
//shouldbemadeusingcredentials
withCredentials:false,//default
//`adapter'允许自定义处理请求，这使得测试更容易。
//返回一个promise并提供一个有效的响应（参见[responsedocs]（＃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){
//Dowhateveryouwantwiththenativeprogressevent
},
//`maxContentLength`定义允许的http响应内容的最大大小
maxContentLength:2000,
//`validateStatus`定义是否解析或拒绝给定的promise
//HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null`promise将被解析;否则，promise将被
//拒绝。
validateStatus:function(status){
returnstatus>=200&&status<300;//default
},
//`maxRedirects`定义在node.js中要遵循的重定向的最大数量。
//如果设置为0，则不会遵循重定向。
maxRedirects:5,//默认
//`httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
//允许配置类似`keepAlive`的选项，
//默认情况下不启用。
httpAgent:newhttp.Agent({keepAlive:true}),
httpsAgent:newhttps.Agent({keepAlive:true}),
//'proxy'定义代理服务器的主机名和端口
//`auth`表示HTTPBasicauth应该用于连接到代理，并提供credentials。
//这将设置一个`Proxy-Authorization`header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization`自定义headers。
proxy:{
host:'127.0.0.1',
port:9000,
auth::{
username:'mikeymike',
password:'rapunz3l'
}
},
//“cancelToken”指定可用于取消请求的取消令牌
//(seeCancellationsectionbelowfordetails)
cancelToken:newCancelToken(function(cancel){
})
}
5.全局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';
6.拦截器
你可以截取请求或响应在被then或者catch处理之前
//添加请求拦截器<==>请求发起前做的事
axios.interceptors.request.use（function（config）{
//在发送请求之前做某事
returnconfig;
}，function（error）{
//请求错误时做些事
returnPromise.reject（error）;
}）;
//添加响应拦截器<==>响应回来后做的事
axios.interceptors.response.use（function（response）{
//对响应数据做些事
returnresponse;
}，function（error）{
//请求错误时做些事
returnPromise.reject（error）;
}）;
如果你以后可能需要删除拦截器。、
varmyInterceptor=axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.request.eject(myInterceptor);
你可以将拦截器添加到axios的自定义实例
varinstance=axios.create();
instance.interceptors.request.use(function(){/*...*/});
总结
以上所述是小编给大家介绍的Vue中axios配置实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！