无法从使用授权的axios的API获得响应

Question

我试图从服务器上拉取一个食谱列表，该服务器期望从本地存储获得授权令牌。我创建了一个本地axiosAnd Auth文件，因为我将从API中访问多个endpoint。我的授权文件看起来像这样...

 import axios from 'axios';

const axiosWithAuth = () => {
  const token = localStorage.getItem('token');

  return axios.create({
    baseURL: 'https://secret-fam-recipes.herokuapp.com/api',
    headers: { Authorization: token }
  });
};

export default axiosWithAuth

然后，我将此axios调用与Redux操作一起使用，以便返回的数据更新项目的存储。我尝试过用两种不同的方式调用API。一个异步等待，看起来像这样。。。

export const listRecipes = () => async (dispatch) => {
    dispatch({type: actions.FETCH_RECIPES_REQUEST});
    try {
        const {recipes} = await axiosWithAuth.get("/recipes")
        console.log("recipes", recipes)
        dispatch({type: actions.FETCH_RECIPES_SUCCESS, payload: recipes})
    } catch(error) {
        dispatch({type: actions.FETCH_RECIPES_FAILURE,
            payload:
                error.resposne && error.response.message
                ? error.response.message
                : error.message
            })
    }
}

另一个没有异步等待，看起来像这样。。。

export const listRecipes = () => (dispatch) => {
    dispatch({type: actions.FETCH_RECIPES_REQUEST});
    axiosWithAuth.get("/recipes")
    .then(data => {
        return dispatch({type: actions.FETCH_RECIPES_SUCCESS, payload: data})
    })
    .catch(error => {
        dispatch({type: actions.FETCH_RECIPES_FAILURE,
            payload:
                error.resposne && error.response.message
                ? error.response.message
                : error.message
            })
    })
}

我也像这样导入了我的依赖项。。。

import axiosWithAuth from "../utils/axiosWithAuth";
import * as actions from "../constants/recipeConstants";

当我尝试异步等待操作时，服务器会返回500个错误。当我使用非异步等待操作时，我得到一个类型错误，当我试图加载页面时，说以下内容。.

TypeError: _utils_axiosWithAuth__WEBPACK_IMPORTED_MODULE_0__.default.get is not a function

很明显，我的操作或axiosWithAuth格式有问题。我已尝试将axiosWithAuth函数更改为使用auth关键字而不是标题，但它仍然无法工作。我不确定我的行为是否写得不正确，或者是否有其他东西我应该看看。任何帮助都将不胜感激。非常感谢。

Answer 1

更简单的方法是不从自定义axios返回函数，而是返回实际的axios实例。因为你只是设置一个标题，你可以这样做：

import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: 'https://secret-fam-recipes.herokuapp.com/api'
});

axiosInstance.interceptors.request.use((config) => {
      config.headers['Authorization'] = localStorage.getItem('token');
      return config;
});

export default axiosInstance;

然后，只需导入并使用axios实例：

import axios from './custom-axios';

axios.get('/url-here');

Answer 2

axiosAnd Auth是一个函数，所以我应该在我的操作中调用这个函数。正确的线是

const {recipes} = await axiosWithAuth().get("/recipes")