React Native Http 拦截器

Question

像大多数应用程序一样，我正在编写的应用程序需要在 http response/requests 处理程序中使用很多类似的逻辑。例如，我必须始终检查刷新令牌并将它们保存到 AsyncStorage，或者始终将 headers 设置为我的 AuthService headers，甚至检查 404 以路由到相同的 404 错误页面。

我非常喜欢 Angular 中的 http 拦截器；您可以在其中定义和注册一个 http 拦截器以（没有更好的术语）拦截所有 http 流量，然后运行组合的通用逻辑。

我有两个主要问题：

由于在 React Native 中，我们定义了这些独立的组件，我们是否应该不首先提取通用的 http 逻辑以保留 re-usability组件？
如果我们不想重复代码，React Native（第一个）或 Objective-C/Swift（第二个）是否有办法拦截 http 流量并为请求提供处理程序？

Answer 1

我不确定我是否正确理解了这个问题，或者您是否在寻找更多魔法，但听起来您只是想要 XMLHttpRequest（或 fetch API ).将其包装在 class 或函数中，您可以随时随地做任何想做的事。这是一个包含在承诺中的 xhr 示例：

function request(url, method = "GET") {
  const xhr = new XMLHttpRequest();

  // Do whatever you want to the xhr... add headers etc

  return new Promise((res, rej) => {
    xhr.open(method, url);
    xhr.onload = () => {
      // Do whatever you want on load...
      if (xhr.status !== 200) {
        return rej("Upload failed. Response code:" + xhr.status);
      }
      return res(xhr.responseText);
    };
    xhr.send();
  });
}

然后你可以随时使用它来进行 HTTP 调用...

request("http://blah.com")
  .then(data => console.log(`got data: ${data}`))
  .catch(e => console.error(`error: ${e}`));

Answer 2

如果你只想拦截xhr，你考虑过axios吗？我正在使用 axios 拦截器 - https://www.npmjs.com/package/axios 到目前为止它似乎有效。

这里是示例代码

import axios from 'axios';
import promise from 'promise';

// Add a request interceptor 
var axiosInstance = axios.create();

axiosInstance.interceptors.request.use(function (config) {
  // Do something before request is sent 
  //If the header does not contain the token and the url not public, redirect to login  
  var accessToken = getAccessTokenFromCookies();

  //if token is found add it to the header
  if (accessToken) {
    if (config.method !== 'OPTIONS') {
          config.headers.authorization = accessToken;
        }
  }
  return config;
}, function (error) {
   // Do something with request error 
   return promise.reject(error);
});

export default axiosInstance;

然后在你想要进行 xhr 调用的地方导入这个 axiosInstance

Answer 3

可以使用react-native-easy-app更方便的发送http请求和制定拦截请求

import {XHttpConfig} from 'react-native-easy-app';

XHttpConfig.initHttpLogOn(true) // Print the Http request log or not
            .initBaseUrl(ApiCredit.baseUrl) // BaseUrl
            .initContentType(RFApiConst.CONTENT_TYPE_URLENCODED)
            .initHeaderSetFunc((headers, request) => {
               // Set the public header parameter here
            })
            .initParamSetFunc((params, request) => {
               // Set the public params parameter here
            })
            .initParseDataFunc((result, request, callback) => {
               let {success, json, response, message, status} = result;
               // Specifies the specific data parsing method for the current app
        });

* Synchronous request
const response = await XHttp().url(url).execute('GET');
const {success, json, message, status} = response;


* Asynchronous requests
XHttp().url(url).get((success, json, message, status)=>{
    if (success){
       this.setState({content: JSON.stringify(json)});
    } else {
       showToast(msg);
    }
});

React Native Http 拦截器

React Native Http Interceptor

javascript

reactjs

swift

react-native