javascript - 接受 API 响应的问题：代码未通过承诺或捕获错误

Question

我正在尝试对我在 localhost 上运行的后端服务器进行后调用。我已经使用邮递员测试了 API，并获得了预期响应正文的成功调用。我尝试过使用 promises、fetch 和 axios，但即使服务器返回 200 响应，也没有成功接受调用。

这是 POST 调用的代码：

async doLogin() {
        if(!this.state.email || !this.state.password) {
            return
        }
        this.setState({
            buttonDisabled : true
        })

        console.log('BEGIN POST: login')
        axios.post('/login', {
            email: this.state.email,
            password: this.state.password
        })
        .then((res) => {
            //userStores.isLoggedIn = true
            //userStores.email = res.data.email
            console.log('doLogin success!!!!!!!')
            console.log(res)
        })
        .catch((e) => {
            console.log('API login error: ', e)
        })
        console.log('userStores email: ', userStores.email)
        console.log('END POST: login')

        /*
        try {
            let res = await fetch('http://localhost:3000/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    email: this.state.email,
                    password: this.state.password
                })
            })
            console.log(res)
            let result = await res.json()
            console.log(result)
            if(result && result.success) {
                UserStores.isLoggedIn = true
                UserStores.email = result.email
                alert(result.msg)
            } else if(result && result.success === false) {
                this.resetForm()
                alert(result.msg)
            }
        } catch(e) {
            console.log('doLogin error: ', e)
            this.resetForm()
        }
        
       console.log('BEGIN FETCH: login')
       fetch('/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            email: this.state.email,
            password: this.state.password
        })
       })
        .then((response) => {
            //response.ok ? response.json() : console.log('error!!!!!')
            console.log(response)
        })
        .then((data) => {
            console.log(data)
        })
        .catch((e) => {
            console.log('doLogin error: ', e)
        })
        */
    }

这是我在控制台中看到的： 控制台错误

标签： javascriptreactjspostaxiosfetch

Answer 1

我不得不添加 event.preventDefault() 来解决这个问题。代码：

async doLogin(event) {
        event.preventDefault()
        if (!this.state.email || !this.state.password) {
            return
        }
        this.setState({
            buttonDisabled: true
        })

        console.log('BEGIN POST: login')
        axios.post('/login', {
            email: this.state.email,
            password: this.state.password
        })
            .then((res) => {
                userStores.isLoggedIn = true
                userStores.email = res.data.email
                console.log('doLogin success!!!!!!!')
                console.log(res)
            })
            .catch((e) => {
                console.log('API login error: ', e)
            })
        console.log('userStores email: ', userStores.email)
        console.log('END POST: login')
    }