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配置实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!