React Native中出现Possible Unhandled Promise Rejection错误求助

你遇到的错误有两个核心原因，以下是对应的修复方案：

1. GraphQL查询语句不完整 #

getCategories函数中的GraphQL查询未正确闭合，缺失结束的}，导致请求直接失败，Promise被拒绝。

修复后的API类代码：

import { request, gql } from "graphql-request";

const MASTER_URL =
  "https://api-ap-south-1.hygraph.com/v2/clrud3zbv0zjm01w12p1qw5x8/master";

const getSlider = async () => {
  const query = gql`
    query GetSlider {
      sliders {
        id
        name
        image {
          url
        }
      }
    }
  `;
  const result = await request(MASTER_URL, query);
  return result;
};

const getCategories = async () => {
  const query = gql`
    query GetCategory {
      categories {
        id
        name
        icon {
          url
        }
      }
    } # 补上缺失的闭合大括号
  `;
  const result = await request(MASTER_URL, query);
  return result;
};

export default {
  getSlider,
  getCategories,
};

2. 未处理Promise的拒绝情况 #

调用异步API时必须处理可能的错误，否则Promise被拒绝时会触发该警告，以下两种方式二选一即可：

方式一：用.catch()捕获错误 #

import { View, Text } from "react-native";
import Heading from "../../Component/Heading";
import GlobalApi from "../../Utils/GlobalApi";
import React, { useEffect } from "react";

export default function Categories() {
  useEffect(() => {
    getCategories();
  }, []);

  const getCategories = () => {
    GlobalApi.getCategories()
      .then((resp) => {
        console.log("resp", resp.categories);
      })
      .catch((err) => { // 添加错误捕获逻辑
        console.error("获取分类失败:", err);
      });
  };

  return (
    <View>
      <Heading text={"Categories"} isViewAll={true} />
    </View>
  );
}

方式二：用async/await配合try/catch #

import { View, Text } from "react-native";
import Heading from "../../Component/Heading";
import GlobalApi from "../../Utils/GlobalApi";
import React, { useEffect } from "react";

export default function Categories() {
  useEffect(() => {
    getCategories();
  }, []);

  const getCategories = async () => { // 标记为async函数
    try {
      const resp = await GlobalApi.getCategories();
      console.log("resp", resp.categories);
    } catch (err) {
      console.error("获取分类失败:", err);
    }
  };

  return (
    <View>
      <Heading text={"Categories"} isViewAll={true} />
    </View>
  );
}

完成以上两步修复后，该警告会消失，同时也能正确捕获并处理API请求中的错误。

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