在 React ES6 中使用 module.exports

Question

我正在尝试使用 module.exports 创建一个 'global' 函数，我可以在我的 React 项目中使用它来使用 Axios 进行 API 调用。

我尝试了以下...

import axios from 'axios';

module.exports = {
    fetchApi: function (endPoint) {
        var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);

        return axios.get(encodeURI)
            .then(function (response) {
                return response.data
            })
    }
}

//call function in other components like this
componentDidMount () {
    fetchApi.fetchApi(this.setState.endPoint)
    .then(function (endPoint) {
        console.log("API endpoint: " + endPoint)
    })
}

这个returns错误... 'fetchApi' 未定义 no-undef

我知道通常您可以使用 export default 导入和导出组件，但我认为如果使用 module.export.

则不需要这样做

此外，如果我尝试像这样导入...

import fetchApi from '../../../utils/api'

我收到以下错误... 尝试导入错误：“../../../utils/api”不包含默认导出（导入为 'fetchApi'）。

感谢任何帮助。谢谢。

编辑：

从 'axios' 导入 axios；

解决方案（编辑）...

api.js

const api = {
    fetchApi: function(endPoint){
        var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);
        console.log(encodedURI)

        return axios.get(encodedURI)
            .then(function (response) {
                return response.data

            })
    }
}

export default api;

Sites.js

import api from '../../../utils/api'

    //single api call
    componentWillMount = async () => {
        api.fetchApi('sites')
            .then(data => {
                console.log(data);
                this.setState({ rows: data.rows, columns: data.columns })
            })
            .then(async () => {
                this.setState({ tableRows: this.assemblePosts(), isLoading: false })
            });
    }

这使我可以访问以下 api 端点...

http://localhost:3001/sites

感谢您的帮助。

Answer 1

module.exports 应该导出一个函数，而不是一个对象。

module.exports = function() {}

但是，如果您的 api:

中有多个函数，则最好使用命名导出

exports.fetchApi = function() {}

此外，您可能想在这里使用 async 函数和 await，这将有助于清理所有 .then()

Answer 2

我建议不要混用 require 和 es6 import 语法。坚持使用 es6 语法。与 es6 语法相同。

import axios from 'axios';

const helpers = {
    fetchApi: function(){

    }
}

export default helpers;

用法

import helpers from './helpers';

helpers.fetchApi()

在 React ES6 中使用 module.exports

Using module.exports in React ES6

reactjs

api

ecmascript-6

axios

module.exports