axios的用法总结

Our-task介绍

本篇博客是我的github上项目our-task：一个完整的清单管理系统的配套教程文档，大家感兴趣的话，可以去看看。

安装

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

在our-task中，我是使用npm来进行安装的。

npm install axios

特性

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

举例说明

执行GET请求

axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(error){
    console.log(error)
  });

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

执行多个并发请求

function getUserAccount(){
    return axios.get('/user/12345')
}
function getUserPermissions(){
    return axios.get('/user/12345/xxx')
}
​
axios.all([getUserAccount(), getUserPermissions])
.then(axios.spread(fcuntion(acct, perms){
    //两个请求现在都执行完成
}))；

axios API

可以通过向axios传递相关配置来创建请求

axios(config)

//发送POST请求
axios({
    method:'post', 
    url:'/user/12345',
    data:{
        firstName:'xxx'
    }
});

//获取远端图片
axios({
    method:'get', 
    url:'xxx', 
    responseType:'stream'
})
.then(function(response)){
    response.data.pipe(fs.createWriteStream('xx.jpg'))
};

请求方法的别名

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)

axios.get(url[, config])

axios.post(url[,data[,config]])

并发

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

请求配置

这些是创建请求时可以用的配置选项。只有url是必须的，如果没有指定method，请求将默认使用get方法

//url:请求的服务器URL
url:'/user'
//method
method:'get'
transformRequest:[function(data, headers){
    //对data进行转换处理
    return data;
}]
//headers:是即将发送的自定义请求头
headers:{'X-Requested-With':"xxx"}
//params:是即将与请求一起发送的URL参数
params:{
    ID:12345
}
//timeout:请求超时的毫秒数，0表示无超时时间。
//如果超过了超时时间，请求将被终止。
timeout:10000
//auth:表示应该使用HTTP基础验证，并提供凭据。这将设置一个Authorization头，
//覆写掉现有的headers
//等等

响应结构

某个请求的相应包含以下信息

data:由服务器提供的响应
status:来自服务器的HTTP状态码
statusText:来自服务器响应的HTTP状态信息
headers:{}:服务器响应的头
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';

拦截器

在请求或相应被then或catch处理前拦截它们。