如何使用 axios 在反应中发出请求

Question

我大约在 3 或 4 个月前开始学习 React。 最初是通过 Codecademy 的课程，后来又通过其他课程和教程进行了很多改进，其中主要使用 Axios 来获取请求，而没有真正解释 Axios。 我决定将 go 带回 Codecademy 的“贪婪”yelp 克隆项目，该项目的说明适用于 class 组件，并认为完成同一个项目但使用功能组件将是一个很好的挑战。 在连接 Yelp api 之前，一切都很完美，鉴于我对 axios 和一般请求缺乏了解，我无法确定我做错了什么。 我几乎可以肯定我在 Yelp.js 中做错了什么，但我不能确定，因为我收到一个类型错误，即“fetchRestaurants”不是 App.js 中的 function，无论我采用哪种方式叫它。 我认为它涉及 Promises，我尝试在 searchYelp 上使用 async/await，但这部分对我来说是全新的。

这是 Yelp.js：

import axios from "axios";

const KEY =   "RwNYGeKdhbfM1bo6O8X04nLNR7sKjIXyAQ-Fo-nz-UdNHtSKDAmHZCc9MSiMAVmNhwKrfcukZ0qlHF1TdVIRSrgak3-oHVNmGD5JPR4ysxhfGd1hgOllt83H1i44X3Yx";

const fetchRestaurants = (term, location, sortBy) => {   const corsApiUrl = "https://cors-anywhere.herokuapp.com/";   return () => {
    axios
      .get(
        `${corsApiUrl}https://api.yelp.com/v3/businesses/search?categories=restaurants&location=${location}&term=${term}&sort_by=${sortBy}`,
        {
          headers: {
            Authorization: `Bearer ${KEY}`,
          },
        }
      )
      .then(res => res.data.businesses)
      .catch(error => console.log(error.response));   }; };

export default fetchRestaurants;

这是 App.js：

import React, { useState } from "react";
import BusinessList from "./BusinessList";
import SearchBar from "./SearchBar";
import Yelp from "./Yelp";
import "./App.css";

const App = props => {
  const [businesses, setBusinesses] = useState([]);

  const searchYelp = (term, location, sortBy) => {
    const businessList = Yelp.fetchRestaurants(term, location, sortBy);
    setBusinesses(businessList);
  };

  return (
    <div className="App">
      <h1>Ravenous</h1>
      <SearchBar searchYelp={searchYelp} />
      <BusinessList businesses={businesses} />
    </div>
  );
};

export default App;

如果这应该发布在其他地方，请提前道歉。 菜鸟问题。

Answer 1

您没有将响应保存在任何地方。 .then(res => res.data.businesses)这里的响应应该保存在某个地方，可以是变量或 state。 您对 axios 请求的 function 响应也不会返回任何内容。

Answer 2

axios 本身不是问题，而是如何在 React 应用程序中使用它。

1. Yelp.js：fetchRestaurants() 应该返回一个正确的值（在这种情况下是承诺）：

const fetchRestaurants = (term, location, sortBy) => {   
  return axios
      .get(url, options)
      .then(res => res.data.businesses)
      .catch(...)
}

2. App.js：所有 API 调用都应使用useEffect hook完成：

useEffect(() => {
   Yelp.fetchRestaurants(term, location, sortBy)
     .then(businessList => setBusinesses(businessList));
}, [term, location, sortBy]);