制作API处理程序包装器以减少重复
制作API处理程序包装器以减少重复
提问于 2020-10-26 02:43:03
现在，要调用私有端点，我需要将此代码复制到每个组件。这是混乱的，不可持续的，容易出错的。我如何将此行为包装在函数调用中，并将其放在我想要的实用程序的位置？这样我就可以import { ApiUtil } from ..和ApiUtil.post('/user', user)了
import axios from 'axios';
import { useAuth0 } from '../../../react-auth0-spa';
const authContext = useAuth0();
const {
getTokenSilently
} = authContext;
const token = await getTokenSilently();
await axios({
method: 'post',
headers: {
Authorization: `Bearer ${token}`,
},
url: '/user',
data: user,
});回答 2
Stack Overflow用户
发布于 2020-10-26 02:46:25
您可以创建一个axios实例，并可在每个组件中重用
import axios from 'axios';
//token code sample
const instance = axios.create({
baseURL: API_URL,
headers: { Authorization: `Bearer ${token}` }
});
export default instance;Stack Overflow用户
发布于 2020-10-26 02:49:52
您可以创建一个新文件并导出an instance of axios
// ApiUtil.js
import axios from 'axios';
import { useAuth0 } from '../../../react-auth0-spa';
const authContext = useAuth0();
const { getTokenSilently } = authContext;
const token = await getTokenSilently();
export default axios.create({
headers: {
Authorization: `Bearer ${token}`,
},
});然后，您可以这样使用它：
import ApiUtil from './ApiUtil';
// …
await ApiUtil.post('/user', { user });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64527450
复制相关文章
相似问题
腾讯云开发者
