简单易懂的React魔法(15):使用SuperAgent从gi

我使用SuperAgent的原因之一是因为它使用起来非常简单，开发者的代码容易使用和理解是非常好的。一开始，首先引入SuperAgent：
src/pages/Detail.js

import ajax from 'superagent';

注意：你可以给SpuerAgent取任意的名字，而它的示例通常给自己起名为request而不是ajax。我发现ajax比较好记，所以用这个。

现在我们希望在页面加载时调用这个ajax，而react有个特殊的方法在页面加载时被调用：
componentWillMount(). 显而易见从名字推测,这个方法在第一次渲染之前会被调用.使得它成为我们调用ajax请求的好地方。

向你的组件里添加如下方法:

src/pages/Detail.js

componentWillMount() {
    ajax.get('https://api.github.com/repos/facebook/react/commits')
        .end((error, response) => {
            if (!error && response) {
                this.setState({ commits: response.body });
            } else {
                console.log('There was an error fetching from GitHub', error);
            }
        }
    );
}

我们来分析一下它到底做了什么…

1. componentWillMount()是这个方法的名字，并且不能修改，因为react需要调用它。
2. ajax.get(‘https://api.github.com/repos/facebook/react/commits’)告诉superAgent从github获取react项目的提交列表。我选择github是因为它们有一个简单的API并且不需要身份验证。
3. .end((error, response) ⇒ {告诉superAgent在请求完成时该做什么，它应该运行下面的匿名函数。
4. if (!error && response) {一个条件语句，只有当没有错误且服务器有响应时执行以下操作。
5. this.setState({ commits: response.body })使用ajax获得的响应body部分更新我们组件的状态。
6. } else { 另一部分的条件语句，在发生错误时要执行的语句。
7. console.log(…)把错误打印出来。
8. 很多大括号。

为了理解这些代码，还需要知道两件事情。首先：所有superAgent调用都是异步的，这意味着当superAgent等待GitHub响应时，客户端不会等待。其他的代码会继续执行。当获取GitHub响应之后才会调用匿名函数。

第二件要知道的事情是，response.body是superAgent的一个特性。它检测到GitHub响应内容类型为‘application/json’，并自动将响应转换为JavaScript对象。这就是为什么我们可以将response.body直接发送到我们的状态，因为已经处理为对象了。

当你保存页面，你会在浏览器里看到很多行“Some commit data here “。每一行都是facebook在GitHub的commit数据。不过我们还没有处理这些commit，我们的JSX是静态的。

15-1.jpg

我们的app现在显示了“Some commit data here“ 30次，只是因为我们还没有告诉React该显示什么数据。