如何按顺序使用async/await？修复React Native Kakao登录onPress事件中token未定义问题

一、如何按顺序使用async/await #

要让异步操作按顺序执行，核心是利用await关键字等待前一个异步任务完成后，再执行下一个。咱们记住两个关键点：

• 只有在标记为async的函数内部，才能使用await
• 每一个await都会暂停当前函数的执行，直到后面的Promise状态变为resolved

举个简单的顺序执行例子：

// 模拟两个异步函数
const fetchUserData = async () => {
  // 模拟请求用户数据
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { id: 1, name: "Jack" };
};

const fetchUserOrders = async (userId) => {
  // 模拟根据用户ID请求订单数据
  await new Promise(resolve => setTimeout(resolve, 1000));
  return [{ orderId: "ORD001", amount: 99 }];
};

// 按顺序执行的主函数
const getUserInfoWithOrders = async () => {
  try {
    // 先获取用户数据，等拿到结果再执行下一步
    const user = await fetchUserData();
    console.log("用户数据:", user);
    
    // 用拿到的用户ID获取订单，等订单返回再继续
    const orders = await fetchUserOrders(user.id);
    console.log("用户订单:", orders);
  } catch (error) {
    // 捕获任何一步的错误
    console.error("请求出错:", error);
  }
};

// 调用执行
getUserInfoWithOrders();

这个例子里，fetchUserOrders一定会在fetchUserData完成后才执行，完美实现顺序异步操作。

二、React Native Kakao登录代码错误修复 #

你遇到的token is not defined错误，原因很明确：

1. token变量只在内部的signInWithKakao函数里定义，外部的if(token)根本访问不到这个变量
2. 你定义了signInWithKakao但没有调用它，所以根本没执行登录获取token的逻辑
3. 流程顺序逻辑错误，应该先完成登录拿token，再判断token是否存在，最后获取用户信息dispatch

咱们直接修改你的代码，修复这些问题：

import { getProfile as getKakaoProfile, login } from '@react-native-seoul/kakao-login';
const Kakao = () => {
  const [result, setResult] = useState('');

  // 把Login改成async函数，因为里面要执行异步操作
  const Login = async () => {
    try {
      // 第一步：调用login获取token，await等待结果
      const token = await login();
      setResult(JSON.stringify(token));

      // 第二步：判断token是否存在，存在则获取用户信息
      if (token) {
        const profile = await getKakaoProfile();
        // dispatch用户信息到store
        dispatch({ type: KAKAOLOG_IN_REQUEST, data: profile });
      }
    } catch (error) {
      // 捕获登录或获取信息过程中的错误，方便调试
      console.error("Kakao登录出错:", error);
    }
  };

  return (
    <Container>
      <LoginButton onPress={Login}>
        <Label>카카오 로그인</Label>
      </LoginButton>
    </Container>
  );
};
export default Kakao;

关键修改点说明： #

• 把Login函数标记为async，这样内部可以使用await等待异步操作完成
• 直接在Login里调用login()并await结果，把token拿到当前函数作用域内，后续的if(token)就能正常访问
• 去掉了多余的内部函数封装，简化逻辑让流程更清晰
• 增加了try/catch捕获错误，避免异步操作失败导致应用崩溃，也方便排查问题
• 优化了onPress的写法，直接传Login即可，不需要额外的箭头函数（当然传箭头函数也没问题，但这样更简洁）

这样修改后，点击登录按钮会先完成Kakao登录获取token，token存在的话就会接着获取用户信息并dispatch，不会再出现token is not defined的错误啦。

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