1.介绍
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中
2.安装依赖
npm install axios --save
3.网络请求方法
(1)get
(2)post
import React from "react";
import axios from 'axios'
import qs from "querystring"
export default class Http extends React.Component {
componentDidMount() {
/**
* post请求中,参数格式为 :user_id=iwen@qq.com&password=iwen123
* 将对象形式转成上述参数格式:使用stringify对对象进行序列化
* */
axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
user_id: 'iwen@qq.com',
password: 'iwen123',
verification_code: 'crfvw'
}))
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error);
})
}
render() {
return (
<div>
网络请求
</div>
)
}
}
结果展示:
(3) all执行多个并发请求
import React from "react";
import axios from 'axios'
import qs from "querystring"
export default class AxiosComponent extends React.Component {
componentDidMount() {
const getBanner = () => {
return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
}
const getChengpin = () => {
return axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinInfo.php")
}
axios.all([getBanner(), getChengpin()]).then(axios.spread((banner, chengpin) => {
console.log(banner.data);
console.log(chengpin.data);
}))
}
render() {
return (
<div>
Axios
</div>
)
}
}
4.封装网络请求