react入门（八）——axios的使用

什么是axios？

 大家都知道传统的请求方式是XmlHttpRequset，后来随着大家学了JQ之后，发请求方式是$.ajax。再后来ES6出来之后，出现了fetch，fetch是内置在浏览器内核的并且支持promise风格(then(…))的，但是有些老版浏览器不兼容。这个时候axios横空出世。
 axios是一个封装好的库，并且兼容性强且支持promise风格，cdn网址是 https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js

怎么使用axios？

• get请求

axios.get(url,{
		params:{
			...
		}
})

• post请求

axios.post(url,{
	key:value
})

详情请阅读官方文档（都很简单，由例子）https://github.com/axios/axios

举个例子

 在这个例子中，我们通过查询关键字，搜索出github星最多的名字和他的地址。由于涉及到async异步模式，这里我解释一下 await Promise()，就相当于将Promise的返回结果取出来，使回掉函数的promise风格转换为同步编写的风格。
 技术要点就是，在不同的状态加载不同的代码结构，这里我们就需要定义loading状态，当处于loading状态就显示loading等，相信不用我多说。

<script type="text/babel">
    /**
     * 需求：
     * 1. 根据指定的关键字在github上搜索匹配的最受关注的库
     * 2. 显示库名，点击链接查看库，
     * 3. 测试接口：https://api.github.com/search/repositories?q=r&sort=star
     */

    class MostStarRepo extends React.Component {
        state = {
            repoName: '',
            repoUrl: '',
            search: '',
            loading: false
        };


        search = async () => {
            this.setState({
                loading: true
            });
            if (this.state.search.trim() === '') {
                return;
            }
            const url = `https://api.github.com/search/repositories?q=${this.state.search}&sort=star`;
            //使用axios发请求
            let res = await axios.get(url);
            if (res.status === 200) {
                const {items} = res.data;
                const {html_url, name} = items[0];
                this.setState({
                    repoName: name,
                    repoUrl: html_url,
                    search: '',
                    loading: false
                });
            }
        };

        handleChange = (e) => {
            const search = e.target.value;
            this.setState({
                search
            })
        };

        render() {
            const {repoName, repoUrl, loading} = this.state;
            if (repoName) {
                return <h2>Most star Repo is <a href={repoUrl}>{repoName}</a></h2>
            } else {
                if (loading) {
                    return <h2>Loading......</h2>
                }
                return (
                    <div>
                        <input type="text" value={this.state.search} onChange={this.handleChange}/>
                        <button onClick={this.search}>搜索</button>
                    </div>
                )
            }
        }
    }

    ReactDOM.render(<MostStarRepo/>, document.getElementById('test'))
</script>

这里涉及到ES6相关的很多语法，不懂ES6的可以去看看阮一峰的书——《ES6标准入门》，http://es6.ruanyifeng.com/
好了，今天的的课程就是这些，希望通过上面的例子你们能够学会使用axios请求数据