axios-基于Promise的HTTP请求客户端

这是一款基于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。

transformRequest:[function(data){  //依自己的需求对请求数据进行处理  
return data; 
}]

transformResponse:[function(data){//依需要对数据进行处理        
return data;    
}]

paramsSerializer: function(params){ 
return Qs.stringify(params,{arrayFormat:'brackets'})    
}

onUploadProgress: function(progressEvent){ //本地过程事件发生时想做的事
}

onDownloadProgress: function(progressEvent){ 
 //下载过程中想做的事   
}

validateStatus: function(status){ 
return status >= 200 && stauts < 300;//默认   
 }

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);
});

给请求添加Header信息

有时我们要给请求中添加header信息提交给后端处理，经常会在一些接口请求中用到。

this.axios.post('/api/auth/login', obj, {
        headers: {
            'X-token': 'abcd12345sssq4'
        }
    }).then(function(response) {
        const data = response.data;
    }, function(response) {});

axios项目github地址： https://github.com/mzabriskie/axios