0

Criei uma classe chamada Api

import api from './api';

class App {
    constructor(){
        this.repositories = [];

        this.formEl = document.getElementById('repo-form');
        this.inputEl = document.getElementById('repository');
        this.listEl = document.getElementById('repo-list');

        this.registerHandlers();

    }

    registerHandlers() {
        this.formEl.onsubmit = event => this.addRepository(event); 
    }



    async addRepository(event) {
        event.preventDefault();

        const repoInput = this.inputEl.nodeValue;

        if(repoInput.length === 0)
            return;

        const response =  await api.get(`/users/${repoInput}`);

        console.log(response);

        this.repositories.push({
            name: 'thaisamorandini',
            description: 'Meu repositório',
            avatar_url: 'https://avatars2.githubusercontent.com/u/13645895?v=4',
            html_url: 'https://github.com/thaisamorandinialgaworks',
        });

        console.log(this.repositories);

        this.render();

    }

    render(){
        this.listEl.innerHTML = '';

        this.repositories.forEach(repo => {
            Unhandled promise rejection TypeError: "repoInput is null"let imgEl = document.createElement('img');
            imgEl.setAttribute('src', repo.avatar_url);

            let titleEl = document.createElement('strong');
            titleEl.appendChild(document.createTextNode(repo.name));

            let descriptionEl = document.createElement('p');
            descriptionEl.appendChild(document.createTextNode(repo.description));

            let linkEl = document.createElement('a');
            linkEl.setAttribute('target', '_blank');
            linkEl.appendChild(document.createTextNode('Acessar'));

            let listItemEl = document.createElement('li');
            listItemEl.appendChild(imgEl);
            listItemEl.appendChild(titleEl);
            listItemEl.appendChild(descriptionEl);
            listItemEl.appendChild(linkEl);

            this.listEl.appendChild(listItemEl);
        });
    }
}

new App();

e um arquivo api.js

import axios from 'axios';

const api = axios.create({
    baseURL: 'https://api.github.com',
});

export default api;

e um arquivo html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Busca de Repositórios Github</title>

    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        li{
            clear: both;
            margin-top: 20px;
        }

        img{
            width: 80px;
            float: left;
            margin-right: 10px;
        }

        strong{
            font-size: 20px;
        }

        p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <form id="repo-form">
        <input  type="text" id="repository"/>
        <button type="submit">Adicionar</button>
    </form>

    <ul id="repo-list">

    </ul>

    <script src="./bundle.js"></script>
</body>
</html>

Que ao clicar no botão ele adiciona no array os repositorios que tenho no github em uma lista , porém esta dando erro de promise eu tratei usando o async e o await mas esta dando erro.

1 Resposta 1

1

Você digitou const repoInput = this.inputEl.nodeValue;, troque para const repoInput = this.inputEl.value;. Acredito que possa ser esse o problema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .