React Native调用axios导出的API方法返回Promise问题

• 所有被async关键字修饰的函数，返回值永远会被JS包装为Promise对象，直接将函数执行结果传入setDovizData，存入状态的自然是Promise实例，无法直接读取接口返回的真实数据
• 原代码存在三处额外问题：
  • 模块导入路径拼写错误，../api/fethApi和实际的api.js文件名不匹配，会触发模块找不到的运行时报错
  • React的useState更新动作是异步的，刚调用set方法立刻打印状态，拿到的是更新前的旧值
  • 用固定时长setTimeout触发接口请求，时序完全不可控，容易出现组件已卸载但请求才触发的内存泄漏问题

api.js（原有逻辑无需调整，可直接复用） #

import axios from "axios";

async function fetchApi(){
    const response = await axios.get("http://hasanadiguzel.com.tr/api/kurgetir");
    return response.data
} 
export default fetchApi;

main.js（调整请求调用逻辑、导入路径、执行时机） #

import { useState, useEffect } from 'react';
// 注意核对路径，和你本地api.js的实际存放位置保持一致
import fetchApi from "../api/api";

function MainScreen() {
    const [dovizData, setDovizData] = useState([]);

    const getJSON = async () => {
        try {
            // 等待Promise resolve，拿到真实接口返回数据
            const realData = await fetchApi();
            setDovizData(realData);
        } catch (err) {
            console.error('接口请求异常：', err);
        }
    }

    // 组件挂载完成后自动触发请求，替代setTimeout延迟调用
    useEffect(() => {
        getJSON();
    }, [])

    // 监听状态变化，数据更新后再打印就能拿到最新值
    useEffect(() => {
        console.log('接口返回的真实数据：', dovizData);
    }, [dovizData])

    return (
        // 页面渲染逻辑直接遍历dovizData即可
        <div className="stock-list"></div>
    )
}

export default MainScreen;

• 调用async函数时，必须通过await或者.then()链式调用的方式，才能拿到Promise内部包裹的实际业务数据
• 不要在调用setState后立刻读取对应state的值，React的状态更新存在批处理延迟，需要在useEffect监听回调、或者setState的更新回调中读取最新值
• 接口请求类副作用统一放到useEffect中管理，不要用固定延时的定时器触发，避免出现时序异常和内存泄漏
• 导入模块时仔细核对文件路径、文件名拼写，避免低级路径错误

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