时间戳

首页 > 解决方案 > 如何处理请求并避免代码重复？

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

问题描述

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

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

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

我认为只提出一个请求就足够了，但是如何呢？

这两个函数都发生了很多事情，我试图推断结果但返回了一个 Promise，.then(() => {})因为它是异步的，所以必须处理它，但是如何处理呢？

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

使用效果（）

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

            //here I assign the data to setsetLoadedPlaces

            setLoadedPlaces(responseData.elements);

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

            let locations = [];
            responseData.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) {}
        };
        fetchPlaces();
      }, [sendRequest]);

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);
    }
};

标签： javascriptreactjsasynchronousrequest

解决方案

看起来你应该把这部分提升到它自己的功能中：

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);
    }
  };

推荐阅读