如何用Axios发送异步GET/POST请求？如何存储baseURL及配置项？

嘿，这个问题问得特别实用！把Axios的配置项抽离出来，不仅能让代码清爽很多，后续改配置或者维护也方便不少。我给你几个常用的方案，你可以根据项目情况挑：

1. 创建Axios实例（最推荐的方案） #

这种方式灵活性最高，你可以为不同的API模块创建不同的实例，互不干扰。而且把所有配置集中管理，改起来也省心：

// 先集中定义你的基础配置
const apiClient = axios.create({
  baseURL: 'https://*****.io/index.php?/api/v2', // 抽离baseURL，后续请求只需要写相对路径
  headers: {
    'Content-Type': 'application/json'
  },
  auth: {
    username: '************',
    password: '*********************'
  }
});

// 然后用这个实例来发起请求，先GET再POST的逻辑也能清晰体现
async function getJSONAsync() {
  try {
    // 先发送GET请求，只需要传相对路径
    const getResponse = await apiClient.get('/get_case/5892');
    console.log('GET请求响应:', getResponse);

    // 等GET完成后，再发送POST请求（这里假设你要提交的数据是postData）
    const postData = { 
      // 你的POST请求数据示例
      caseId: 5892,
      status: 'completed'
    };
    const postResponse = await apiClient.post('/some_post_endpoint', postData);
    console.log('POST请求响应:', postResponse);
  } catch (error) {
    // 统一处理所有请求的错误
    console.error('请求出错:', error);
  }
}

2. 全局配置Axios（适合全项目统一用一套配置） #

如果你的整个项目所有API请求都用相同的baseURL、headers和auth信息，那直接全局配置Axios更省事：

// 在项目的入口文件（比如main.js、index.js）里配置全局默认值
axios.defaults.baseURL = 'https://*****.io/index.php?/api/v2';
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.defaults.auth = {
  username: '************',
  password: '*********************'
};

// 之后直接用axios发起请求就行
async function getJSONAsync() {
  try {
    const getResponse = await axios.get('/get_case/5892');
    console.log('GET请求响应:', getResponse);

    const postResponse = await axios.post('/some_post_endpoint', { key: 'value' });
    console.log('POST请求响应:', postResponse);
  } catch (error) {
    console.error('请求出错:', error);
  }
}

3. 敏感配置用环境变量（生产环境必备） #

特别注意：生产环境绝对不能把用户名、密码这类敏感信息硬编码在代码里！最好的做法是用环境变量来存储这些内容：

比如在项目根目录创建一个.env文件（记得把它加入.gitignore，不要提交到代码仓库）：

# .env 文件内容
REACT_APP_API_BASE_URL=https://*****.io/index.php?/api/v2
REACT_APP_API_USERNAME=************
REACT_APP_API_PASSWORD=*********************

（如果是Vue项目，变量名要以VUE_APP_开头；Node.js项目直接用process.env即可）

然后在代码里引用这些环境变量：

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  headers: {
    'Content-Type': 'application/json'
  },
  auth: {
    username: process.env.REACT_APP_API_USERNAME,
    password: process.env.REACT_APP_API_PASSWORD
  }
});

这样不同环境（开发、测试、生产）可以用不同的.env文件，不用修改代码就能切换配置，安全性也更高。

另外，你原来的代码用了await又嵌套了.then/.catch，其实用try/catch包裹await的写法会更简洁易读，我上面的示例都改成了这种风格，你可以参考~

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