反應 - 如何將 function 傳遞給 axios api 調用

Question

我試圖避免重復檢索訪問令牌並將其傳遞給我的 axios api 的部分代碼。

I have created a separate file that contains a function that performs the retrieving of the token but when i pass that function method to axios api, it does not work. 這意味着沒有從 localStorage 中檢索令牌。 我哪里錯了？

我的GET API 方法

import tokenConfig from "./token"
...

_refreshRecords() {
    axios
      .get("http://localhost:8000/api/accounts/employees_hr/", tokenConfig) <-- PASSING HERE
      .then((response) =>
        this.setState({
          employeesDetail: response.data.results,
        })
      );
    }

我的令牌文件

// GET TOKEN
export default tokenConfig =>{

  // Headers
  const config = {
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
    },
  };

  // If there token, add to headers config
  if (localStorage.getItem("access")) {
    config.headers["Authorization"] = `JWT ${localStorage.getItem("access")}`;
  }

  return config;
};

Answer 1

您忘記在tokenConfig中執行_refreshRecords 。

考慮使用 Axios 提供的內置攔截器。 我通常在我的 API Axios 實例中執行此操作。

// /services/api/index.js
import Axios from 'axios';

const api = Axios.create({
    baseURL: 'http://localhost:8000/api',
    timeout: 30000,
    headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
    }
});

api.interceptors.request.use(
    config => {
        
        if (localStorage.getItem("access")) {
            config.headers.Authorization = `JWT ${localStorage.getItem("access")}`;
        }

        return config;
    },
    error => Promise.reject(error)
);

export default api;

要在其他組件中使用它，您可以導入../services/api並使用它：

import API from '../services/api';


class App extends Component {

    _refreshRecords() {
         API.get('/accounts/employees_hr/').then(response =>
              this.setState({
                   employeesDetail: response.data.results,
              })
         );
    }

}

Answer 2

您必須執行tokenConfig function。 否則，您將傳遞 function 而不是get() function 期望的 object。

axios
  .get("http://localhost:8000/api/accounts/employees_hr/", tokenConfig())
  .then((response) =>
    this.setState({
      employeesDetail: response.data.results,
    })
  );