AXIOS 调用在 React-Native 0.63 中给出网络错误

Question

我正在尝试使用常见的 HTTPSERVICE 方法调用 API，奇怪的是，每当连接调试器时我都会收到响应，但是当调试器未连接时 API 会抛出网络错误。

React-Native 版本：0.63.2 axios 版本：0.18.0

const sendRequest = async (url, method, params, data={}, headers = {}) => {
  try {
    const options = {
      url,
      method,
      params,
      data,
      headers,
    }
    console.log(options);
    return await axios(options);
  } catch (err) {
    console.log("request error",err);
    throw err;
  }
}

function* HttpService(url, methodType, params, data, headerParams = {}) {
  try {
    const user = yield select(state => state.ssoReducer.user);
    if (isTokenExpired(user.token)) {
      yield call(getPingFedToken);
    }
    const signIn = yield select(state => state.ssoReducer);
    const authToken = signIn.user?.token;
    const headers = {
      Authorization: `${authToken}`,
      'SWAP-MOBILE-APP': true,
      "Content-Type": "application/x-www-form-urlencoded",
      ...headerParams
    };
    return yield call(sendRequest, url, methodType, params,  data , headers)
  } catch (error) {
    console.log("http error",error);
    if (error.response.status === (403)) {
      yield put({
        type: SSO_FAILURE,
        payload: "Unauthorised alert"
      });
    }
    throw error;
  }
}

export default HttpService;

enter image description here

Answer 1

据我所知，问题不在于这部分代码。 我怀疑你创建headerParams 的方式。

这是你需要做的。

• 检查您在此流程中使用的所有全局方法，例如。 URLSearchParams
• 确保它们存在于web component 层中，该层是与您使用的 react-native 版本相关的 JS 引擎的一部分。

为什么：

因为，当你连接调试器时；您不是在 React Native 的引擎中执行您的 JS 代码，而是在您正在调试的 chrome 的引擎中执行您的 JS 代码。

这是 react-native 世界中的一个已知问题，为避免它，我建议您使用另一个调试器，例如 https://infinite.red/reactotron