Как показать успешный ответ от сервера узла на каркасе реагировать на избыточность

Question

Я делаю демо-приложение-редукс для базовых знаний о редуксе, и его сервер сделан на nodeJS. Я сделал простую форму, которая будет отправлена, и ответ сервера будет res.send('FORM SAVED'). Во внешнем интерфейсе я делаю запрос на публикацию, но не могу видеть ответ, который возвращается, будь то ответ об успешном выполнении.

Контроллер моего сервера, который отвечает, когда сохраняются данные формы.

export const postData = (req, res) => {
    let p = new PostData();
    p.name = req.body.name;
    p.emp_id = req.body.emp_id;
    p.age = req.body.age;
    p.dept = req.body.dept;
    p.phone = req.body.phone;
    p.gender = req.body.gender;
    p.save(((err) => {
      if (err){res.send(`Error in uploading: ${err}`);}
      else {res.send('Form saved');}
    }));
}

Это мое действие: -

 export const createPost = postData => dispatch => {

  fetch(`${Config.address}/post`, {
    method: 'POST',
    headers:{
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)
  })
  .then((post) => {
    console.log('post:', post);
    dispatch({
    type: NEW_POST,
    payload: post
  })
  })
}

Вот как я вызываю это в компоненте после нажатия кнопки Отправить: -

onSubmit = (e) => {
    e.preventDefault();

      let postData = {
        name: this.state.name,
        emp_id: this.state.emp_id,
        dept: this.state.dept,
        gender: this.state.gender,
        age: this.state.age,
        phone: this.state.phone
      }

      this.props.createPost(postData);
  }

Я хочу получить строку ответа («Форма сохранена»), но я не знаю, как это прочитать. Кто-нибудь может помочь? Заранее спасибо

Answer 1

fetch возвращает необработанный объект ответа. Чтобы получить ожидаемые данные, вы должны вызвать метод .json() для raw объекта ответа, который возвращается fetch, как показано ниже:

export const createPost = postData => dispatch => {
  fetch(`${Config.address}/post`, {
    method: 'POST',
    headers:{
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)
  })
  .then(response => response.json()) // add this line
  .then((post) => {
    console.log('post:', post); // you should get an object with `Form saved` or something similar to it
    dispatch({
      type: NEW_POST,
      payload: postData // replace it to the input parameter
    })
  })
}

Использование async/await становится более читабельным:

export const createPost = (postData) => async (dispatch) => {
  // send postData to server
  const rawResponse = await fetch(`${Config.address}/post`, {
    method: 'POST',
    headers:{
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)
  });

  // we are done with server but we need one more step

  // turn a raw response to readable JS object
  const message = await rawResponse.json()

  // message from server response 
  console.log('Message ', message);

  // store same object as we sent to server in redux store
  dispatch({ type: NEW_POST, payload: postData });
}

Надеюсь, это поможет