Служба вызова не идет в реакцию-родной. Получение предупреждения типа «Возможный необработанный отказ от обещания, ошибка ссылки: ответ не определен»

Question

Я новичок, чтобы отреагировать на родную и впервые звоню в сервис. Моя проблема заключается в том, что сервисный вызов не идет и выдается предупреждение типа

Возможно необработанное отклонение обещания, ошибка ссылки: ответ не определен.

Я пытаюсь нажать на функцию loginUser ,

Api. js

const BASE_URL = "http://localhost:8200";

export const api = async (url, method, body = null, headers = {}) => {

    try {
      const endPoint = BASE_URL.concat(url);
      const reqBody = body ? JSON.stringify(body) : null;

      const fetchParams = {method, headers};

      if((method === "POST" || method === "PUT") && !reqBody) {
          throw new Error("Request body required");
      }

      if(reqBody) {
          console.log("ReQBody--->"+reqBody);
          fetchParams.headers["Content-type"] = "application/json";
          fetchParams.body = reqBody;
      }

      const fetchPromise = await fetch(endPoint, fetchParams);
      const timeOutPromise = new Promise((resolve, reject) => {
          setTimeout(() => {
              reject("Request Timeout");
          }, 3000);
      });

      const response = await Promise.race([fetchPromise, timeOutPromise]);

      return response;
    } catch (e) {
      return e;
    }
}

export const fetchApi = async (url, method, body, statusCode, token = null, loader = false) => {
    console.log("In FetchAPi Function");
    try {
        const headers = {}
        const result = {
            token: null,
            success: false,
            responseBody: null
        };
        if(token) {
            headers["securityKey"] = token;
        }

        const response = await api(url, method, body, headers);

        console.log("fetchApi-->>"+response);

        if(response.status === statusCode) {
            result.success = true;

            let responseBody;
            const responseText = await response.text();

            try {
                responseBody = JSON.parse(responseText);
            } catch (e) {
                responseBody = responseText;
            }

            result.responseBody = responseBody;
            return result;

        }

        let errorBody;
        const errorText = await response.text();

        try {
            errorBody = JSON.parse(errorText);
        } catch (e) {
            errorBody = errorText;
        }

        result.responseBody = errorBody;

        console.log("FetchApi(Result)--->>"+result);

        throw result;
    } catch (error) {
        return error;
    }
}

auth.actions. js

export const loginUser = (payload) => {
    console.log("In LoginUser function2");
    return async (dispatch) => {

        <-----**I am not able to enter into this block**------>

        try {
          dispatch({
            type: "LOGIN_USER_LOADING"
          });
          console.log("In LoginUser function3");
          const response = await fetchApi("/login", "POST", payload, 200);
          if(response.success) {
            dispatch({
                type: "LOGIN_USER_SUCCESS",
            });
            dispatch({
                type: "AUTH_USER_SUCCESS",
                token: response.token
            });
            dispatch({
                type: "GET_USER_SUCCESS",
                payload: response.responseBody
            });
            return response;
          } else {
            throw response;
          }

        } catch (error) {
            dispatch({
                type: "LOGIN_USER_FAIL",
                payload: error.responseBody
            });
            return error;
        }
    }
}

В журнале консоли я не вижу ничего на вкладке сети. В эмуляторе android появилось упомянутое предупреждение.

Вкладка «Моя консоль»

Answer 1

Я вижу, что ваш BASE_URL обслуживается с использованием конечной точки http. Вы можете отправлять запросы только к https конечным точкам из реагировать на собственные проекты. Возможный обходной путь - использовать ngrok . Просто скачайте его и запустите ./ngrok http 8200, так как ваш номер порта - 8200. Он предоставит конечную точку HTTPS, заменит вашу BASE_URL этой ссылкой и попытается извлечь данные снова.

Answer 2

Я использую следующий код для вызова API. Посмотрите, сможете ли вы интегрировать его в свой код. это довольно просто:

В классе с именем FetchService:

class FetchService {
  adminAuth(cb, data) {
    console.log('here in the fetch service');
    return fetch(
      baseURL + "login",
      {
        method: "POST",
        headers: {
          Accept: "application/json",
        },
        body: data
      }
      )
      .then((response) => response.json())
      .then(responsej => {
        cb(null, responsej);
      })
      .catch(error => {
        cb(error, null);
      });
  }
}
export default FetchService;

Затем вызовите его из вашего компонента, используя:

import FetchService from './FetchService';
const fetcher = new FetchService;
export default class LoginScreen extends React.Component {
  fetchData() {
    const data = new FormData();
    data.append('username',this.state.username);
    data.append('password',this.state.password);
    fetcher.wastereport((err, responsej) => {
        if(err) {
           //handle error here
        } else {
           //handle response here
        }
      }, data);
    }
}