这是一款基于HTML5 SVG的页面过渡变形切换效果。该页面切换效果在两个页面进行切换时，通过SVG路径变形，制作出炫酷的页面过渡效果，可用于产品介绍页。
安装
使用npm：
$ npm i axios
或者使用cdn链接：
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
使用axios发送请求
发起一个get请求：
axios.get('/user?ID=1234')
.then(function(respone){
console.log(response);
})
.catch(function(error){
console.log(error);
});
也可以这样发送get请求：
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
发起一个POST请求
axios.post('/user',{
firstName:'friend',
lastName:'Flintstone'})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
axios API
我们还可以对axios进行一些设置来生成请求，也就是通过给 axios传递对应的参数来定制请求。
axios({
method: 'post', //请求方法
url: '/user/12345', //请求服务端地址
data: { //请求参数
firstName: 'Fred',
lastName: 'Flintstone'
}
});
请求配置
以下列出了一些请求时的设置选项。只有url是必须的，如果没有指明method的话，默认的请求方法是GET。
配置 说明
url:'/user' 请求的服务器端地址 method:'get' 发起请求时的请求方法 baseURL:'http://example.com/api/' 如果`url`不是绝对地址，那么将会加在其前面
transformRequest:[function(data){ //依自己的需求对请求数据进行处理 return data; }]
允许请求的数据在传到服务器之前进行转化。
transformResponse:[function(data){//依需要对数据进行处理 return data; }]
允许返回的数据传入then/catch之前进行处理 params:{ID:12345} 请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
paramsSerializer: function(params){ return Qs.stringify(params,{arrayFormat:'brackets'}) }
是一个可选的函数，是用来序列化参数 data:{firstName:'fred'} 请求提需要设置的数据 timeout:1000 如果请求响应的时间超过这个设定时间，请求将会中止 withCredentials:false //默认值表明是否跨网站访问协议，应该使用证书 表明是否跨网站访问协议，应该使用证书 responsetype:'json' 服务器返回的数据类型，这些类型的设置应该是'arraybuffer','blob','document','json','text',stream' xrsfHeadername:'X-XSRF-TOKEN'，//默认值 http头（header）的名字，并且该头携带xsrf的值
onUploadProgress: function(progressEvent){ //本地过程事件发生时想做的事 }
允许处理上传过程的事件
onDownloadProgress: function(progressEvent){ //下载过程中想做的事 }
允许处理下载过程的事件 maxContentLength: 2000 定义http返回内容的最大容量
validateStatus: function(status){ return status >= 200 && stauts
http返回状态码，如果`validateStatus`返回true（或者设置成null/undefined），promise将会接受；其他的promise将会拒绝。
cancelToken: new CancelToken(function(cancel){ })
能够用来取消请求
返回响应信息
一个请求的返回包含以下信息
{
//`data`是服务器的提供的回复（相对于请求）
data{},
//`status`是服务器返回的http状态码
status:200,
//`statusText`是服务器返回的http状态信息
statusText: 'ok',
//`headers`是服务器返回中携带的headers
headers:{},
//`config`是对axios进行的设置，目的是为了请求（request）
config:{}
}
全局默认设置
我们可以设置一个全局默认的设置，这设置将在所有的请求中有效。
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';
拦截器
我们知道jQuery的ajax方法有beforeSend()函数回调，而axios可以在请求或者返回被then或者catch处理之前对他们进行拦截。例如我们发送ajax请求的时候需要有一个loading动画，而在请求回来之后需要把loading动画关掉，就可以使用这个拦截器来实现。
//添加一个请求拦截器
axios.interceptors.request.use(function(config){ //在请求发送之前做一些事，比如说 设置loading动画显示
return config;
},function(error){ //当出现请求错误是做一些事
return Promise.reject(error);
});
//添加一个返回拦截器
axios.interceptors.response.use(function(response){
//对返回的数据进行一些处理，比如说把loading动画关掉
return response;
},function(error){
//对返回的错误进行一些处理
return Promise.reject(error);
});
错误处理
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.headers);
}else{ //一些错误是在设置请求时触发的
console.log('Error',error.message);
}
console.log(error.config);
});
axios项目github地址： https://github.com/mzabriskie/axios
以上就上有关axios-基于Promise的HTTP请求客户端的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。