在同一个Fetch POST API调用中返回JSON

时间:2017-05-03 20:34:10

标签: javascript node.js mongodb react-native fetch-api

我目前有一个基于Node.js的Express框架构建的Web应用程序。

我现在正在构建一个需要执行用户登录的React Native应用程序。为此,我创建了一个mongo-helpers.js文件,它只是执行对localhost:3000 / api的api调用并返回JSON。到目前为止,我在进行GET调用和接收数据方面没有任何问题,但这是我的问题以及我想要做的事情:

目标:按下“登录”按钮后(在React Native应用程序中)对localhost:3000 / api / login进行API调用,传递username和{{1}进入password API body请求的fetch。如果用户已登录,请发回用户的Mongo文档。

问题:虽然我能够发出API Post请求并成功登录用户,但我无法使用POST

发回用户的Mongo文档

这是我的代码:

Express WEB APP: routes / api / api.js

res.json(user)

React Native App: mongo-helpers.js

// POST and login user
router.post('/login', (req, res) => {
  user.findOne({name: req.body.name, password: req.body.password})
    .then((user) => {
      console.log(user);
      res.json(user)
    })
    .catch((error) => res.json(error))
});

我正在记录// Returns a promise // if login succeeds then return the user // if login fails return error exports.login = (name, password) => { return new Promise( (resolve, reject) => { fetch(APP_SERVER_URL+'/login', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({name, password}) }).then((response) => { console.log('Response', response); }).then((data) => { console.log(data); // returns undefined :( resolve(data); }).catch((error) => { console.log('Error', error); // no error is returned reject(error); }) } ) }; ,这就是它所显示的内容。其中没有用户数据

image of response object returned after POST request

2 个答案:

答案 0 :(得分:2)

你需要调用json函数,它将返回一个promise,试试:

fetch(APP_SERVER_URL+'/login', {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({name, password})
          }).then((response) => {
            response.json().then((data) => {
               console.log(data)
          });
          }).catch((error) => {
            console.log('Error', error); // no error is returned
            reject(error);
          })
        }

https://developer.mozilla.org/en-US/docs/Web/API/Body/json

答案 1 :(得分:0)

先使用return response,然后再回调。