快速宣传与axios

时间:2017-07-06 12:28:01

标签: javascript node.js reactjs express

我会开始说我不知道​​这是不是问题,但很可能(希望)。

我正在使用axios将数据发布到API。

数据发布成功,但从未进入.then功能。即:

  createPage(page) {
    instance.post('/admin/createPage',page).then((response) => {
      console.log(response) <------- Never gets to.
    }).catch((error) => {
      console.log(error)
    })
  }

我没有得到console.log(响应)。

我最后添加'es6-promisify',但我该如何设置呢?

供参考,以下是重要文件:

server.js:

import express from 'express'
import session from 'express-session'
import bodyParser from 'body-parser'
import promisify from 'es6-promisify'
import cors from 'cors'
import low from 'lowdb'
import fileAsync from 'lowdb/lib/storages/file-async'

import { initDb } from './db/index.js'
import routes from './routes/index.js'

const app = express();

const db = low('./core/db/.index.json', { storage: fileAsync })

app.use(cors())

app.set('db', db);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use((req,res, next) => {
    next();
});

app.use('/', routes);

app.set('port', process.env.PORT || 1337);

if(!db.has('pages').value()) {
    initDb(db);
}



const server = app.listen(app.get('port'), () => {
  console.log(`Express running → PORT ${server.address().port}`);
});

app.js:

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'
import axios from 'axios'

import Header from '../components/Header'

import Dashboard from './Dashboard'
import AddEditPage from './AddEditPage'

const instance = axios.create({baseURL: 'http://localhost:1337'})



class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      "pages": []
    }
    this.createPage = this.createPage.bind(this)
    this.getPages = this.getPages.bind(this)
  }

  componentDidMount() {
    this.getPages()
  }

  getPages() {
    instance.get('/admin/listPages')
      .then(
        (response) => {
          this.setState(
            {
              "pages": response.data
            }
          )
        })
      .catch((error) => {console.log(error)})
  }

  createPage(page) {
    instance.post('/admin/createPage',page).then((response) => {
      console.log(response)
    }).catch((error) => {
      console.log(error)
    })
  }

  render() {
    return (
      <Router>
        <div className="Router">
          <div className="Navbar">
            <Header />
          </div>
          <div className="Wrapper">
            <Route exact path="/" render={ () => (
              <Dashboard pages={this.state.pages} />
            )} />
            <Route path="/admin/new-page" render={ () => (
              <AddEditPage createPage={this.createPage} />
            )} />
            <Route path="/admin/edit-page/:id" render={ () => (
              <AddEditPage />
            )} />
          </div>
        </div>
      </Router>

    );
  }
}

export default App;

1 个答案:

答案 0 :(得分:0)

你没有包含你的./routes/index.js所以我们不知道你的实际路由是什么以及他们使用了什么请求处理程序,所以我们只能推测它,但你所描述的是当你描述的症状发生时您不会从请求处理程序返回响应。

例如,如果您有类似的内容:

router.post('/createPage', (req, res) => {
  console.log(req.body);
});

然后你的请求将永远挂起(利用它超时)。

如果您回复:

router.post('/createPage', (req, res) => {
  console.log(req.body);
  res.json({ ok: true });
});

然后请求应该结束并返回成功。

但当然你没有包含足够的代码来确定这一点。