制作 API 处理程序包装器以减少重复答案

【问题标题】：Make API handler wrapper to reduce repetition制作 API 处理程序包装器以减少重复
【发布时间】：2020-10-25 18:43:02
【问题描述】：

现在要调用私有端点，我需要将此代码复制到每个组件。这是混乱的、不可持续的和容易出错的。我将如何将此行为包装在函数调用中并将其放在我想要实用程序去的地方？所以我可以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,
    });

【问题讨论】：

标签： javascript reactjs axios endpoint

【解决方案1】：

您可以创建axios的实例，并且可以在每个组件中重复使用

import axios from 'axios';

//token code sample

const instance = axios.create({
    baseURL: API_URL,
    headers: { Authorization: `Bearer ${token}` }
});

export default instance;

【讨论】：

【解决方案2】：

您可以创建一个新文件并导出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 });

【讨论】：