1、安装axios
npm安装：npm install axios --saveyarn安装：yarn add axiosVue安装：vue add axios
2、发送请求
有三种发送请求的方式：axios.get()、axios.post()、axios.all() axios.get('/user?ID=12345') //get请求 .then(function(res){ console.log(res.data); //返回获取的数据 console.log(res.status); //返回状态码：200、404 console.log(res.statusText); //返回状态文本：OK console.log(res.headers); //返回响应头信息 console.log(res.config); //返回请求的配置信息 }).catch(function(err){ console.log(err) }) axios.post('/user',{ //post请求 name:'cai', pwd:'111' }) .then(function(response){ //请求成功 }) .then(function(err){ //请求失败 }) function getUser(){ return axios.get('/user/1234'); } function getInfo(){ return axios.get('/user/1234/info') } axios.all([getUser(),getInfo()]) //并发请求 .then(axios.spread(function(user,info){ //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果 })) 并发的API为: axios.all(iterable); axios.spread(callback); 请求方式的别名: 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]]) 3、axios全局默认配置
axios.defaults.baseURL='http://api.exmple.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';axios.defaults.withCredentials = true; // axios 默认不发送cookie，需要全局设置true发送cookieaxios.defaults.baseURL = $core.use('http'); //确认协议和地址 4、自定义axios的配置
var instance=axios.create({ url:'/user', //如果不是绝对地址，baseURL会自动加到url前面 methods:'post', //默认为 get baseURL:'https://www.xxx.com/api/', params:{ id:123 //参数 }, data:{ name:'cai', //需要被发送的数据仅适用于：put、post、patch age:18 //当没有设置`transformRequest`选项时dada必须是以下几种类型之一 //string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams //仅仅浏览器：FormData/File/Bold //仅node:Stream } paramsSerializer: function(params){ //序列化参数 （可选） return Qs.stringify(params,{arrayFormat:'brackets'}) }, transformRequest:[function(data){ //请求发送到服务器之前，可在这对发送的数据做些改动，仅限于put、post、patch方法 return data; //数组里面的最后一个函数必须返回一个字符串、-一个`ArrayBuffer`或者`Stream` }], transformResponse:[function(data){ //在数据传送到`then/catch`方法之前对得到的数据进行改动 return data; }], timeout:1000, //请求超时最长1000毫秒 headers: {'X-Requested-With':'XMLHttpRequest'}, withCredentials：true, //是否跨域请求，默认为false(跨域需要用到证书) adapter：function(){ //返回一个promise,并提供验证返回 //可自定义处理请求，用于测试 }, auth:{ //开启http用户认证，重新设置Authorization头信息 username:'cai', password:'123456' }, responseType:'json', //可选项是arraybuffer,blob,document,json,text,stream xsrfCookieName: 'XSRF-TOKEN',//用作 xsrf token 值的 cookie 名称 xsrfHeaderName:'X-XSRF-TOKEN',//带有 xsrf token 值 http head 名称 onUploadProgress:function(progressEvent){ //上传进度事件，允许在上传过程中的做一些操作 }, onDownloadProgress:function(progressEvent){ //下载进度事件，允许在下载过程中的做一些操作 }, maxContentLength:2000, //相应内容最大值 validateStatus:function(status){ //定义了是否根据http相应状态码，来resolve或者reject promise return status >= 200 && status <300;//default }, maxRedirects: 5, //在nodejs中重定向的最大数量 httpAgent: new http.Agent({keeyAlive:true}), //定义了当发送http请求要用到的自定义代理(默认：false) httpsAgent: new https.Agent({keeyAlive:true}), //定义了当发送https请求要用到的自定义代理（默认：false） proxy: { host:'127.0.0.1', //proxy定义了主机名字和端口号 port: 9000, auth: { username:'Cai', password:'123456' } }, cancelToken: new cancelToken(function(cancel){ //cancelToken定义了一个用于取消请求的cancel token })})//当实例创建时候修改配置instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;//使用自定义的axios实例instance.get('/longRequest',{ //这里的配置优先级高于上面的 timeout: 5000 //5秒后请求}); 5、拦截器
//你可以在请求、响应在到达then/catch之前拦截他们//添加一个请求拦截器axios.interceptors.request.use(function(config){ //在请求发出之前进行一些操作，比如：显示loading图标 return config;},function(err){ //Do something with request error return Promise.reject(error);});//添加一个响应拦截器axios.interceptors.response.use(function(res){ //在这里对返回的数据进行处理，比如隐藏loading图标 return res;},function(err){ //Do something with response error return Promise.reject(error);})//取消拦截器var myInterceptor = axios.interceptor.request.use(function(){/*....*/});axios.interceptors.request.eject(myInterceptor);//给自定义的 axios 实例添加拦截器var instance = axios.create();instance.interceptors.request.use(function(){}) 6、错误处理
axios.get('/user/12345') .catch(function(error){ if(error.response){ //请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内 console.log(error.response.data); console.log(error.response.status); console.log(error.response.header); }else { //一些错误是在设置请求的时候触发 console.log('Error',error.message); } console.log(error.config); }); 7、取消请求
var CancelToken = axios.CancelToken; //通过一个cancel token来取消一个请求var source = CancelToken.source(); //通过CancelToken.source工厂函数来创建一个cancel tokenaxios.get('/user/12345',{ cancelToken: source.token}).catch(function(thrown){ if(axios.isCancel(thrown)){ console.log('取消请求',thrown.message); }else { //handle error }});//取消请求（信息的参数可以设置的）source.cance("操作被用户取消");//换种写法var cancelToken = axios.CancelToken;var cance;axios.get('/user/12345',{ cancelToken: new CancelToken(function(c){ //这个executor函数接受一个cancel function作为参数 cancel = c; })})//取消请求cancel(); 8、get/delete 请求，也称作 query 请求
axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以 params: { id: 12345， name: user }}).then(function (res) { console.log(res);}).catch(function (err) { console.log(err);}); 9、post/put/patch 请求（三种传参方式）
1、传参格式为 formData var formData=new new FormData(); formData.append('user','cai'); formData.append('pwd',123456); axios.post('notice',formData) .then((res)=>{return res}) .catch((err)=>{return err}) 2、传参格式为 query 形式 第一种情况：使用 $qs.stringify import Qs from 'qs' //引入方式 Vue.prototype.$qs = Qs //全局加载 this.$qs.stringify(data); //使用方式 this.$qs.parse(data); //使用方式 var readyData=this.$qs.stringify({ id:1234, name:user }); axios.post("/notice",readyData) .then((res) => {return res}) .catch((err) => {return err}) 第二种情况：使用 URLSearchParams（浏览器不支持，需要polyfill） var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params); 3、 传参格式为 raw (JSON 格式) 第一种情况： axios 将 JavaScript 对象序列化为 JSON var readyData={ id:1234, name:user }; axios.post("/notice",readyData) .then((res) => {return res}) .catch((err) => {return err}) 第二种情况： var readyData=JSON.stringify({ id:1234, name:user }); axios.post("/notice",readyData) .then((res) => {return res}) .catch((err) => {return err})