React项目导入自定义Axios函数报错apiClientWithAuthorization.get不是函数

• 你导出的apiClientWithAuthorization是普通函数，不是axios实例对象：这个函数的作用是执行后才会返回携带认证头的axios实例，你直接对函数本身调用.get()方法，该方法自然不存在，因此触发类型错误。
• 补充说明：你同文件导出的apiClient是直接创建完成的axios实例，所以可以直接调用.get()等请求方法，不要混淆两者的类型差异。

1. 调整调用写法 #

调用时先执行apiClientWithAuthorization函数拿到axios实例，再调用请求方法：

// 注意函数名后加了括号，表示执行函数获取返回的axios实例
apiClientWithAuthorization().get('users/' + user.id)

2. 适配React组件规范 #

请求逻辑不要直接写在组件顶层，需要放到useEffect钩子中，避免组件每次渲染都重复触发请求，完整示例如下：

import React, { useEffect } from 'react'
import { apiClientWithAuthorization } from '../../../contexts/ApiClient'
import { useAuth } from '../../../contexts/AuthContext'

const ProfilePage = () => {
  const { user } = useAuth()

  useEffect(() => {
    // 先判断user存在再发起请求，避免空值报错
    if (!user?.id) return
    apiClientWithAuthorization().get('users/' + user.id)
      .then(res => {
        // 处理接口返回结果
        console.log('用户信息：', res.data)
      })
      .catch(err => {
        // 处理请求异常
        console.error('请求失败：', err)
      })
  }, [user]) // 依赖项设为user，user变化时才重新发起请求

  return <div>个人页面内容</div>
}

3. 可选优化：完善工具函数兜底逻辑 #

原apiClientWithAuthorization没有做异常兼容，当本地存储没有token时会出现空指针报错，可以调整为：

function apiClientWithAuthorization() {
  const tokenStr = localStorage.getItem('token')
  const token = tokenStr ? JSON.parse(tokenStr) : {}
  return axios.create({
    baseURL: 'http://localhost:8000/api/v1',
    withCredentials: true,
    headers: {
      'authorization': token?.token ? `Bearer ${token.token}` : ''
    }
  })
}

内容的提问来源于stack exchange，提问作者Dom