如何将 axios 的响应传递给 axios 外部的变量

Question

我不想用数组类型填充axios之外的变量，然后将数组导出到另一个文件。

导航.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 结果

[
  {
    "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"
      }
    ]
  }
]

或者也许给我解决方案，将数组从 api 导出到 index.js

Answer 1

我建议将您的 axios 调用包装为一个函数并使用其返回值而不是导出菜单变量。

    async function makeRequest() {
    
    const response = await axios.get('https://api.link/', {
    headers: { Authorization: `Bearer ${localStorage.getItem('accessToken')}` } 
        })
    
    return response.data
    }

您可以按如下方式调用该函数：

    makeRequest().then((data) => {
    //do something with data
    }

我不确定您要达到什么目的，但有一个我建议的示例：

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;

在另一个模块中，例如(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;
    }

该示例使用来自 jsonplaceholder 站点的示例 API：

const url = "https://jsonplaceholder.typicode.com/posts";

最重要的是，您的选择是：

1. 如果您的数据位于外部模块中，您可以按照 我在上面建议的直觉。
2. 如果要将数据从父组件传递到子组件，可以使用props。
3. 如果要将数据从子组件传递到父组件，可以使用callbacks。
4. 或者您可以查看useContext 或查看其他状态 容器（redux），看看如何在不同的容器之间共享数据 应用中的组件。