1

localhost:3000 - клиент на React

localhost:8080 - сервер на NodeJS

Я написал вот такой класс для вызова методов API сервера:

import React, { Component } from 'react';

class Server {
  static call(apiMethod, params = {}, httpMethod = 'POST') {
    return fetch('http://localhost:8080/' + apiMethod, {
      mode: 'no-cors',
      method: httpMethod,
      body: params
    });
  }
}

export default Server;

Пытаюсь его использовать:

process() {
  let method = this.state.mode;
  Server.call(method, {
    name: this.state.user,
    password: this.state.password
  }).then(function(response) {
    console.log(response);
  }).then(function(data) {
    console.log(data);
  });
}

В консоли получаю:Пример ответа

Не понимаю, в чем проблема? Как получить ответ от сервера?

2 ответа 2

2

Then возвращает Promise. Когда получен ответ, он отправляется в первый then с объектом response. Уже из response можно забрать тело ответа, используя один из методов.

response.arrayBuffer()
response.blob()
response.formData()
response.json()
response.text()

Эти методы так же возвращают Promise, который необходимо обработать в then или catch. Т.е. функция должна выглядеть примерно так

  Server.call(method, {
    name: this.state.user,
    password: this.state.password
  }).then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  });
6
  • Спасибо, но мне кажется, проблема не в этом. Мне попросту то ли не приходит вовсе, то ли приходит пустой ответ. Не могу понять, почему это происходит. Я попробовал response.blob(), вывел в консоль [[PromiseValue]] size:0 type :"" Commented 12 июл. 2017 в 20:29
  • Что вы ждете в ответ? Файл?
    – Sapphiron
    Commented 13 июл. 2017 в 18:11
  • Нет, должен прийти обычный JSON, но его нет :( Commented 13 июл. 2017 в 18:31
  • Тогда сделайте так, как в моем примере. return response.json(); вернет в then json.
    – Sapphiron
    Commented 13 июл. 2017 в 19:39
  • 1
    mode: 'no-cors', не позволяет читать данные из ответа. Если это cors запрос, измените на mode: 'cors' и добавьте cors заголовки на сервере.
    – Sapphiron
    Commented 13 июл. 2017 в 20:51
0

В общем, удалось разобраться. Спасибо @Sapphiron за помощь.

Вся проблема оказалась в CORS и заголовках сервера. Для того, чтобы все заработало я поправил код на сервере (NodeJS + Express) вот так:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With");
    next();
});

И код на клиенте:

class Server {
  static call(apiMethod, params = {}, httpMethod = 'POST') {
    return fetch('http://localhost:8080/' + apiMethod, {
      headers: {'Content-Type':'application/json'},
      mode: 'cors',
      method: httpMethod,
      body: JSON.stringify(params)
    }).then(function(response) {
      return response.json();
    });
  }
}

Теперь все работает =)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.