使用 Context 为整个应用程序使用一个 Axios 对象

Question

我有一个包含多个级别孩子的应用程序。在这个例子中，我声明了一个 Context.js 和一个 ContextDBConnector.js ，它们是这样使用的：

上下文.js

import React from 'react';

export const ContextDB = React.createContext();

ContextDBConnector.js

import React, {Component} from 'react'
import {ContextDB} from './Context'

class ContextDBConnector extends Component {

    render(){

        return (
            <ContextDB.Provider value = {{
                
                callAPI() {

                    const axios = require('axios').default
                    
                    axios.get('http://localhost:5000/person_by_first_name', {
                        params: {
                            firstname: "Marcus"
                        }
                    })
                    .then(function (response) {
                        console.log("Printing out response")
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // always executed
                    })
                }
            }}>

            {this.props.children}

            </ContextDB.Provider>
        )
    }
}

export default ContextDBConnector;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from './components/App.js';
import {navData} from './js/const';
import {footerData} from './js/const';
import ContextDBConnector from './context/ContextDBConnector'

ReactDOM.render(
  <React.StrictMode>
    <ContextDBConnector>
      <App key = "0" navData =  {navData} footData = {footerData} />
    </ContextDBConnector>
  </React.StrictMode>,
  document.getElementById('root')
);


serviceWorker.unregister();

到目前为止一切顺利。我现在可以使用上下文从远离子行的组件内部调用 context.callAPI()，以这种方式：

Image.js

import React, {Component} from 'react'
import {ContextDB} from '../context/Context'

class Image extends Component {
    
    static contextType = ContextDB

    componentDidMount(){

        this.context.callAPI()

    }

    render(){
        
        const obj = this.props.obj

        return (
            <div className={obj.classCont}>
                <img className={obj.class} src={obj.url} alt='' />
            </div>
        );
    }
}

export default Image;

这很好用，查看 Chrome 中的 javascript 控制台，ContextDBConnector.js 正在打印出它应该打印的内容：

打印响应

ContextDBConnector.js:23 {data: Array(1), status: 200, statusText: "OK", headers: {...}, config: {...}, ...}

现在我很难将响应对象从组件 ContextDbConnector 获取到组件 Image，以便它可以使用所需的数据。我尝试了这样的事情，但显然没有用：

Image.js

import React, {Component} from 'react'
import {ContextDB} from '../context/Context'

class Image extends Component {
    
    static contextType = ContextDB

    componentDidMount(){

        this.context.callAPI().then(response => {
            console.log("Person has been returned")
        });

    }

    render(){
        
        const obj = this.props.obj

        return (
            <div className={obj.classCont}>
                <img className={obj.class} src={obj.url} alt='' />
            </div>
        );
    }
}

export default Image;

您能帮我弄清楚 Image 从 ContextDBConnector 获取所需数据的部分吗？

完全披露：我一个月前才开始学习 React、Express、Mysql、Axios 和 Node.js，所以如果我在这里误解了一些概念并且我的代码逻辑不是很强大，我提前道歉：D 这个是我第一次尝试使用 Context，我对这部分有点卡住了。

很清楚，我在这里想要完成的是整个应用程序只有一个 axios 对象，以便不同的部分可以访问它并访问 Express 服务器（后端）中的不同路由器到处创建 axios 实例。

如果我试图完成的方法不是一个好方法，你能告诉我一个更好的方法吗？ 否则，您能否帮我将数据从 ContextDBConnector 获取到 Image，让 Image 在执行任何其他操作之前等待接收到实际对象？

谢谢，非常感谢！

Answer 1

您似乎应该更改 callAPI，因为它不返回 Promise 对象，因此您可以使用 .then() 和 .catch()