Express Promisify mit Axios

Question

Ich fange an und sagen, ich weiß nicht, ob das das Problem ist, aber es kann sehr gut sein (hoffend).

Ich verwende Axios, um Daten an eine API zu senden.

Die Daten werden erfolgreich hochgeladen, aber nie zur .then-Funktion. dh:

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

Ich bekomme nicht die console.log (Antwort).

Ich fügte 'es6-promisify' hinzu, aber wie würde ich das einrichten?

Als Referenz sind hier die wichtigen Dateien:

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; 

Answer 1

Sie nicht auch Ihre ./routes/index.js wir so don‘ Sie wissen, dass Ihre tatsächlichen Routen sind und welche Anforderungshandler sie verwenden, also können wir nur darüber spekulieren, aber was Sie beschrieben haben, ist ein Symptom, das passiert, wenn Sie keine Antwort von Ihnen zurücksenden Anforderungshandler.

Zum Beispiel, wenn Sie so etwas haben:

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

dann Ihre Anfrage wird hängen immer (util es mal aus).

Wenn Sie eine Antwort zurück:

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

dann sollte die Anfrage beenden und den Erfolg zurück.

Aber natürlich haben Sie nicht genug Code enthalten, um das sicher zu wissen.