我使用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);
}
}
);
}
我们来分析一下它到底做了什么…
-
componentWillMount()是这个方法的名字，并且不能修改，因为react需要调用它。 -
ajax.get(‘https://api.github.com/repos/facebook/react/commits’)告诉superAgent从github获取react项目的提交列表。我选择github是因为它们有一个简单的API并且不需要身份验证。 -
.end((error, response) ⇒ {告诉superAgent在请求完成时该做什么，它应该运行下面的匿名函数。 -
if (!error && response) {一个条件语句，只有当没有错误且服务器有响应时执行以下操作。 -
this.setState({ commits: response.body })使用ajax获得的响应body部分更新我们组件的状态。 -
} else {另一部分的条件语句，在发生错误时要执行的语句。 -
console.log(…)把错误打印出来。 - 很多大括号。
为了理解这些代码，还需要知道两件事情。首先：所有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该显示什么数据。
