本地学习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打印日志了

相关推荐
在钱塘江5 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码6 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说10 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015511 分钟前
最常用的JS加解密场景MD5
前端
Hilaku12 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球18 分钟前
mo契官网建设与SEO实践
前端
神仙别闹24 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c38 分钟前
react当中的this指向
前端·javascript·react.js
Java水解1 小时前
Web API基础
前端
闲鱼不闲1 小时前
实现iframe重定向通知父级页面跳转
前端