在React中，是否有一种方法将过滤器应用于通过提取获得的响应？

Question

使用React 16.12.0。我们有几个接电话的电话

  const handleFormSubmit = (e) => {
    e.preventDefault()
    if (password != passConfirm) {
      //handle password doesn't match password confirm on submit
      setErrors({passConfirm: ["Must match password"]})
      return
    }
    fetch(REACT_APP_PROXY + '/users/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'Authorization': `Token ${sessionStorage.getItem('token')}`},
      body: JSON.stringify({first_name, last_name, username, password, email})
    }).then((response) => {
      if (response.ok) {
        sessionStorage.setItem('token', response['Refresh-Token'])
        setRedirect(true)
      } else {
        setErrors(response)
        console.log(response)
      }
    })

注意我们有一个".ok“响应的部分

sessionStorage.setItem('token', response['Refresh-Token'])

我们将有许多这样的端点，在这些端点中，我们希望提取这个响应头并将其放在本地存储中。是否有一种更优雅的方法将响应过滤器应用于某些端点以实现此行为，而不是我们现在的做法？

Answer 1

我不认为这种使用fetch的可能性，除了猴子修补它自己：

const { fetch: originalFetch } = window;

window.fetch = async (...args) => {
  let [url, options] = args;

  // you can run any request logic here

  const response = await originalFetch(url, options);

  // you can run any response logic here

  return response;
};

但是，一定有人已经这样做了，所以我偶然发现了一个npm库取截，您可以用它来做类似的操作：

import fetchIntercept from 'fetch-intercept';

const unregister = fetchIntercept.register({

  response: function (response) {
    // Do something with the response
    if (response.ok) {
      sessionStorage.setItem('token', response['Refresh-Token'])
    }
    return response;
  },

});

// you can call unregister if you don't want run the interceptor anymore
unregister();    

请注意以下几点:在第一次使用fetch-intercept fetch (第一次)之前，需要要求。

Answer 2

如果您愿意从fetch切换到axios，您可以使用拦截器并在全局处理它。

import axios from 'axios'

axios.interceptors.response.use(response => {
  if (response.headers['Refresh-Token']) {
    sessionStorage.setItem('token', response.headers['Refresh-Token'])
  }

  return response
})

参考资料：https://axios-http.com/docs/interceptors

Answer 3

使用函数。

async function makeHttpCall(successCallbk) {
    var response = await fetch(...arguments);
    if(response.ok) {
        sessionStorage.setItem('token', response['Refresh-Token']);
        successCallback.call();
    } else {
        setErrors(response);
        console.log(response);
    }
}