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

Question

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?

Answer 1

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