Блог

Я пытаюсь создать приложение для покемонов, используя vanilla js на интерфейсе и Node/Express js на бэкэнде. Я извлекаю данные из API на бэкэнде и отправляю их на интерфейс, но он отправляет только первый элемент из API.

Я также получаю сообщение об ошибке «Ошибка [ERR_HTTP_HEADERS_SENT]: Не удается установить заголовки после их отправки клиенту»

Результат изображения: результат

app.js

 const express = require('express');
const cors = require('cors');
const morgan = require('morgan');

const app = express();
const port = 1337;

app.use(cors());


if(process.env.NODE_ENV !== 'test'){
    app.use(morgan('combined'));
}

app.use((req, res, next) => {
    console.log(req.method);
    console.log(req.path);
    next();
});

// Hämtade moduler
const index = require('./routes/index');

// Lägg till route
app.use('/', index);

app.use((req, res, next) => {
    let err = new Error("Not Found");
    err.status = 404;
    next(err);
})

app.use((err, req, res, next) => {
    if(res.headesSent){
        return next(err);
    }

    res.status(err.status || 500).json({
        "errors": [
            {
                "status": err.status,
                "title": err.message,
                "detail": err.message
            }
        ]
    })
})


app.listen(port, () => {
    console.log(`Example API listening on port ${port}!`);
});

 

index.js

 const express = require('express');
const router = express.Router();
const fetch = require('node-fetch');

router.get("/",  async (req, res) => {
    async function foo(){
        await fetch(`https://pokeapi.co/api/v2/pokemon?limit=151`)
        .then(response => response.json())
        .then(data => {
             return getPokemonData(data)
        }).catch(error => {
            console.log(error);
        })

    async function getPokemonData(pokemon){
        await pokemon.results.map(poke => {
            res.json(poke.url)
        })
    }
    }

    foo()
});

module.exports = router;
 

Интерфейс — script.js

 

const pokemonApplication = {

    btnGenerate: document.querySelector('.btnGetPokemon'),
    putMain: document.querySelector('.pokemon'),
    headingName: document.createElement('h2'),

    imgCont: document.createElement('img'),

    getPokemon: ()=> {

        const getFromApi = async () => {
            await fetch('http://localhost:1337')
            .then(response => response.json())
            .then(data => {
                console.log(data);

                // const imgPokemon = data.sprites.other['official-artwork']['front_default']
                // const namePokemon = data.species.name;

                // // Append image
                
                // pokemonApplication.imgCont.src = imgPokemon;
                // pokemonApplication.putMain.prepend(pokemonApplication.imgCont)

                // // Append name
                // pokemonApplication.headingName.append(namePokemon);
                // pokemonApplication.putMain.prepend(pokemonApplication.headingName);
            })
        }

        pokemonApplication.btnGenerate.addEventListener('click', getFromApi);
    }
}

pokemonApplication.getPokemon();
 

Карта в javascript будет зацикливать мысли всех покемонов. Клиенту можно отправить только один «res».

Таким образом, первый из них был отправлен, все остальные потерпели неудачу. Вот почему у вас есть ошибка [ERR_HTTP_HEADERS_SENT]

     async function getPokemonData(pokemon){
        await pokemon.results.map(poke => {
            res.json(poke.url) // This is not good
        })
    }
 

Что-то похожее на:

     async function getPokemonData(pokemon){
        const pokUrls = await pokemon.results.map(poke => {
            return poke.url
        })
    res.json(pokUrls)
    }