react+antd: 页面初始化(fetch+async/await+useEffect)

最新推荐文章于 2025-02-13 14:08:20 发布

原创最新推荐文章于 2025-02-13 14:08:20 发布

· 2.1k 阅读

2 ·

版权

文章标签：

#前端 #javascript #react.js #前端框架 #vscode

在编写页面的时候，需要在一开始请求一些数据用来展示。而useEffect 通常是 React 中发生数据获取的地方。并且在这里我传入的是[token]，也就是说挂载，卸载已经token更新的时候执行，传入[]空数组的时候useEffect会在第一次渲染之后和每次更新之前执行。

由于初始化数据太多，我将fetch封装在另一个文件里，这里叫做init.js并且我只举一个例子说明：

在init.js：

// get list
export async function getList(token) {
  try {
    let allList = await fetch(
      "这里填写url",
      {
        method: "GET", // 请求方式
        headers: {
          "Content-Type": "application/json",
          'Authorization': token // 需要token的情况
        },
      }
    );
    if (allList.ok) {
      return await allList.json(); //  检查是否成功
    }
  } catch (err) {
    console.log(err);
  }
}

在index.js：

import React, { useEffect } from "react";
import "./index.css";
import { getList } from "./init";

const Dashboard = () => {
    useEffect(() => {
        //running  on first render/refresh
        getList(token).then((data) => {
          // 在这里处理数据
        });
    }, [token]);

    return (
        <>

        </>
    );
};

export default Dashboard;

处理完数据之后就可以写入antd的组件里并且展示。