Начальная загрузка запроса get медленная с использованием React, Express - PullRequest
Новая
       41

Начальная загрузка запроса get медленная с использованием React, Express

0 голосов
/ 14 января 2019

В простой реакции, настроенной с помощью express, самый первый запрос на получение get слишком медленный. Запросы на получение после этого кажутся нормальными. Смотрите первый /api/passages/happiness в журнале ниже со временем 33+ миллисекунды.

Базовый порядок операций:

  1. нажатие кнопки запускает запрос GET с локального сервера Express
  2. устанавливает состояние с данными
  3. вызывает внешний API через URL прокси
  4. отображает эти данные в модальном

Я новичок в вопросах скорости / производительности. С чего начать устранение неполадок? Или какой шаг может замедлить его?

1]

 // onClick of button, these steps occur:
handleOpen = () => {

    // 1. call express api, returns a few lines of text 
    baseService.get(`/api/passages/${this.props.document}`)
        .then(data => {
            this.setState({
                reference: data.reference,
                abbr: data.abbr,
                start: data.start,
                end: data.end
            })
        })
        .catch(err => {
            alert("Verse failed to load")
            console.log(err)
        })

        // 2. call external api, returns a few lines of text
        .then(() => {
            const url = `https://bibles.org/v2/chapters/eng-NASB:${this.state.abbr}/verses.js?start=${this.state.start}&end=${this.state.end}`
            fetch(proxyurl + url, {
                headers: new Headers({ 'Authorization': 'Basic ' + window.btoa(`${BIBLE_API_KEY}: x`) }),
                redirect: "follow",
            })
                .then(res => res.json())
                .then(contents => {
                    let versearray = contents.response.verses
                    versearray.forEach(verse => {
                        var regex = /(<([^>]+)>)|[0-9]/ig;
                        let versetext = verse.text.replace(regex, "");
                        let alltext = this.state.content.concat(' ', versetext)
                        this.setState({
                            content: alltext,

                            // 3. open modal displaying few lines of text
                            open: true
                        })
                    })
                })
        })
        .catch(err => {
            alert("Your Verse Failed to Load");
            console.log(err)
        })
};

1026 * конфигурация * 

let mongoose = require('mongoose');

const server = '127.0.0.1:27017'
const database = 'verseapp';


class Database {
    constructor() {
        this._connect()
    }

    _connect() {
        mongoose.connect(`mongodb://${server}/${database}`, {
            useNewUrlParser: true,
            useCreateIndex: true,
        })
            .then(() => {
                console.log('Database connection successful')
            })
            .catch(err => {
                console.log('Database connection error', err)
            })
    }
}

module.exports = new Database()
...