反应 static 类/方法调用和网络调用

Question

I am relatively new in React but I am trying to create a class/method for network call. Nothing complex just a way to make the code readable.

I have a class:

class Auth {

    getToken(username, password) {

        const endpointOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: `${username}`, password: `${password}` })
            };
    
        fetch(`${Constant.BASE_WP_URL}${Constant.TOKEN_ENDPOINT}`, endpointOptions)
            .then(async response => {
            const data = await response.json();
            if (!response.ok) {
                // get error message from body or default to response status
                const error = (data && data.message) || response.status;
                throw error;
            }
            return data;
            })
            .catch(error => {
            throw error;
        });
    }

}

export default Auth;

I am trying to call it using:

import Auth from '../../data/network/Auth';

requestSignIn = (event) => {
      event.preventDefault();

      this.setState({loading: true})

      try {
        const authData = Auth.getToken(`${this.state.email}`, `${this.state.password}`);
        sessionStorage.setItem('authToken', authData.token)

      } catch (error) {
        console.log("Connection to WP - Auth Token failed ")
        console.error(error);
      }
    }

but React is complaining because getToken is not a function. I am trying to create a class Auth to have inside all methods/functions I need related to Auth process.

Also, is it the right way to handle the result? is the try/catch as done works or should I do it differently as the getToken is an API call.

Any idea?

pretty sure, it's easy but I can't find any interesting topics on Google.

Thanks

Answer 1

In you class definition add static in front of your function to be

class Auth {
  static async getToken(username, password) {
    const endpointOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: `${username}`, password: `${password}` })
    };
    try {
      const response = await fetch(`${Constant.BASE_WP_URL}${Constant.TOKEN_ENDPOINT}`, endpointOptions)
      const data = await response.json();
      if (!response.ok) {
        const error = (data && data.message) || response.status;
        throw error;
      }
      return data;
    } catch (error) {
      throw error
    }

  }
}

export default Auth;

then you will be able to call it as static function.

and requestSignIn will be using it in the following code

requestSignIn = async (event) => {
  event.preventDefault();

  this.setState({ loading: true })

  try {
    const authData = await Auth.getToken(`${this.state.email}`, `${this.state.password}`);
    sessionStorage.setItem('authToken', authData.token)

  } catch (error) {
    console.log("Connection to WP - Auth Token failed ")
    console.error(error);
  }
}

Answer 2

I think, if you want to use function directly in OOP of JavaScript, you must put static keyword in front of the function name .

In your auth file

static class Auth {

    static getToken(username, password) {
    ...
    }
}

In your index file

import Auth from '../../data/network/Auth';
const authData = Auth.getToken(`${this.state.email}`, `${this.state.password}`);

If you don't have static in front of the function name . You have to create a new instance of the class Auth in order to use the function inside.

import Auth from '../../data/network/Auth';
const AuthInit = Auth();
authData = AuthInit.getToken(`${this.state.email}`, `${this.state.password}`);

===========================

Update for applying asynchronous method

// ====== auth file
static class Auth {

    static async getToken(username, password) {
        ...
        // assign fetched data to data_fetch
        const data_fetch = fetch(`${Constant.BASE_WP_URL}${Constant.TOKEN_ENDPOINT}`, endpointOptions)
        .then(async response => {
            const data = await response.json();
            if (!response.ok) {
                // get error message from body or default to response status
                const error = (data && data.message) || response.status;
                throw error;
            }
            return data;
        })
        .catch(error => {
            throw error;
        });
        return data_fetch;
    }
}
// ======= index file
import Auth from '../../data/network/Auth';
...
requestSignIn = async (event) => { // put async in front of your function
    // the function outside (requestSignIn) must be async type 
    // in order to use await keyword for getToken() function
    event.preventDefault();

    this.setState({loading: true})

    try {
        // because your getToken function is now a async function, you can 
        // use "await" keyword in front of it to wait for fetching data to finish
        const authData = await Auth.getToken(`${this.state.email}`, `${this.state.password}`);
        sessionStorage.setItem('authToken', authData.token)

    } catch (error) {
        console.log("Connection to WP - Auth Token failed ")
        console.error(error);
    }
}

Hope this would help

Answer 3

but React is complaining because getToken is not a function

You've defined getToken as a method of an Auth instance, not a static function. But you don't need an Auth class here at all, just use the proper exports/imports.

replace the Auth-class with:

export function getToken(username, password) {
  //...
};

and you can either

/// import all exports from that file under the name `Auth`
import * as Auth from '../../data/network/Auth';

// ...

const authData = Auth.getToken(...);

or

// import these specific exports from that file.
import { getToken } from '../../data/network/Auth';

// ...

const authData = getToken(...);

The last option has the advantage that it can be tree-shaken. If You have some build-process, the compiler can eliminate all the pieces of code that you don't use; especially useful for libraries.

Edit:

Even if you want to keep the default import and import the entire thing, imo. it makes more sense to use a simple Object rather than a class with static methods.

function getToken(username, password) {
  //...
}

export default {
    getToken
};