Vue.js教程之axios与网络传输的学习实践
前言
在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。就学习尤大推荐的axios了。刚好本人对网络请求这块除了会get、put、post和delete这四个方法之外知之甚少,刚好补全上。
注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。
为何放弃vue-resource?
尤大的原话:
最近团队讨论了一下,Ajax本身跟Vue并没有什么需要特别整合的地方,使用fetchpolyfill或是axios、superagent等等都可以起到同等的效果,vue-resource提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对vue-resource的官方推荐。已有的用户可以继续使用,但以后不再把vue-resource作为官方的ajax方案。
axios安装
npm:
$npminstallaxios
bower:
$bowerinstallaxios
Usingcdn:
基本使用方法
GET请求
//MakearequestforauserwithagivenID axios.get('/user?ID=12345') .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); }); //Optionallytherequestabovecouldalsobedoneas 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); });
同时执行多个请求
functiongetUserAccount(){ returnaxios.get('/user/12345'); } functiongetUserPermissions(){ returnaxios.get('/user/12345/permissions'); } axios.all([getUserAccount(),getUserPermissions()]) .then(axios.spread(function(acct,perms){ //Bothrequestsarenowcomplete }));
其实和其他的ajax库一样,基本用法都是差不多的。大家一看就知道怎么用。
axiosAPI
可以直接通过config来完成请求
axios(config)
axios({ method:'post', url:'/user/12345', data:{ firstName:'Fred', lastName:'Flintstone' } });
axios(url,[config])
//SendaGETrequest(defaultmethod) axios('/user/12345');
请求方法别名
下面是axios支持的所有请求方法别名,便于各种请求。
注:[...]中的数据表示可以为空。url是ajax请求地址;data是提交的数据对象;config是配置对象,所有ajax配置都可以在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]])
并发性
下列接口用于处理并发请求(同时处理多个多个request)
- axios.all(iterable)
- axios.spread(callback)
axios实例
可以用自定义的config创建一个axios实例
axios.create([config])
varinstance=axios.create({ baseURL:'https://some-domain.com/api/', timeout:1000, headers:{'X-Custom-Header':'foobar'} });
实例方法
下面是实例的所有可用方法,方法中的config会与axios实例中的config合并。(实例可以将一些通用的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]])
Config
重点来了,来看看Config。
下面列出了config的所有配置项,其中之后url是必填的。当method没有指定方法,默认为GET。
{ //`url`istheserverURLthatwillbeusedfortherequest //用来向服务器发送请求的url url:'/user', //`method`istherequestmethodtobeusedwhenmakingtherequest //请求方法 method:'get',//default //`baseURL`willbeprependedto`url`unless`url`isabsolute. //Itcanbeconvenienttoset`baseURL`foraninstanceofaxiostopassrelativeURLs //tomethodsofthatinstance. //假如`url`不是绝对路径,那么向服务器发送请求的URL将是`baseURL+url` baseURL:'https://some-domain.com/api/', //`transformRequest`allowschangestotherequestdatabeforeitissenttotheserver //Thisisonlyapplicableforrequestmethods'PUT','POST',and'PATCH' //Thelastfunctioninthearraymustreturnastring,anArrayBuffer,oraStream transformRequest:[function(data){ //Dowhateveryouwanttotransformthedata returndata; }], //`transformResponse`allowschangestotheresponsedatatobemadebefore //itispassedtothen/catch transformResponse:[function(data){ //Dowhateveryouwanttotransformthedata returndata; }], //`headers`arecustomheaderstobesent headers:{'X-Requested-With':'XMLHttpRequest'}, //`params`aretheURLparameterstobesentwiththerequest //MustbeaplainobjectoraURLSearchParamsobject params:{ ID:12345 }, //`paramsSerializer`isanoptionalfunctioninchargeofserializing`params` //(e.g.https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/) paramsSerializer:function(params){ returnQs.stringify(params,{arrayFormat:'brackets'}) }, //`data`isthedatatobesentastherequestbody //Onlyapplicableforrequestmethods'PUT','POST',and'PATCH' //Whenno`transformRequest`isset,mustbeofoneofthefollowingtypes: //-string,plainobject,ArrayBuffer,ArrayBufferView,URLSearchParams //-Browseronly:FormData,File,Blob //-Nodeonly:Stream data:{ firstName:'Fred' }, //`timeout`specifiesthenumberofmillisecondsbeforetherequesttimesout. //Iftherequesttakeslongerthan`timeout`,therequestwillbeaborted. timeout:1000, //`withCredentials`indicateswhetherornotcross-siteAccess-Controlrequests //shouldbemadeusingcredentials withCredentials:false,//default //`adapter`allowscustomhandlingofrequestswhichmakestestingeasier. //Returnapromiseandsupplyavalidresponse(see[responsedocs](#response-api)). adapter:function(config){ /*...*/ }, //`auth`indicatesthatHTTPBasicauthshouldbeused,andsuppliescredentials. //Thiswillsetan`Authorization`header,overwritinganyexisting //`Authorization`customheadersyouhavesetusing`headers`. auth:{ username:'janedoe', password:'s00pers3cret' }, //`responseType`indicatesthetypeofdatathattheserverwillrespondwith //optionsare'arraybuffer','blob','document','json','text','stream' responseType:'json',//default //`xsrfCookieName`isthenameofthecookietouseasavalueforxsrftoken xsrfCookieName:'XSRF-TOKEN',//default //`xsrfHeaderName`isthenameofthehttpheaderthatcarriesthexsrftokenvalue xsrfHeaderName:'X-XSRF-TOKEN',//default //`onUploadProgress`allowshandlingofprogresseventsforuploads onUploadProgress:function(progressEvent){ //Dowhateveryouwantwiththenativeprogressevent }, //`onDownloadProgress`allowshandlingofprogresseventsfordownloads onDownloadProgress:function(progressEvent){ //Dowhateveryouwantwiththenativeprogressevent }, //`maxContentLength`definesthemaxsizeofthehttpresponsecontentallowed maxContentLength:2000, //`validateStatus`defineswhethertoresolveorrejectthepromiseforagiven //HTTPresponsestatuscode.If`validateStatus`returns`true`(orissetto`null` //or`undefined`),thepromisewillberesolved;otherwise,thepromisewillbe //rejected. validateStatus:function(status){ returnstatus>=200&&status<300;//default }, //`maxRedirects`definesthemaximumnumberofredirectstofollowinnode.js. //Ifsetto0,noredirectswillbefollowed. maxRedirects:5,//default //`httpAgent`and`httpsAgent`defineacustomagenttobeusedwhenperforminghttp //andhttpsrequests,respectively,innode.js.Thisallowstoconfigureoptionslike //`keepAlive`thatarenotenabledbydefault. httpAgent:newhttp.Agent({keepAlive:true}), httpsAgent:newhttps.Agent({keepAlive:true}), //'proxy'definesthehostnameandportoftheproxyserver //`auth`indicatesthatHTTPBasicauthshouldbeusedtoconnecttotheproxy,andsuppliescredentials. //Thiswillsetan`Proxy-Authorization`header,overwritinganyexisting`Proxy-Authorization`customheadersyouhavesetusing`headers`. proxy:{ host:'127.0.0.1', port:9000, auth::{ username:'mikeymike', password:'rapunz3l' } }, //`cancelToken`specifiesacanceltokenthatcanbeusedtocanceltherequest //(seeCancellationsectionbelowfordetails) cancelToken:newCancelToken(function(cancel){ }) }
分析Config
配置参数很多,我们一个一个来了解它们
- url——用来向服务器发送请求的url
- method——请求方法,默认是GET方法
- baseURL——基础URL路径,假如url不是绝对路径,如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL+url。
- transformRequest——transformRequest方法允许在请求发送到服务器之前修改该请求,此方法只适用于PUT、POST和PATCH方法中。而且,此方法最后必须返回一个string、ArrayBuffer或者Stream。
- transformResponse——transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。
- headers——发送自定义Headers头文件,头文件中包含了http请求的各种信息。
- params——params是发送请求的查询参数对象,对象中的数据会被拼接成url?param1=value1¶m2=value2。
- paramsSerializer——params参数序列化器。
- data——data是在发送POST、PUT或者PATCH请求的数据对象。
- timeout——请求超时设置,单位为毫秒
- withCredentials——表明是否有跨域请求需要用到证书
- adapter——adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的response
- auth——auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。
- responseType——表示服务器将返回响应的数据类型,有arraybuffer、blob、document、json、text、stream这6个类型,默认是json类似数据。
- xsrfCookieName——用作xsrftoken值的cookie名称
- xsrfHeaderName——带有xsrftoken值httphead名称
- onUploadProgress——允许在上传过程中的做一些操作
- onDownloadProgress——允许在下载过程中的做一些操作
- maxContentLength——定义了接收到的response响应数据的最大长度。
- validateStatus——validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果validateStatus返回true(或设置为null或undefined),promise将被接收;否则,promise将被拒绝。
- maxRedirects——maxRedirects定义了在node.js中redirect的最大值,如果设置为0,则没有redirect。
- httpAgent——定义在使用http请求时的代理
- httpsAgent——定义在使用https请求时的代理
- proxy——proxy定义代理服务器的主机名和端口,auth
- cancelToken——cancelToken定义一个canceltoken用于取消请求
Response
当我们ajax获取数据成功后会返回一个response对象,它包含了以下内容:
{ //`data`istheresponsethatwasprovidedbytheserver data:{}, //`status`istheHTTPstatuscodefromtheserverresponse status:200, //`statusText`istheHTTPstatusmessagefromtheserverresponse statusText:'OK', //`headers`theheadersthattheserverrespondedwith headers:{}, //`config`istheconfigthatwasprovidedto`axios`fortherequest config:{} }
response是通过promise的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); });
相对的,我们有时也会出现ajax报错,此时就会到我们的catch中去捕获异常error对象。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。