React - Return object from helper method get request

Question

I have a function that is called in many place of my app so I am trying to turn it into a helper method and just import where needed. I can't seem to get a response though from where I am calling it. Where is my syntax wrong, or maybe my approach is off entirely?

I saw the post on how to return from an Async AJAX request. This doesn't cover my problem. I know how to return the response. I just don't know how to do it from one file to another. That's my issue.

-- Help Function

export function enforceEmployeeAuth() {
  let response;
  API.get('user/employee_auth', {}, function(res) {
    response = res
    return response
  })
}

Where it's called

componentDidMount() {
  let auth = enforceEmployeeAuth();

  // auth is undefined
}

Original Function

enforceEmployeeAuth() {
    API.get('user/employee_auth', {}, function(res) {
      this.setState({
        employee_auth: res.employee_auth,
        company_admin: res.company_admin
      });
    }.bind(this));
  }

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — str, Mar 09 '18 at 13:08
enforceEmployeeAuth should return something, like the Promise of the API request. so: `return API.get(....` — Sebastian Scholle, Mar 09 '18 at 13:09
I have tried just explicitly doing `return API.get(...` like you said, but still nothing. Also, I saw the linked SO post above, it doesn't cover what I am trying to do. I know how to return the response from an AJAX call, I just don't know how to do it from one file to another. — vin_Bin87, Mar 09 '18 at 13:13
@vin_Bin87 "it doesn't cover what I am trying to do" yes it does. It does not matter whether the call is in the same or another file; the procedure is the same. — str, Mar 09 '18 at 13:16
First, no you don't know how to return the response from an async call, your code is not looking like you know it. Second, Try to use `return API.get(...)` and on calling this function `enforceEmployeeAuth().then(res => { console.log(res) })` — Weedoze, Mar 09 '18 at 13:16
@Weedoze But that only works if `API.get` returns a promise. If it does not, vin_Bin87 has to turn it into a promise as described in the duplicate question. — str, Mar 09 '18 at 13:19

score 1 · Accepted Answer · answered Mar 09 '18 at 13:27

1

the answer depends on the case if API supports promises or not.

That's how i would deal with both scenarios:

1) Callback only:

--- Helper function:

export function enforceEmployeeAuth(cb) {
  API.get('user/employee_auth', {}, cb)
}

--- Component

componentDidMount() {
  enforceEmployeeAuth(res => this.auth = res);
}

2) Promises are supported

--- Helper function:

export function enforceEmployeeAuth() {
  return API.get('user/employee_auth', {});
}

--- Component

componentDidMount() {
  enforceEmployeeAuth().then(res => this.auth = res);
}

You also might want to use setState in the callbacks, so your component re-renders when you get the async data.

answered Mar 09 '18 at 13:27

Gleb Kostyunin

3,743
2
19
36

Option 1 did it. However, it looks like this doesn't make my code any cleaner or efficient. I thought moving the function to a helper method would me I could run maybe 1 line of code where needed, in this case I am basically just rewriting the whole function again. – vin_Bin87 Mar 09 '18 at 13:37
Yeah, but it still makes sense to me. For example if later down the road you decide to change your auth provider or api changes or the url changes, you'll need to update one `enforceEmployeeAuth` function, comparing to seeking out those calls in multiple components and patching them. – Gleb Kostyunin Mar 09 '18 at 13:41

React - Return object from helper method get request

1 Answers1