本地学习axios源码-如何在本地打印axios里面的信息

  1. 下载axios到本地

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

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

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

  1. 下载koa, 搭建一个axios请求地址的服务端

a.初始化package.json

复制代码
mkdir koa-server
cd koa-server
npm init -y

b.安装koa以及一些必要的中间件

复制代码
npm install koa koa-router koa-bodyparser @koa/cors

c.创建服务器,在项目根目录下创建一个 server.js 文件

javascript 复制代码
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());

// 启动服务器
const port = 3009;
app.listen(port, () => {
  console.log(`Koa server is running on http://localhost:${port}`);
});

d.启动koa服务器

javascript 复制代码
node server.js
  1. 把本地的axios引入到react项目中
javascript 复制代码
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打印日志了

相关推荐
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00002 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试