TypeScript中如何让createToken函数返回axios POST请求获取的Token值

嘿，你遇到的是异步代码的经典坑——当前你的createToken函数里，axios的POST请求是异步执行的：函数会先直接返回那个固定字符串'TOKEN SHOULD BE RETURNED HERE'，等请求完成、你拿到obj.access_token的时候，函数早就执行完了，自然没法把token返回出去。

下面给你两种最常用的解决方案：

方案一：用async/await（推荐，代码更易读） #

把函数改成异步函数，用await等待axios请求完成，这样就能同步拿到响应结果并返回token：

async createToken(): Promise<string> {
  try {
    // 用await等待请求完成，直接拿到响应对象
    const response = await axios.post(BASE_URL, body, { headers });
    // 注意：axios会自动把JSON响应解析成JavaScript对象，不用手动stringify再parse！
    const token = response.data.access_token;
    console.log(token);
    return token;
  } catch (err) {
    console.error('请求Token失败:', err);
    // 可以根据需求抛出错误，或者返回一个默认值（比如空字符串）
    throw new Error('Failed to fetch access token');
  }
}

调用方式 #

因为createToken现在是异步函数，调用它的时候也要用await（必须在async函数里），或者用.then()：

// 示例：在另一个async函数里调用
async function useToken() {
  try {
    const token = await createToken();
    console.log('拿到Token啦:', token);
    // 这里用token做后续操作，比如请求接口
  } catch (err) {
    console.error('处理Token失败:', err);
  }
}

// 或者用.then()链式调用
createToken()
  .then(token => {
    console.log('拿到Token啦:', token);
  })
  .catch(err => console.error(err));

方案二：直接返回Promise #

如果你不想用async/await语法，也可以让函数直接返回一个Promise，在请求的then回调里resolve token：

createToken(): Promise<string> {
  return axios.post(BASE_URL, body, { headers })
    .then(response => {
      const token = response.data.access_token;
      console.log(token);
      return token; // 这里返回的值会成为Promise的resolve结果
    })
    .catch(err => {
      console.error('请求Token失败:', err);
      throw new Error('Failed to fetch access token'); // 抛出错误，让调用方捕获
    });
}

关键知识点 #

1. HTTP请求是异步操作，不可能在同步函数里直接返回异步结果，必须用Promise来处理异步流程。
2. async/await是Promise的语法糖，本质还是基于Promise工作的，只是让异步代码看起来像同步代码。
3. axios默认会自动解析JSON格式的响应，所以你之前的JSON.stringify+JSON.parse是多余的，直接用response.data就能拿到解析后的对象。

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