使用React,Express

时间:2019-01-14 19:59:50

标签: reactjs express get fetch

在使用express建立的简单反应中,第一个获取get请求太慢了。遵循正常速度的get请求。请参阅下面日志中的第一个/api/passages/happiness,时间为33+毫秒。

基本操作顺序:

  1. 单击按钮会触发来自本地Express服务器的GET请求
  2. 使用数据设置状态
  3. 通过代理网址调用外部API
  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)
        })
};

config

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()

0 个答案:

没有答案