getting the value of fetch inside useEffect without disturbing the events sequence-CodePudding

I have the following useEffect at start it sends a request to the sever then modify the state accordingly in this current implementation I want to manipulate the shared variable according do data yet I don't want to put the rest of the logic inside the response block since the data show instantly and it brake my spinner logic any idea how to event this the right way , currently shared is undefined even if I am putting await before fetching ?

useEffect(() => {
    const getData = async () => {
      let shared = '';
      await fetch('/encrypt', {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({ clientId: params[1] }),
      })
        .then((res) => {
          res.json().then((data) => {
          
          shared = data.data.split('_Shared_')[1];
          });
        })
        .catch((err) => {
          dispatch(SetSnackBarMsg({ bool: true, msg: 'Cannot get data.' }));
        });

      setLoading(true);
      dispatch(SetBackDrop(true));
      const docRef = doc(db, 'data-shared', shared);
      getDoc(docRef).then((docSnap) => {
        const data = docSnap.data();
        setLoaded(data?.img);
      });
      dispatch(SetBackDrop(false));
      setLoading(false);
    };
    getData();
  }, []);

CodePudding user response：

Here it is refactored to only use async/await:

useEffect(async () => {
    setLoading(true);
    const response = await fetch('/encrypt', {
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    method: 'POST',
    body: JSON.stringify({ clientId: params[1] }),
    })
    try {
      const data = await response.json();
    } catch(err) {
      dispatch(SetSnackBarMsg({ bool: true, msg: 'Cannot get data.' }));
    }
    const shared = data.data.split('_Shared_')[1];
    dispatch(SetBackDrop(true));
    const docRef = doc(db, 'data-shared', shared);
    const docSnap = await getDoc(docRef);
    setLoaded(docSnap.data?.img);
    dispatch(SetBackDrop(false));
    setLoading(false);
});

CodePudding user response：

If you use the await/async keywoards you don't need to also use the .then() function. You can do this instead:

const getData = async () => {
 try{
  const response = await fetch('/encrypt', {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    method: 'POST',
    body: JSON.stringify({ clientId: params[1] }),
  });
  const result = await response.json();
  let shared = result.data.split('_Shared_')[1];
  //rest of the logic here
 }
 catch(e){
  dispatch(SetSnackBarMsg({ bool: true, msg: 'Cannot get data.' }));
 }
}

More infos here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#rewriting_a_promise_chain_with_an_async_function