Node.js 如何通过module.exports从axios响应读取数据？_Node.js_Json_Reactjs_Axios

Node.js 如何通过module.exports从axios响应读取数据？

node.js json reactjs

Node.js 如何通过module.exports从axios响应读取数据？,node.js,json,reactjs,axios,Node.js,Json,Reactjs,Axios,我需要通过module.export从axios响应读取数据。这是我的数据： http://localhost:8001 { "name":"Nama Nih", "desc":"Sekolah Terpadu Al-Qudwah - Yayasan Islam Qudwatul Ummah", "prefix":"alqudwah", &qu

我需要通过module.export从axios响应读取数据。这是我的数据： http://localhost:8001

{
    "name":"Nama Nih",
    "desc":"Sekolah Terpadu Al-Qudwah - Yayasan Islam Qudwatul Ummah",
    "prefix":"alqudwah",
    "footerText":"Yayasan Islam Qudwatul Ummah | All Rights Reserved 2020",
    "logoText":"Al-Qudwah",
    "needLogin":false
}

我使用以下代码从axios调用数据： brand.js

var axios = require('axios');

module.exports = axios.get('http://localhost:8001', {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }})
  .then(function (response) {
    return response.data;
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
  });

但当我读取响应数据时，它与预期不一样。我尝试如下方式控制台日志返回值：

这是我的代码，我在其中console.log响应

import React, { PureComponent } from 'react';
import brand from 'ba-api/brand';
import { Helmet } from 'react-helmet';

class Dashboard extends PureComponent {
  render() {
    console.log(brand);
    const title = brand.name + ' - Dashboard';
    const description = brand.desc;
    const { classes } = this.props;
    return (
      <div>
        <Helmet>
          <title>{title}</title>
          <meta name="description" content={description} />
          <meta property="og:title" content={title} />
          <meta property="og:description" content={description} />
          <meta property="twitter:title" content={title} />
          <meta property="twitter:description" content={description} />
        </Helmet>
      </div>
    );
  }
}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Dashboard);

import React，{PureComponent}来自'React'；
从“ba api/品牌”进口品牌；
从“react Helmet”导入{Helmet}；
类仪表板扩展了PureComponent{
render（）{
控制台日志（品牌）；
const title=brand.name+'-Dashboard'；
const description=brand.desc；
const{classes}=this.props；
返回(
{title}
);
}
}
Dashboard.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（仪表板）；

如何读取此数据？

嗯，您不能直接导出所获取的数据。从技术上讲，您可以通过以下方式实现类似的目标：

将http函数调用包装在

注意：以下不是最佳实践方法。在React组件中，首选建议的

方法
//brand.js
module.exports=（（）=>{
const request=new XMLHttpRequest（）；
request.open（'GET'，'http://localhost:8001",假),；
请求发送（空）；
如果（request.status==200）{
返回request.responseText；
}
})();

建议的方法
如果您可以在不同步访问请求的资源的情况下生存，则可以将axios包装在自定义挂钩中
从'react'导入{useffect，useState}；
const useAxios=（url）=>{
const[state，setState]=useState（{}）；
useffect（（）=>{
axios
.get（url）
.then（{data}）=>setState（{data}））
.catch（error=>setState（{error}））；
}, []);
返回状态；
}
// .. 在您的组件中
常量组件=（）=>{
const{data，error}=useAxios（'http://localhost:8001');
如果（错误）{
…错误组件
}
如果（！数据）{
…加载组件
}
返回(
…正在使用数据的组件`
);
}

在您的特定情况下，由于您仅将该数据用于设置图元，因此可以跳过错误并加载组件。
嗯，您不能直接导出获取的数据。从技术上讲，您可以通过以下方式实现类似的目标：


将http函数调用包装在

注意：以下不是最佳实践方法。在React组件中，首选建议的方法
//brand.js
module.exports=（（）=>{
const request=new XMLHttpRequest（）；
request.open（'GET'，'http://localhost:8001",假),；
请求发送（空）；
如果（request.status==200）{
返回request.responseText；
}
})();

建议的方法
如果您可以在不同步访问请求的资源的情况下生存，则可以将axios包装在自定义挂钩中
从'react'导入{useffect，useState}；
const useAxios=（url）=>{
const[state，setState]=useState（{}）；
useffect（（）=>{
axios
.get（url）
.then（{data}）=>setState（{data}））
.catch（error=>setState（{error}））；
}, []);
返回状态；
}
// .. 在您的组件中
常量组件=（）=>{
const{data，error}=useAxios（'http://localhost:8001');
如果（错误）{
…错误组件
}
如果（！数据）{
…加载组件
}
返回(
…正在使用数据的组件`
);
}

在您的特定情况下，由于您仅将该数据用于设置图元，因此可以跳过错误并加载组件。我已使用此解决方案解决了此问题：
brand.js
var axios = require('axios');

module.exports = axios.get('http://localhost:8001', {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }})
  .then(function (response) {
    return response.data;
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
  });

我用以下代码调用该函数：
import React, { PureComponent } from 'react';
import brand from 'ba-api/brand';
import { Helmet } from 'react-helmet';

class Dashboard extends PureComponent {
  constructor(props){
    super(props);
    this.state = {
      title: '',
      description: ''
    }  
  }
  componentDidMount(){
    brand.then(data => {
      this.setState({
        title: data.name,
        description: data.desc
      });  
    });
  }
  render() {
    const title = this.state.title + ' - Dashboard';
    const description = this.state.description;
    const { classes } = this.props;
    return (
      <div>
        <Helmet>
          <title>{title}</title>
          <meta name="description" content={description} />
          <meta property="og:title" content={title} />
          <meta property="og:description" content={description} />
          <meta property="twitter:title" content={title} />
          <meta property="twitter:description" content={description} />
        </Helmet>
      </div>
    );
  }
}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Dashboard);

import React，{PureComponent}来自'React'；
从“ba api/品牌”进口品牌；
从“react Helmet”导入{Helmet}；
类仪表板扩展了PureComponent{
建造师（道具）{
超级（道具）；
此.state={
标题：“”，
说明：“”
}  
}
componentDidMount（）{
然后（数据=>{
这是我的国家({
标题：data.name，
说明：data.desc
});  
});
}
render（）{
const title=this.state.title+'-Dashboard'；
const description=this.state.description；
const{classes}=this.props；
返回(
{title}
);
}
}
Dashboard.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（仪表板）；

感谢所有回答我问题的人。我已使用此解决方案解决了此问题：
brand.js
var axios = require('axios');

module.exports = axios.get('http://localhost:8001', {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }})
  .then(function (response) {
    return response.data;
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
  });

我用以下代码调用该函数：
import React, { PureComponent } from 'react';
import brand from 'ba-api/brand';
import { Helmet } from 'react-helmet';

class Dashboard extends PureComponent {
  constructor(props){
    super(props);
    this.state = {
      title: '',
      description: ''
    }  
  }
  componentDidMount(){
    brand.then(data => {
      this.setState({
        title: data.name,
        description: data.desc
      });  
    });
  }
  render() {
    const title = this.state.title + ' - Dashboard';
    const description = this.state.description;
    const { classes } = this.props;
    return (
      <div>
        <Helmet>
          <title>{title}</title>
          <meta name="description" content={description} />
          <meta property="og:title" content={title} />
          <meta property="og:description" content={description} />
          <meta property="twitter:title" content={title} />
          <meta property="twitter:description" content={description} />
        </Helmet>
      </div>
    );
  }
}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Dashboard);

import React，{PureComponent}来自'React'；
从“ba api/品牌”进口品牌；
从“react Helmet”导入{Helmet}；
类仪表板扩展了PureComponent{
建造师（道具）{
超级（道具）；
此.state={
标题：“”，
说明：“”
}  
}
componentDidMount（）{
然后（数据=>{
这是我的国家({
标题：data.name，
说明：data.desc
});  
});
}
render（）{
const title=this.state.title+'-Dashboard'；
const description=this.state.description；
const{classes}=this.props；
返回(
{title}
);
}
}
Dashboard.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（仪表板）；

谢谢所有回答我问题的人。
谢谢你的回答。经过反复试验，我找到了我上面回答的解决方案。谢谢你的回复。基于试验a