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

Posted 2023-03-12

【中文标题】AXIOS 调用在 React-Native 0.63 中给出网络错误

【英文标题】：AXIOS call giving Network Error in React-Native 0.63

【发布时间】：2021-05-25 11:57:23

【问题描述】：

我正在尝试使用常见的 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

【参考方案1】：

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

这是你需要做的。

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

为什么：

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

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

【讨论】：

尝试安装 reatcotron，api 仍然失败。我们将 url 更改为 http 而不是 https，它开始工作了！不知道为什么 https 不起作用。有什么想法吗？