Аксио. чтобы получить данные в другом файле

Question

Надеюсь, вы можете мне помочь.

Я пытаюсь получить ответ от API и использовать эту информацию в другом файле.

У меня 3 файла:

api.jsx

import axios from 'axios';
export const api = (url, data) => {

    const { path, method } = url;

    let result ={};
    axios({
            method: method,
            url: path,
            data: data
        })
        .then(res => {

            result = res.data;
            console.log(res.data);   
        })        
        .catch(err => console.error(err));
    return result;
};

url.jsx

    export const URL = {
    users:
        {
            getAllUsers: { path:'/users', method: 'post'},
            login: { path:'/login', method: 'post'},
            register: { path:'/register', method: 'post'},
            version: { path:'/', method: 'get'},
        }

}

app. js ( внутри рендера)

    const data = {
      email: 'hello@world.com',
      password: '12345',
      };

    let result = api(URL.users.login, data);

    console.log(result);

В файле api я получаю правильный ответ, но в компоненте реакции нет. Я знаю, что это проблема syn c, поскольку я получаю сначала консоль app.jsx, а затем консоль api.jsx, но я хотел бы уважать текущую структуру или сделать что-то подобное.

Есть идеи, как исправить это без особых изменений?

PS. извините за беспорядок. Я попытался выделить весь код, но по какой-то причине он не работает.

Answer 1

Вы хотите вернуть Promise в api.jsx

api.jsx

export const api = (url, data) => {
  const { path, method } = url
  return axios({ // the axios call returns a promise because of its .then; you can just return it
    method: method,
    url: path,
    data: data
  })
  .then(res => {
    return res.data;
  })
  .catch(err => {
    console.error(err)
  })
}