React Native Expo中TSX实现Axios拦截器报错：axios.create未定义

核心原因 #

你在TSX文件中使用require('axios')导入时，没有正确获取到Axios的默认导出对象，导致axios.create不存在。

解决步骤 #

1. 更换正确的导入方式 #

将原来的const axios = require('axios');替换为ES模块的导入语法：

import axios from 'axios';

在React Native Expo的TSX环境中，推荐使用ES模块的import语法，这样能正确获取Axios的完整导出对象，包含create方法。

2. （可选）清理依赖缓存 #

如果修改导入后问题依然存在，执行以下步骤重置依赖：

• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件
• 重新安装依赖：npm install（或yarn install）
• 清除Expo缓存并重启开发服务器：expo start -c

修改后的完整代码 #

import { _retrieveData } from "./AsyncStorage";
import axios from 'axios';
const configData = require('../config/config.json');

const userApi = axios.create();

userApi.defaults.timeout = 4000;

userApi.interceptors.request.use(async (config: any) => {
    const token = await _retrieveData('token');
    config.headers.common = { 'Authorization': `Bearer ${token}` }
    return config;
}, (error: any) => {
    return Promise.reject(error);
});

export default userApi;

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