javascript - ES6 Promise "pending"与 "fulfilled"

Question

美好的一天。需要一些新鲜的眼光。不确定为什么我的 Promise 在浏览器控制台中返回“pending”:

// contact.js (react)
/* trim */
submitForm = (event) => {
    console.log(JSON.stringify(data))
    
    fetch('/contact', {
      method: 'POST',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then( (res) => {
        res.status === 200 ? this.setState({ submitted: true }) : ''
        console.log('submitted: ' + this.state.submitted)
        console.log('status:')
        console.log(res.json())
    })
}
/* trim */


// server.js (node, express)
/* trim */
server.post('/contact', (req, res) => {
    const { emailAddress = '', emailName = '', emailMessage = '' } = req.body
    console.log(req.body) // outputs correct json obj 
    
    let mgData = {
        from: emailName + ' <' + emailAddress + '>',
        to: mailgun_from_who,
        subject: 'From CV Site',
        text: emailMessage,
    }
    const mailgun = require('mailgun-js')({ apiKey: mailgun_api_key, domain: mailgun_domain }) 
    
    /* These work independently 

    mailgun.validate(emailAddress, true, function (error, body) {
        console.log(body) // correctly outputs on server console the json obj returned from mailgun
    }
    mailgun.messages().send(mgData, function (error, body) {
        console.log(body) // correctly outputs on server console the json obj returned from mailgun
    }
    */
    
    /* Now want to promise the validate so if email address does not validate, then 
        I don't want to send the message, but rather return some message to the contact form
        on the browser 
        
       Each call to mailgun returns the correct json obj on the server console, 
        but in the browser's console, the 'status' is 'Promise { <state>: "pending" }'
        So, not sure why that's happening in the code below: */
    
    const validateMsg = new Promise( (resolve, reject) => {
        mailgun.validate(emailAddress, true, function(error,body) {
            if(body) { resolve(body) }
            else { reject(Error(error)) }
        }
    })
    
    // validateMsg.then(successCallback, failureCallback)
    validateMsg.then(
        function(result) {
            console.log('here comes the validate result');
            console.log(result); // validate body
            res.send(result) // should send validate body back to browser as the promise becomes fulfilled. 
        }, function(err) {
            console.log('here comes the validate result');
            console.log(err); // error message
            res.send(err) // should send error message back to the browser as the promise
        }
    )
    
    
})

/* trim */

当我提交表单并观看控制台时，浏览器立即输出数据因为它应该在调用 fetch() 之前。在服务器控制台上也是如此，输出数据obj。然后两者都等待 mailgun 处理验证请求。

一旦验证从 mailgun 返回，浏览器就会输出:

submitted: true

status:

> Promise {: "pending"}

同时服务器控制台输出mailgun返回的json obj。

所以，我不确定为什么从 mailgun 返回的 json obj 没有被发送回浏览器。

Answer 1

res.json() 返回一个 Promise，因此您必须执行以下操作:

submitForm = (event) => {
    console.log(JSON.stringify(data))

    fetch('/contact', {
      method: 'POST',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then( (res) => {
        res.status === 200 ? this.setState({ submitted: true }) : '';
        console.log('submitted: ' + this.state.submitted)
        return res.json();
    }).then((data)=>{
        console.log('status:')
        console.log(data)
    });
}