在React中，是否有一种方法可以将过滤器应用于通过fetch获得的响应?

Question

使用React 16.12.0。我们有许多类似于

的fetch调用

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除了猴子修补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库的fetch-intercept，你可以使用它来做类似的事情:

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之前需要fetch-intercept.

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);
}
}