上节课我们实现了GitHub搜索案例的静态组件，上节课是实在没有啥可说的，这节课我们来开始新的内容用axios发送请求。

回顾

在开始这节课的内容之前，我们来对上节课的内容来做一个简单地回顾：

  • class要改成className
  • style要改成{{ }}的形式
  • 使用了target属性一定要加rel属性
  • <img>一定要加alt属性

以上便是上节课的主要要点，接下来我们开始这节课的内容

功能需求分析

我们来分析一下我们的这个案例，我们是不是要在Search组件中搜索东西？那么分几步？

  • 输入要搜索的关键词
  • 点击搜索按钮
  • 开始搜索

上面这三步里面最核心的部分是不是在第三步？我们开始搜索是去哪搜索啊？是不是去GitHub搜索？GitHub是我们这个项目自身的东西吗？当然不是了。所以说我要通过网络请求去GitHub去搜索。那么我们是不是就要使用axios来发送请求了？

功能分析

那么怎么实现，首先是不是要通过按钮来触发？那么我们的按钮是不是要绑定onClick事件？然后要获取我们输入的值，这个值怎么获取？我们事件在按钮上，获取的是<input>的值，那是不是要用ref？等我们点击了按钮，获取到值，是不是就要通过axios发送请求？

实现

那么我们已经有了思路，怎么实现呢？我们来看一下代码：

export default class Search extends Component {
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => this.user = c} type="text" 
            placeholder="enter the name you search" />&nbsp;
          <button onClick={this.search}>Search</button>
        </div>
      </section>
    );
  }
  search = () => {
    const { value: keyword } = this.user;
    axios.get(`http://localhost:5000/search/users?q=${keyword}`).then(
      response => { console.log(response.data); },
      error => { console.log(error); }
    );
  };
}

首先我们给按钮绑定了onClick事件。并将search方法作为事件回调。我们是给按钮加的onClick事件，而我们要取<input>的值，那么我们是不是要加ref？我们用的是回调式的ref。

然后来看search方法，这个方法里面的第一行大家记不记得是什么意思？这个是不是解构赋值然后把变量名给修改掉。然后我们就axios发送请求了。但是我们请求的接口这个不是我们自己做的接口服务吗？这个服务里面是什么意思呢？

我们来想一想我们用代码请求GitHub的接口是不是和爬虫差不多？那如果我们突然被ban掉了那不就完犊子了。所以说我们开一个接口服务，里面有两个接口，第一个接口直接请求GitHub，第二个接口直接mock一堆数据返回回来，所以说当我们请求第一个接口发现我们被ban了，那么我们就去请求第二个接口，这样就可以维持我们的数据源了。那么好，我们来看一下效果：

image-20220111170132177

诶，熟悉的跨域问题，那么是不是要来设置代理？

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    createProxyMiddleware("/api1",{
      target: "http://api.github.com",
      changeOrigin: true,
      pathRewrite:{"^/api1":""}
    })
  );
}

我们设置了setupProxy，然后在Search组件的search方法中请求的url是不是也要进行修改？一个是端口号，一个是url前缀。那么我们再来看一下效果：

image-20220111171049781

这一次我们成功拿到了数据。

总结

这节课么样什么重要的内容

  • 解构赋值重命名变量
  • 复习一下ref

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/github_search_axios/