# 一、axios 简介
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，它本身具有以下特征：
- 从浏览器中创建
XMLHttpRequest - 从
node.js发出http请求 - 支持
Promise API - 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换
JSON数据 - 客户端支持防止
CSRF/XSRF
# 二、axios基础
axios.request（config）axios.get（url [，config]）axios.delete（url [，config]）axios.head（url [，config]）axios.options（url [，config]）axios.post（url [，data [，config]]）axios.put（url [，data [，config]]）axios.patch（url [，data [，config]]）
# 三、执行 GET 请求
// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (res) {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 对象传递参数
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
@前端进阶之旅: 代码已经复制到剪贴板
# 四、执行 POST 请求
axios.post('/user', {
userId:"123"
},{
headers:{
token:"abc"
}
})
.then(function (res) {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
@前端进阶之旅: 代码已经复制到剪贴板
# 五、通过配置方式发送请求
get请求是发送参数，在params中定义。而POST请求是发送request body,需要在data中定义
// get 在params中定义
axios({
url:"pakage.json",
method:"get",
params:{
userId:"123"
},
headers:{
token:"http-test"
}
}).then(res=>{
console.log(res.data);
})
// post 在data中定义
axios({
url:"pakage.json",
method:"post",
data:{
userId:"123"
},
headers:{
token:"http-test"
}
}).then(res=>{
console.log(res.data);
})
@前端进阶之旅: 代码已经复制到剪贴板
# 六、执行多个并发请求
function getUserAcount(){
// 返回一个promise对象
return axios.get("/user/1234");
}
function getUserPermissions(){
// 返回一个promise对象
return axios.get("/user/1234/getUserPermissions");
}
//一次性返回两个接口
axios.all([getUserAccount(),getUserPerssions()]).then(axios.spread((acct, perms) => {
// spread展开两个返回的结果
//两个请求现已完成
}))
@前端进阶之旅: 代码已经复制到剪贴板
# 七、在react的应用
组件首次“挂载”（
mount）时，该方法就会执行。在组件生命周期中，该方法只会执行一次
componentDidMount() {
axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ posts });
});
}
@前端进阶之旅: 代码已经复制到剪贴板
