How can i passing response of axios to variable outside the axios - vue.js

Question

I wan't to fill the variable outside the axios in array type and then export the array to another file.
navigation.js
import axios from 'axios'
/* eslint-disable */
let menus
axios.get('https://api.link/', {
headers: { Authorization: `Bearer ${localStorage.getItem('accessToken')}` }
})
.then(res => {
menus = res.data
})
/* eslint-enable */
export default menus
index.js
import navMenu from './navigation'
// Array of sections
export default [...navMenu]
api results
[
{
"Oid": "3b05b576-fa95-11eb-84d0-00163e01a21d",
"Name": "Menu",
"Icon": "BookIcon",
"Submenu": [
{
"Oid": "3b05b576-fa95-11eb-84d0-00163e013r46",
"Name": "Submenu",
"Link": "link/to/page",
"Icon": "BookOpenIcon"
}
]
}
]
or maybe give me the solution to export array from api to index.js

Answer 1

I would suggest to wrap your axios call as a function and use its return value rather than exporting the menu variable.
async function makeRequest() {
const response = await axios.get('https://api.link/', {
headers: { Authorization: `Bearer ${localStorage.getItem('accessToken')}` }
})
return response.data
}
and you can call that function as follows:
makeRequest().then((data) => {
//do something with data
}
I am not sure what you are trying to achieve, but there is an example of what I suggested:
App.js
import getDataFromServer from "./navigation";
import { useState } from "react";
function App() {
const [myState, setMyState] = useState([]);
const callServer = async () => {
let result = await getDataFromServer();
setMyState(result.data);
console.log(myState);
};
const listItems = myState.map((item) => <li>{item["title"]}</li>);
return (
<div>
<button onClick={callServer}>Call Server</button>
<ul>{listItems}</ul>
</div>
);
}
export default App;
In another module e.g. (navigation.js)
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/posts";
export default async function getDataFromServer() {
const result = await axios.get(url);
return result;
}
The example uses sample API from jsonplaceholder site:
const url = "https://jsonplaceholder.typicode.com/posts";
The bottom line, your alternatives are:
If your data reside in an external module, you can follow the
intuition I suggested above.
If you are passing data from a parent component to a child component, you can use props.
If you are passing data from a child component to a parent component, you can use callbacks.
Or you can look into useContext or look into other state
containers (redux) to see how you can share data between the different
components in an app.