在 React 项目中使用 Axios

发表于 2025-04-06 | 分类于 web前端 | 暂无评论

安装 Axios
首先，在项目下安装 Axios 依赖：
```
npm install axios
```
或者：
```
yarn add axios
```

在组件中直接调用 Axios
在 React 的函数组件中，你可以直接使用 Axios 进行数据请求。通常我们会结合 React 的 useState 和 useEffect 实现数据的获取和管理，例如：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>发生错误...</div>;

  return (
    <div>
      <h1>数据展示</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

这种方式简单直观，适用于单个组件内部的数据请求需求。

封装 Axios 实例
为了在整个项目中统一管理和复用 Axios 的配置（如基础 URL、超时配置以及请求与响应拦截器），可以创建一个 Axios 实例。例如：

// axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '<https://api.example.com>',
  timeout: 5000,
});

// 请求拦截器：如添加认证 token
axiosInstance.interceptors.request.use(
  config => {
    // Modify config before request is sent, e.g.,添加token
    // config.headers.Authorization = 'Bearer yourToken';
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器：统一处理响应
axiosInstance.interceptors.response.use(
  response => response,
  error => Promise.reject(error)
);

export default axiosInstance;

然后在你的组件中引入这个实例，而不是直接使用 Axios，通过这种方式可以确保全局请求配置的一致性和便于维护。

结合 React Context 和 Provider
如果你的应用中有很多组件都需要发起请求，并且希望在统一配置（例如统一注册请求拦截器）后进行调用，可以使用 React 的 Context 来组织 Axios 实例。通过 Provider 将配置好的 Axios 实例传递给整个组件树，以便在各个组件中通过 useContext 取得该实例，这也是符合 React Hooks 思想的一种方式。例如：

// AxiosContext.js
import React, { createContext } from 'react';
import axiosInstance from './axiosInstance';

export const AxiosContext = createContext(axiosInstance);

export const AxiosProvider = ({ children }) => {
  return (
    <AxiosContext.Provider value={axiosInstance}>
      {children}
    </AxiosContext.Provider>
  );
};

然后在组件中使用：

import React, { useContext, useEffect, useState } from 'react';
import { AxiosContext } from './AxiosContext';

const MyComponent = () => {
  const axios = useContext(AxiosContext);
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('/api/data').then(response => {
      setData(response.data);
    });
  }, [axios]);

  return <div>{data ? JSON.stringify(data) : '加载中...'}</div>;
};

export default MyComponent;

这种 Provider 模式可以有效地将拦截器和其他配置注册到整个应用中，方便管理和使用。

异步操作详解

发表于 2025-04-06 | 分类于分享 , javascript , web前端 | 暂无评论

什么是异步操作？

异步操作（Asynchronous Operation）是指程序在执行某个操作时，不需要等待该操作完成就能继续执行后续代码的编程模式。与同步操作（必须等待操作完成才能继续）不同，异步操作允许程序在等待某些耗时操作（如I/O、网络请求等）完成的同时继续执行其他任务。

异步操作的核心特点

非阻塞：主线程不会被阻塞，可以继续执行其他任务
延迟处理：操作结果将在未来某个时间点可用
回调机制：通常通过回调函数、Promise或async/await来处理结果
提高效率：特别适合I/O密集型操作，能更好地利用系统资源

同步 vs 异步

同步操作示例（阻塞式）

// 同步读取文件（Node.js）
const fs = require('fs');
const data = fs.readFileSync('file.txt'); // 程序会停在这里直到文件读取完成
console.log(data);
console.log('这行代码会在文件读取完成后执行');

异步操作示例（非阻塞式）

// 异步读取文件（Node.js）
const fs = require('fs');
fs.readFile('file.txt', (err, data) => {
    // 这个回调函数会在文件读取完成后执行
    if (err) throw err;
    console.log(data);
});
console.log('这行代码会立即执行，不必等待文件读取完成');

异步操作的常见场景

网络请求：

fetch('<https://api.example.com/data>')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

console.log('这个日志会立即显示，不必等待请求完成');

定时操作：

setTimeout(() => {
  console.log('这条消息将在2秒后显示');
}, 2000);
console.log('这条消息会立即显示');

数据库操作：

// 伪代码示例
database.query('SELECT * FROM users', (err, results) => {
  if (err) throw err;
  console.log(results);
});
console.log('查询已发起，继续执行其他代码');

用户交互：

document.getElementById('button').addEventListener('click', () => {
  console.log('按钮被点击了');
});
console.log('已设置点击监听器，继续执行其他代码');

异步编程的实现方式

回调函数（最基础的方式）：

function asyncOperation(callback) {
  setTimeout(() => {
    callback('操作完成');
  }, 1000);
}

asyncOperation((message) => {
  console.log(message); // 1秒后输出"操作完成"
});

Promise（ES6引入）：

function asyncOperation() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('操作完成');
    }, 1000);
  });
}

asyncOperation()
  .then(message => console.log(message));

async/await（ES2017引入，语法糖）：

async function doWork() {
  const message = await asyncOperation();
  console.log(message);
}

doWork();

为什么需要异步操作？

性能优化：避免阻塞主线程，特别是在单线程环境（如浏览器中的JavaScript）
用户体验：保持UI响应流畅，避免"卡死"现象
资源利用：在等待I/O操作（如磁盘读写、网络请求）时，CPU可以处理其他任务
可扩展性：适合处理高并发场景（如服务器同时处理多个请求）

异步操作的挑战

代码复杂性：回调嵌套可能导致"回调地狱"
错误处理：异步错误不像同步错误那样可以通过try-catch直接捕获
调试困难：执行流程不如同步代码直观
状态管理：多个异步操作之间的协调可能变得复杂

实际应用示例

多个异步操作并行执行

// 使用Promise.all
const fetchUser = fetch('/user');
const fetchPosts = fetch('/posts');

Promise.all([fetchUser, fetchPosts])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(([user, posts]) => {
    console.log('用户数据:', user);
    console.log('帖子数据:', posts);
  });

异步操作串行执行

// 使用async/await
async function getData() {
  const user = await fetch('/user').then(r => r.json());
  const posts = await fetch('/posts').then(r => r.json());

  console.log('用户数据:', user);
  console.log('帖子数据:', posts);
}

异步操作是现代编程中不可或缺的概念，特别是在Web开发、Node.js、移动应用开发等领域。理解异步编程是成为高效开发者的关键一步。

html显示原始换行

发表于 2025-04-06 | 分类于 web前端 | 暂无评论

使用 white-space 的 CSS 样式

可以用 CSS 的 white-space 属性来实现换行符的显示。

具体代码：

export default function Display({ content }) {
  return (
    <div style={{ whiteSpace: "pre-wrap" }}>
      {content}
    </div>
  );
}

解释：
- white-space: pre-wrap 是一种 CSS 样式，能够保留换行符和空格，并根据需要自动换行。
- pre-wrap 的效果如下：
  1. 保留输入中的换行符。
  2. 允许长内容自动换行（减少水平滚动条）。

例如：
输入的内容 "12312\\n123132" 会渲染为：

12312
123132

gorm实现多对多关联

发表于 2025-04-05 | 分类于 Go | 暂无评论

假设想实现的是文章（Article）和标签（Tag）之间的多对多关系。在 GORM 中，多对多关联可以通过在关联字段上使用 gorm:"many2many:<join_table_name>" 标记来实现。

下面是一个正确的示例：

// Tag 表示标签，每个标签可以关联多篇文章。
type Tag struct {
    gorm.Model
    Name     string     // 可选的标签名称
    Articles []Article  `gorm:"many2many:article_tags;"` // 指定关联的多对多关系
}

// Article 表示文章，每篇文章可以有多个标签。
type Article struct {
    gorm.Model
    Title string     // 文章标题
    Content string   // 文章内容
    Tags   []Tag    `gorm:"many2many:article_tags;"` // 指定关联的多对多关系
}

说明

多对多关系标记
在 Tag 和 Article 结构体中，都使用了 gorm:"many2many:article_tags;" 标记。这告诉 GORM：
- 这两个表之间存在多对多关系。
- 关联关系使用的中间表命名为 article_tags。如果不指定，GORM 会根据一定规则生成。
自动管理中间表
使用上述标记后，GORM 在执行自动迁移（AutoMigrate）时会自动创建中间表 article_tags，其中包含两个外键字段（例如 article_id 和 tag_id）。

这样就完成了文章和标签之间的多对多关联定义。

示例用法

下面是一个简单的示例，展示如何保存一篇文章及其标签：

// 假设 db 是已经初始化的 *gorm.DB 实例

// 创建标签
tag1 := Tag{Name: "Golang"}
tag2 := Tag{Name: "数据库"}

// 创建文章并关联标签
article := Article{
    Title:   "使用 GORM 实现多对多关联",
    Content: "这里详细介绍如何使用 GORM 定义多对多关联关系。",
    Tags:    []Tag{tag1, tag2},
}

// 保存文章（此时 GORM 会自动插入关联的标签以及中间表数据）
if err := db.Create(&article).Error; err != nil {
    log.Fatal(err)
}

gorm多对多关联去重插入

发表于 2025-04-05 | 分类于 Go | 暂无评论

目前的问题是：在插入文章的同时直接传入包含多个 Tag 的切片，由于 GORM 在保存多对多关联时默认认为每个 Tag 都是新的记录，导致每次插入文章时相同的 Tag 都会重新创建。为了解决这个问题，我们需要确保在保存文章之前，先对每个 Tag 去重，也就是先查询数据库中是否已经存在该 Tag，如果存在则使用已有记录，否则再创建新记录。下面给出一种常见的做法，使用 GORM 的事务（Transaction）和 FirstOrCreate 方法来处理这些逻辑。

假设 Tag 模型类似于：

type Tag struct {
    ID   uint   `gorm:"primaryKey"`
    Name string `gorm:"uniqueIndex"` // 保证 tag 名称的唯一性
    // 其它字段...
}

下面是修改后的示例代码：

func CreatePost(article Article) error {
    db := sql.GetDB()

    // 使用事务确保操作的原子性
    return db.Transaction(func(tx *gorm.DB) error {
        // 处理每个 Tag
        for i, tag := range article.Tags {
            var existingTag Tag
            // 根据 Tag 的唯一字段（例如 Name）进行查找
            if err := tx.Where("name = ?", tag.Name).First(&existingTag).Error; err != nil {
                if errors.Is(err, gorm.ErrRecordNotFound) {
                    // 如果没有找到，则创建新标签
                    if err := tx.Create(&tag).Error; err != nil {
                        return err
                    }
                    // 更新 article.Tags 中的数据为新创建的 tag
                    article.Tags[i] = tag
                } else {
                    // 出现其它错误时，返回错误，事务会回滚
                    return err
                }
            } else {
                // 找到了，使用已有的 tag 记录
                article.Tags[i] = existingTag
            }
        }

        // 创建文章，GORM 会自动将 article.Tags 中的 Tag 与 Article 关联(写入中间表)
        if err := tx.Create(&article).Error; err != nil {
            return err
        }
        return nil
    })
}

说明

事务使用
使用 db.Transaction 来确保整个操作的原子性，如果中间任一步出现错误，整个事务会回滚。
Tag 去重逻辑
对于每个传入的 Tag，我们先根据唯一字段（比如 Name）进行查找：
- 如果找不到则使用 tx.Create(&tag) 新建标签；
- 如果找到了，则直接使用已存在的标签，避免重复插入。
自动建立关联
当调用 tx.Create(&article) 时，GORM 会自动处理多对多关系，将 article.Tags 中的 Tag 信息写入关联表 article_tags。注意这要求你的 Article 模型中所定义的多对多标签 gorm:"many2many:article_tags;" 是正确设置的。

通过这种方式，每次插入文章时，相同的 Tag 都只会在数据库中保留一条记录，而只是在关联表中添加一条关联记录。这样既避免了数据冗余，也能保持多对多关系的正确性。