Javascript 如何处理请求并避免代码重复？

我想做的是避免代码重复管理来自已发出请求的响应，并在整个useState中为组件提供输出

在这种情况下，一旦加载页面，就会触发useEffect。它使用setLoadedPlaces将数据设置为searchedPlace，使用setMarker将数据设置为markersMap发出请求并处理响应

如果用户提出新的请求，数据的处理方式与useEffect函数相同，唯一的区别是请求是通过附加正文的POST发出的

我以为只提出一个要求就足够了，但怎么办呢

在这两个函数中都发生了很多事情，我试图推断结果，但返回了一个承诺，它必须用

来处理。然后（（）=>{}）

因为它是异步的，但是如何处理呢

  const [searchedPlaces, setLoadedPlaces] = useState();
  const [MarkersMap, setMarkersMap] = useState();

useffect（）

receivedInputs（）由按钮触发

const receivedInputs = async val => {
    console.log(val.address);
    try {
        let responseData = await fetch("http://localhost:5000/api/search?", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                address: val.address.value.toLowerCase(),
                price: val.price.value.toLowerCase(),
                leaseTime: val.leaseTime.value.toLowerCase()
            })
        });

        let fetchPlaces = await responseData.json();

        //here I assign the data to setsetLoadedPlaces

        setLoadedPlaces(fetchPlaces.elements);

        //here I extrapolate lng and lat and assign to setMarkersMap

        let locations = [];
        fetchPlaces.elements.map(element => {
            element.location.lat = parseFloat(element.location.lat);
            element.location.lng = parseFloat(element.location.lng);
            locations.push(element.location);
            return locations;
        });

        setMarkersMap(locations);

    } catch (err) {
        console.log(err);
    }
};

---

看起来您应该将此部件提升到其自身功能中：

const handleResponseData = responseData => {
    setLoadedPlaces(responseData.elements);
    const locations = responseData.elements.map(element => {
          element.location.lat = parseFloat(element.location.lat);
          element.location.lng = parseFloat(element.location.lng);
          return element;
    });
   setMarkersMap(locations);
}  

那就叫它：

 useEffect(() => {
    const fetchPlaces = async () => {
      try {
        const responseData = await sendRequest(
          "http://localhost:5000/api/search"
        );

       handleResponseData(responseData)
      } catch (err) {}
    };
    fetchPlaces();
  }, [sendRequest]);


const SearchSubmitHandler = async event => {
    event.preventDefault();
    try {
      let responseData = await fetch("http://localhost:5000/api/search?", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          address: formState.inputs.address.value.toLowerCase(),
          price: formState.inputs.price.value.toLowerCase(),
          leaseTime: formState.inputs.leaseTime.value.toLowerCase()
        })
      });

      handleResponseData(responseData.json())

    } catch (err) {
      console.log(err);
    }
  };

---

看起来您应该将此部件提升到其自身功能中：

const handleResponseData = responseData => {
    setLoadedPlaces(responseData.elements);
    const locations = responseData.elements.map(element => {
          element.location.lat = parseFloat(element.location.lat);
          element.location.lng = parseFloat(element.location.lng);
          return element;
    });
   setMarkersMap(locations);
}  

那就叫它：

 useEffect(() => {
    const fetchPlaces = async () => {
      try {
        const responseData = await sendRequest(
          "http://localhost:5000/api/search"
        );

       handleResponseData(responseData)
      } catch (err) {}
    };
    fetchPlaces();
  }, [sendRequest]);


const SearchSubmitHandler = async event => {
    event.preventDefault();
    try {
      let responseData = await fetch("http://localhost:5000/api/search?", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          address: formState.inputs.address.value.toLowerCase(),
          price: formState.inputs.price.value.toLowerCase(),
          leaseTime: formState.inputs.leaseTime.value.toLowerCase()
        })
      });

      handleResponseData(responseData.json())

    } catch (err) {
      console.log(err);
    }
  };

---

创建一个函数，在useffect钩子和回调中获取并调用该函数

const组件=（）=>{
常量fetch=aynsc（）=>{/…}
useEffect（（）=>{fetch（）}，[]））
searchSubmitHandler=（）=>{fetch（）}
返回{}
}

创建一个函数，在useffect钩子和回调中获取并调用该函数

const组件=（）=>{
常量fetch=aynsc（）=>{/…}
useEffect（（）=>{fetch（）}，[]））
searchSubmitHandler=（）=>{fetch（）}
返回{}
}

好的，我以这种方式管理解决方案，我考虑了答案并添加了一个then（）方法，因为它返回了一个承诺。如果请求成功，则将“response”作为参数

  //                              ***      useEffect      ***

useEffect(() => {
    const fetchPlaces = async () => {
      try {
        const responseData = await sendRequest(
          "http://localhost:5000/api/search"
        );

        return responseData;
      } catch (err) {}
    };
    fetchPlaces().then(response => {
      handleResponseData(response);
    });
  }, [sendRequest]);

  //                              ***      Request      ***

  const receivedInputs = async val => {
    try {
      let responseData = await fetch("http://localhost:5000/api/search?", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          address: val.address.value.toLowerCase(),
          price: val.price.value.toLowerCase(),
          leaseTime: val.leaseTime.value.toLowerCase()
        })
      });
      return responseData.json().then(response => {
        handleResponseData(response);
      });
    } catch (err) {
      console.log(err);
    }
  };

---

好的，我以这种方式管理解决方案，我考虑了答案并添加了一个then（）方法，因为它返回一个承诺。如果请求成功，则将“response”作为参数

  //                              ***      useEffect      ***

useEffect(() => {
    const fetchPlaces = async () => {
      try {
        const responseData = await sendRequest(
          "http://localhost:5000/api/search"
        );

        return responseData;
      } catch (err) {}
    };
    fetchPlaces().then(response => {
      handleResponseData(response);
    });
  }, [sendRequest]);

  //                              ***      Request      ***

  const receivedInputs = async val => {
    try {
      let responseData = await fetch("http://localhost:5000/api/search?", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          address: val.address.value.toLowerCase(),
          price: val.price.value.toLowerCase(),
          leaseTime: val.leaseTime.value.toLowerCase()
        })
      });
      return responseData.json().then(response => {
        handleResponseData(response);
      });
    } catch (err) {
      console.log(err);
    }
  };

---

感谢您的回答，但实际上问题中指定的第二个函数是错误的。我现在更新了，谢谢你的回复，但实际上问题中指定的第二个函数是错误的。我现在更新了