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;

在此处输入图像描述

Answer 1

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

在此处输入图像描述

Answer 2

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

这是你需要做的。

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

为什么：

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

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