1. 下載axios到本地

git clone https://github.com/axios/axios.git

2. 下載react項目, 用vite按照提示命令配置一下vite + react + ts項目

npm create vite my-vue-app --template react

3. 下載koa, 搭建一個axios請求地址的服務(wù)端

a.初始化package.json

mkdir koa-server
cd koa-server
npm init -y

?b.安裝koa以及一些必要的中間件

npm install koa koa-router koa-bodyparser @koa/cors

c.創(chuàng)建服務(wù)器,在項目根目錄下創(chuàng)建一個 server.js 文件

const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const cors = require('@koa/cors');const app = new Koa();
const router = new Router();// 使用中間件
app.use(cors());
app.use(bodyParser());// 定義路由
router.get('/api/data', async (ctx) => {ctx.body = { message: 'Hello from Koa!' };
});router.post('/api/data', async (ctx) => {const data = ctx.request.body;ctx.body = { received: data };
});// 使用路由
app.use(router.routes()).use(router.allowedMethods());// 啟動服務(wù)器
const port = 3009;
app.listen(port, () => {console.log(`Koa server is running on http://localhost:${port}`);
});

d.啟動koa服務(wù)器?

node server.js

?4. 把本地的axios引入到react項目中

import React, { useEffect, useState } from 'react';import axios from '../../axios/lib/axios';console.log('axios:::', axios);export default function Home() {const [message, setMessage] = useState<string>('');const [postData, setPostData] = useState<any>(null);useEffect(() => {// GET 請求axios.get('http://localhost:3009/api/data').then((response: any) => {console.log('response:::', response);setMessage(response.data.message);}).catch((error: any) => {console.error('Error fetching data:', error);});}, []);const handlePost = () => {// POST 請求axios.post('http://localhost:3009/api/data', { data: 'Hello from React!' }).then((response: any) => {console.log('response:::', response);setPostData(response.data.received);}).catch((error: any) => {console.error('Error posting data:', error);});};return (<div className="App"><h1>{message}</h1><button onClick={handlePost}>Send POST Request</button>{postData && <p>Received: {postData.data}</p>}</div>)
}

?就可以在axios文件中console打印日志了

?