Реакция на родную каждый следующий пост - PullRequest
0 голосов
/ 20 февраля 2019

У меня есть следующая проблема:

Каждый следующий вызов POST получает ошибку: Сетевая ошибка

Например, я запускаю приложение и нажимаю кнопку «подписаться», которая затем отправляетПозвоните и получите ответ, и все работает.Но затем я нажимаю «отписаться», что также отправляет еще один вызов POST, но на этот раз я получаю сообщение об ошибке сети.

Бэкэнд-парень говорит мне, что для запроса нет тела, и запрос был прерван.Если бы я нажал кнопку несколько раз, то все эти запросы не сработали бы.

Если бы я перезапустил приложение или подождал несколько минут, то 1-е сообщение сработало, но сообщения после этого не сработали бы

Я использую реактивную нативную с экспо

Это мой метод публикации:

 export const apiPost = (endpoint, token, data) => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'post',
      url: BASE_URL + endpoint,
      headers: {
        'content-type': 'application/json',
        'authorization': token
      },
      data: data
    }).then(res => resolve(res.data))
      .catch(err => reject(err))
 });
}

Если кто-то хочет знать, как данные, передаваемые в POST, выглядят

const data = {
  name: "Some value"
}

Это мой package.json

"dependencies": {
  "@expo/samples": "2.1.1",
  "axios": "^0.18.0",
  "expo": "^30.0.0",
  "moment": "^2.24.0",
  "react": "16.3.1",
  "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
  "react-native-camera": "^1.2.0",
  "react-native-collapsible": "^1.3.0",
  "react-native-custom-picker": "^0.3.1",
  "react-native-datepicker": "^1.7.2",
  "react-native-keyboard-aware-scroll-view": "^0.7.2",
  "react-native-qrcode-svg": "^5.1.1",
  "react-native-root-toast": "^3.0.2",
  "react-native-search-filter": "^0.1.4",
  "react-native-segmented-control-tab": "^3.3.1",
  "react-native-simple-dialogs": "^1.1.0",
  "react-native-simple-radio-button": "^2.7.3",
  "react-native-svg": "^6.5.2",
  "react-native-svg-charts": "^5.2.0",
  "react-native-tab-view": "^1.0.2",
  "react-navigation": "^2.9.3",
  "react-redux": "^5.1.0",
  "redux": "^4.0.1",
  "redux-thunk": "^2.3.0",
  "socket.io-client": "2.0.4",
  "whatwg-fetch": "^2.0.4"

ОБНОВЛЕНИЕ

Я сделал тестовую функцию для отправки запроса POST на https://reqres.in/ ион отлично работает даже по многим запросам.Так что я думаю, что есть проблема в back-end, предоставленной мне.Хотя в приложении Angular серверная часть отлично работает

UPDATE 2

Проблема была с http2 на сервере.Смотрите здесь: Реагирующий POST-запрос в Android через https возвращает сетевую ошибку

1 Ответ

0 голосов
/ 20 февраля 2019

Это может быть связано с тем, что вы возвращаете Promise, который может понадобиться в реальной вызывающей функции (хотя и не уверен в этом).

Попробуйте сделать это, используя async ...await , что намного проще

export const apiPost = async (endpoint, token, data) => {
  const data = {
    name: "Some value"
  };
  try {
      const res = await axios({
          method: 'post',
          url: BASE_URL + endpoint,
          headers: {
              'content-type': 'application/json',
              'authorization': token
          },
          data
      });
      return res.json();
  }
  catch(err) {
    console.error(err);
    return err.message;
  }
}

Вот решение CodeSandBox в React (на случай, если я удалю его в будущем) -

import React, { useState } from "react";
import ReactDOM from "react-dom";
import useDidMount from "@rooks/use-did-mount";

const fakePost = async () => {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      body: JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    });
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
    return err.message;
  }
};

function App() {
  const [fakePostData, setFakePostData] = useState({});
  useDidMount(async () => {
    const res = await fakePost();
    console.log(res);
    setFakePostData(res);
  });

  return (
    <div className="App">
      <h1>Post fetch example</h1>
      <p>{JSON.stringify(fakePostData)}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
...