javascriptreactjsfunctioncode-cleanup

How to shorten the code with these 4 functions having some same variables and similar code


There are 4 functions: AccessToken(), RefreshToken(), Login(), DeleteToken () having some same variables and similar code. How do i shorten it?

const AccessToken = async () => {
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");

      var raw = JSON.stringify({
        api_key: "abc123",
      });

      var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: raw,
        redirect: "follow",
      };
      try {
        const res = await fetch("https://access_token.com", requestOptions);
        return res;
      } catch (error) {
        return null;
      }
    };

async function RefreshToken() {
      
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      myHeaders.append("Authorization", "Bearer" + localStorage.getItem("access_token"));

      var raw = JSON.stringify({
        "api_key": "abc123"
      });

      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
      };

      try {
        const res = await fetch("https://refresh_token.com", requestOptions);
        return res;
      } catch (error) {
        return null;
      
      }
    }

async function Login() {
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      myHeaders.append("Authorization", "Bearer " + localStorage.getItem("access_token"));

      var raw = JSON.stringify({
        mobile_no: "9999999999",
        student_class: "8",
        partner_source: "abcdef",
        partner_id: "abc_testing",
        partner_unique_id: "123456",
      });

      var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: raw,
        redirect: "follow",
      };

      try {
        const res = await fetch("https://login.com", requestOptions);
        return res;
      } catch (error) {
        return null;
      }
    }

function DeleteToken (e) {
      e.preventDefault();
      var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer" + localStorage.getItem("access_token"));
      
      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        redirect: 'follow'
      };
      
      fetch("https://delete_token.com", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
  }

Like should I define api key, urls and all of these on top together? Also var requestOptions is same for all so define it only once? How to make it a better looking code?


Solution

  • I create a global request method for the first three methods (AccessToken, RefreshToken, Login ) as they have small differences.

    const request = async ({ url, setToken, raw }) => {
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        setToken &&
            myHeaders.append(
                "Authorization",
                "Bearer" + localStorage.getItem("access_token")
            );
    
        var requestOptions = {
            method: "POST",
            headers: myHeaders,
            body: raw,
            redirect: "follow",
        };
        try {
            const res = await fetch(url, requestOptions);
            return res;
        } catch (error) {
            return null;
        }
    };
    
    const AccessToken = async () => {
        request({
            url: "https://access_token.com",
            raw: JSON.stringify({
                api_key: "abc123",
            }),
        });
    };
    
    async function RefreshToken() {
        request({
            url: "https://refresh_token.com",
            setToken: true,
            raw: JSON.stringify({
                api_key: "abc123",
            }),
        });
    }
    
    async function Login() {
        request({
            url: "https://refresh_token.com",
            setToken: true,
            raw: JSON.stringify({
                mobile_no: "9999999999",
                student_class: "8",
                partner_source: "abcdef",
                partner_id: "abc_testing",
                partner_unique_id: "123456",
            }),
        });
    }
    
    function DeleteToken(e) {
        e.preventDefault();
        var myHeaders = new Headers();
        myHeaders.append(
            "Authorization",
            "Bearer" + localStorage.getItem("access_token")
        );
    
        var requestOptions = {
            method: "POST",
            headers: myHeaders,
            redirect: "follow",
        };
    
        fetch("https://delete_token.com", requestOptions)
            .then((response) => response.text())
            .then((result) => console.log(result))
            .catch((error) => console.log("error", error));
    }