简单易懂的React魔法(19):重构我们Ajax代码：不要复制

我们的代码能用，确实能用，而且很容易阅读，因为我们只是用最基本的语法简单的重复了三次。但是我们的代码很难维护。

因为你要读很多代码才能知道这些东西在做什么。因为可能他们重复的地方很多，但总有不一样的地方，如果这部分出了问题很难发现。

我们可以通过重构代码来解决这些问题。 重构的目标是更快，更容易理解，更简单，复用性更高。

componentWillMount()是个简单的修改目标。他发起3个大的ajax请求，每个调用只有三行：

• ajax.get('https://api.github.com/repos/facebook/react/commits')
• this.setState({ commits: response.body })
• console.log('There was an error fetching commits from GitHub', error);

更重要的是，这三块的区别只有一个单词，然后你要重复三次：commits, commits, commits; forks, forks, forks; pulls, pulls, pulls.这部分很容易重构：我们可以创建一个接受字符串作为其参数的方法，比如接受“commits”,然后把这个函数在componentWillMount()中调用三次。

为了让他工作，我们需要新的ES6语法：字符串中使用参数。我先放出代码，然后再进行解释。将此方法添加到Detail组件：

src/pages/Detail.js

fetchFeed(type) {
    ajax.get(`https://api.github.com/repos/facebook/react/${type}`)
        .end((error, response) => {
            if (!error && response) {
                this.setState({ [type]: response.body });
            } else {
                console.log(`Error fetching ${type}`, error);
            }
        }
    );
}

唔，这是一个名为fetchFeed()的方法， 接受一个type的参数。将它放在ajax.get()的URL中，我用了ES6语法，直接在字符串中写参数:这个URL被包含在一个反引号中(按shift+~（波浪）就能打出来)而不是单引号，这样就能在字符串内引用变量和其他表达式。当编译器遇到${type}时，会替换为type的值。在console.log语句中也用了相同的技术。
第二个ES6特性是下面的：

this.setState({ [type]: response.body });

他的意思是) “把response.body里的值用type这个名称存在state里”。这个type可以使任意值。

有了新的fetchFeed()方法作为代替，我们就可以将componentWillMount()里Ajax部分删掉，然后修改成这样：
src/pages/Detail.js

componentWillMount() {
    this.fetchFeed('commits');
    this.fetchFeed('forks');
    this.fetchFeed('pulls');
}