1.接口调用

1.1 使用 Fetch API

/src/pages/HomePage

// import React from "react";
import { observer } from "mobx-react";
import { Button } from "antd";

const HomePage = () => {
  const handleClick = () => {
    fetch("http://rap2api.taobao.org/app/mock/314934/userList")
      .then((res) => res.json())
      .then((res) => {
        console.log("res: ", res);
      })
      .catch((e) => {
        console.log("出错了", e);
      });
  };
  return (
    <>
      <div>
        <Button type="primary" onClick={handleClick}>
          发送请求
        </Button>
      </div>
    </>
  );
};
export default observer(HomePage);

1.2 使用第三方库 axios

/src/pages/HomePage

// import React from "react";
import { observer } from "mobx-react";
import { Button } from "antd";
import axios from "axios"; // pnpm install @types/node --save-dev

const HomePage = () => {
  const handleClick = () => {
    axios
      .get("http://rap2api.taobao.org/app/mock/314934/userList")
      .then((res) => {
        console.log("res: ", res);
        console.log("res.data.data: ", res.data.data); // 和fetch不同点
      })
      .catch((err) => {
        console.log("err: ", err);
      });
  };
  return (
    <>
      <div>
        <Button type="primary" onClick={handleClick}>
          发送请求
        </Button>
      </div>
    </>
  );
};
export default observer(HomePage);

2.react中封装axios

项目使用axios, 并封装axios。

附：src别名配置

1.安装node的path包

npm install @types/node --save-dev

2.在tsconfig.json配置

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl":"./", // 先设置基础根路径
    "paths": {    // 配置src别名
      "@": ["src"], 
      "@/*": ["src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include":["src"],
  
  "references": [{ "path": "./tsconfig.node.json" }]
}

3.在vite.config.ts配置

import { defineConfig } from 'vite'
import path from "path";
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [   
      {find: "@", replacement: path.resolve(__dirname, "src")},
    ],
  },
})

参考链接：juejin.cn/post/701885…