如何从 React JS 中的 yelp api 获取数据？答案

【问题标题】：How can I fetch data from yelp api in React JS?如何从 React JS 中的 yelp api 获取数据？
【发布时间】：2020-10-10 04:10:09
【问题描述】：

我想在 react JS 中从 Yelp API 获取数据。我可以使用邮递员获取数据，但我无法使用我的代码获取任何数据。这是代码。

 componentDidMount = () => {
const API_BASE_URL =
  'https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/business/search?term=restaurant&location=usa';
const BEARER_TOKEN =
  'mybearertoken';

fetch(`${API_BASE_URL}`, {
  headers: {
    Authorization: `${BEARER_TOKEN}`,
    Origin: 'localhost:3000',
    withCredentials: true,
  },
})
  .then(res => res.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      items: json,
    });
  });

};

【问题讨论】：

标签： reactjs api yelp yelp-fusion-api

【解决方案1】：

试试

headers: {
      'Content-Type': 'application/json'          
    }

【讨论】：

它不起作用。我可以使用邮递员使用此参数从 Yelp API 获取数据，但我不能在我的应用程序中执行相同操作。

【解决方案2】：

我 npm 安装并使用了 Axios，它工作正常。

const fetchtems = async () => {
const data = await axios
  .get(
    `${'https://cors-anywhere.herokuapp.com/'}https://api.yelp.com/v3/businesses/search?location=usa`,
    {
      headers: {
        Authorization: `Bearer ${BEARER_TOKEN}`,
      },
      params: {
        term: 'restaurants',
      },
    },
  )

  .then(json => {
    setItems({ items: json.data.businesses });
  })
  .catch(err => {
    console.log(err);
  });

};

【讨论】：