如何在React中与DecisionTree.io API进行交互

时间:2017-07-16 19:09:33

标签: api reactjs

有人可以帮我用GET和PUT示例连接到这个API吗?

我尝试使用React与www.decisiontree.io的API进行互动。他们的api文档是here.我被告知我可以使用在我的帐户设置中生成的令牌与其API进行互动,但我不知道如何使用它。

我这是一个菜鸟,但是花了几个小时通过Chrome检查员网络标签检查端点,并尝试了不同的" get"和"放"通过Postman请求。

我已经完成了几个教程,其中包括使用fetch()和axios进行的一些数据提取,例如this one from teamtreehouse.

我使用我的名字生成了一个令牌 迈克培曼:711KKulyQpcAkVbonKNagAG4LqhUs8tR0GCJj3c30IO77gJWP7d2u0g0T4Ro

从检查员:网络我得到了这些:

x-csrf-token:3b3yPcni9aK9L7FOhtDccCQqkbMK257jHLjiqKF

x-xsrf-token:eyJpdiI6IlNmekxGbGxYcDhya0k1bnMrM2FhdUE9PSIsInZhbHVlIjoiVyt6QjZzdHFKaWJFdXRHSGJcL1Rtdk15NXJrQWZHNDFMSytQeVdKcGNCbHIxc2hwZkV1R3pnVk9jXC9xZnpITVlTcFllOEJFZWQyS0tCajRDeGZuQVU3dz09IiwibWFjIjoiODk5ZWZjMWMwNTc3MmVkNTA5NzZhMmViMmNmMmExNzU2MTJhNzA1OTdkOWY3ZDljYjg5Y2M3ODk0NWM4OWQwZCJ9

以下是我在app.js中的App组件中调整上面的教程代码到此API的尝试:

getGoal = (query) => {
  axios.get('https://https://decisiontree.io/api/decisions/27/name')
    .then(response => {
      this.setState({
      goals: response.data.goals.name
    });
  })
  .catch(error => {
    console.log('Error fetching and parsing data', error);
  });
}

postGoal = (query) => {
  axios.post(`https://https://decisiontree.io/api/decisions/27/add-goal/${query}/`)
    .then(response => {
      this.setState({
      addGoal: response.data.goals.name
    });
  })
  .catch(error => {
    console.log('Error fetching and parsing data', error);
  });
}

  render() { 
    console.log(this.state.goals);
    return (
      <div>
        <div className="main-header">
          <div className="inner">
            <h1 className="main-title">GifSearch</h1>
            <SearchForm onSearch={this.getGoal}/>      
            <AddGoal onSearch={this.postGoal}/>
          </div>   
        </div>    
        <div className="main-content">
          <GifList data={ this.state.goals } />
        </div>
      </div>
    );
  }

非常感谢任何帮助,谢谢!

0 个答案:

没有答案