vue使用Axios做ajax请求详解
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios
1.安装axios
$npminstallaxios
或
$bowerinstallaxios
2.在要使用的文件中引入axios
importaxiosfrom'axios'
3.使用axios做请求
可以通过向axios传递相关配置来创建请求,只有url是必需的。如果没有指定method,请求将默认使用get方法。
{ //`url`是用于请求的服务器URL url:'/user', //`method`是创建请求时使用的方法 method:'get',//默认是get //`baseURL`将自动加在`url`前面,除非`url`是一个绝对URL。 //它可以通过设置一个`baseURL`便于为axios实例的方法传递相对URL baseURL:'https://some-domain.com/api/', //`transformRequest`允许在向服务器发送前,修改请求数据 //只能用在'PUT','POST'和'PATCH'这几个请求方法 //后面数组中的函数必须返回一个字符串,或ArrayBuffer,或Stream transformRequest:[function(data){ //对data进行任意转换处理 returndata; }], //`transformResponse`在传递给then/catch前,允许修改响应数据 transformResponse:[function(data){ //对data进行任意转换处理 returndata; }], //`headers`是即将被发送的自定义请求头 headers:{'X-Requested-With':'XMLHttpRequest'}, //`params`是即将与请求一起发送的URL参数 //必须是一个无格式对象(plainobject)或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 //-浏览器专属:FormData,File,Blob //-Node专属:Stream data:{ firstName:'Fred' }, //`timeout`指定请求超时的毫秒数(0表示无超时时间) //如果请求话费了超过`timeout`的时间,请求将被中断 timeout:1000, //`withCredentials`表示跨域请求时是否需要使用凭证 withCredentials:false,//默认的 //`adapter`允许自定义处理请求,以使测试更轻松 //返回一个promise并应用一个有效的响应(查阅[responsedocs](#response-api)). adapter:function(config){ /*...*/ }, //`auth`表示应该使用HTTP基础验证,并提供凭据 //这将设置一个`Authorization`头,覆写掉现有的任意使用`headers`设置的自定义`Authorization`头 auth:{ username:'janedoe', password:'s00pers3cret' }, //`responseType`表示服务器响应的数据类型,可以是'arraybuffer','blob','document','json','text','stream' responseType:'json',//默认的 //`xsrfCookieName`是用作xsrftoken的值的cookie的名称 xsrfCookieName:'XSRF-TOKEN',//default //`xsrfHeaderName`是承载xsrftoken的值的HTTP头的名称 xsrfHeaderName:'X-XSRF-TOKEN',//默认的 //`onUploadProgress`允许为上传处理进度事件 onUploadProgress:function(progressEvent){ //对原生进度事件的处理 }, //`onDownloadProgress`允许为下载处理进度事件 onDownloadProgress:function(progressEvent){ //对原生进度事件的处理 }, //`maxContentLength`定义允许的响应内容的最大尺寸 maxContentLength:2000, //`validateStatus`定义对于给定的HTTP响应状态码是resolve或rejectpromise。如果`validateStatus`返回`true`(或者设置为`null`或`undefined`),promise将被resolve;否则,promise将被rejecte validateStatus:function(status){ returnstatus>=200&&status<300;//默认的 }, //`maxRedirects`定义在node.js中follow的最大重定向数目 //如果设置为0,将不会follow任何重定向 maxRedirects:5,//默认的 //`httpAgent`和`httpsAgent`分别在node.js中用于定义在执行http和https时使用的自定义代理。允许像这样配置选项: //`keepAlive`默认没有启用 httpAgent:newhttp.Agent({keepAlive:true}), httpsAgent:newhttps.Agent({keepAlive:true}), //'proxy'定义代理服务器的主机名称和端口 //`auth`表示HTTP基础验证应当用于连接代理,并提供凭据 //这将会设置一个`Proxy-Authorization`头,覆写掉已有的通过使用`header`设置的自定义`Proxy-Authorization`头。 proxy:{ host:'127.0.0.1', port:9000, auth::{ username:'mikeymike', password:'rapunz3l' } }, //`cancelToken`指定用于取消请求的canceltoken cancelToken:newCancelToken(function(cancel){ }) }
为方便,所有支持的请求方法都提供了别名:
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]])
4.请求的响应结构
{ //`data`由服务器提供的响应 data:{}, //`status`来自服务器响应的HTTP状态码 status:200, //`statusText`来自服务器响应的HTTP状态信息 statusText:'OK', //`headers`服务器响应的头 headers:{}, //`config`是为请求提供的配置信息 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时,响应可以通过error对象可被使用
axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .catch(function(error){ console.log(error); });
5.使用实例
el1:get请求
axios.get('/user',{ params:{ ID:12345 } }) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });
el2:post请求
axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });
el3:执行多个并发请求
functiongetUserAccount(){ returnaxios.get('/user/12345'); } functiongetUserPermissions(){ returnaxios.get('/user/12345/permissions'); } axios.all([getUserAccount(),getUserPermissions()]) .then(axios.spread(function(acct,perms){ //两个请求现在都执行完成 }));
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。