异步编程与axios技术

Bullet3432025-05-26 15:19

异步编程技术是一种允许程序在执行耗时操作（如网络请求、文件读写）时，不阻塞主线程继续执行其他任务的编程范式。它通过事件循环、回调函数、Promise、协程等机制实现非阻塞操作，从而提升应用程序的性能和响应性。

以下从 JavaScript/TypeScript 、React 、Next.js 、Python 的 FastAPI 、Java 的 Spring Boot 以及 axios 技术的实现方式进行说明，并附上 axios 的使用方法。

1. JavaScript/TypeScript 中的异步编程

JavaScript 是单线程语言，通过事件循环机制实现异步操作。主要方式包括：

回调函数（Callback）

  • 最早的异步处理方式，但容易导致"回调地狱"。

    javascript 复制代码 
    setTimeout(() => {
  console.log("第一步完成");
  setTimeout(() => {
    console.log("第二步完成");
  }, 1000);
}, 1000);

不利于阅读与维护。

Promise

  • 避免回调地狱，通过链式调用管理异步操作。

    javascript 复制代码 
    new Promise((resolve, reject) => {
  setTimeout(() => resolve("第一步完成"), 1000);
})
.then(result => {
  console.log(result);
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("第二步完成"), 1000);
  });
})
.then(result => console.log(result));
async/await

  • 基于 Promise 的语法糖，使异步代码更接近同步写法。

    javascript 复制代码 
    async function example() {
  let result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve("第一步完成"), 1000);
  });
  console.log(result);
  result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve("第二步完成"), 1000);
  });
  console.log(result);
}
example();
TypeScript 的优势

TypeScript 通过类型系统增强了 JavaScript 的异步编程，例如：

  • 类型推断和类型检查。

  • 更安全的 Promise 和 async/await 使用。

    typescript 复制代码 
    async function fetchData(): Promise<string> {
  const response = await fetch("https://api.example.com/data");
  return await response.json();
}

2. React 中的异步编程

React 本身不直接处理异步逻辑，但通常与 JavaScript 的异步特性结合使用：

在函数组件中使用 useEffect
javascript 复制代码 
import React, { useEffect, useState } from "react";

function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://api.example.com/data");
      const result = await response.json();
      setData(result);
    }
    fetchData();
  }, []);

  return <div>{data ? data.message : "Loading..."}</div>;
}
在类组件中使用生命周期方法
javascript 复制代码 
class DataComponent extends React.Component {
  state = { data: null };

  async componentDidMount() {
    const response = await fetch("https://api.example.com/data");
    const result = await response.json();
    this.setState({ data: result });
  }

  render() {
    return <div>{this.state.data ? this.state.data.message : "Loading..."}</div>;
  }
}

3. Next.js 中的异步编程

Next.js 是基于 React 的框架，支持服务端渲染（SSR）和静态生成（SSG）。异步操作通常在以下场景中使用：

在 API 路由中处理异步
javascript 复制代码 
// pages/api/data.js
export default async function handler(req, res) {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  res.status(200).json(data);
}
在页面中获取异步数据
javascript 复制代码 
// pages/index.js
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: { data }, // 将数据传递给页面
  };
}

function Home({ data }) {
  return <div>{data.message}</div>;
}

4. Python 的 FastAPI 中的异步编程

FastAPI 支持异步请求处理，通过 async def 定义异步路由函数：

定义异步 API 路由
python 复制代码 
from fastapi import FastAPI
import httpx

app = FastAPI()

@app.get("/async-data")
async def get_async_data():
    async with httpx.AsyncClient() as client:
        response = await client.get("https://api.example.com/data")
        return response.json()
并发请求示例
python 复制代码 
from fastapi import FastAPI
import httpx
import asyncio

app = FastAPI()

@app.get("/parallel")
async def parallel_requests():
    async with httpx.AsyncClient() as client:
        tasks = [
            client.get("https://api.example.com/data1"),
            client.get("https://api.example.com/data2"),
        ]
        results = await asyncio.gather(*tasks)
        return [result.json() for result in results]

5. Java 的 Spring Boot 中的异步编程

Spring Boot 通过 @Async 注解实现异步方法调用：

启用异步支持
java 复制代码 
@SpringBootApplication
@EnableAsync
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
定义异步方法
java 复制代码 
@Service
public class AsyncService {

    @Async
    public void asyncTask() {
        try {
            Thread.sleep(1000); // 模拟耗时操作
            System.out.println("Async task completed");
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}
调用异步方法
java 复制代码 
@RestController
public class AsyncController {

    @Autowired
    private AsyncService asyncService;

    @GetMapping("/start")
    public String startAsync() {
        asyncService.asyncTask();
        return "Async task started";
    }
}

6. axios 技术及使用方法

axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境，常用于发起异步 HTTP 请求。

安装 axios
bash 复制代码 
npm install axios
基本用法
javascript 复制代码 
import axios from "axios";

// GET 请求
axios.get("https://api.example.com/data")
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

// POST 请求
axios.post("https://api.example.com/submit", {
  key1: "value1",
  key2: "value2"
})
  .then(response => {
    console.log("Submission successful:", response.data);
  })
  .catch(error => {
    console.error("Submission failed:", error);
  });
使用 async/await
javascript 复制代码 
async function fetchData() {
  try {
    const response = await axios.get("https://api.example.com/data");
    console.log(response.data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

async function submitData() {
  try {
    const response = await axios.post("https://api.example.com/submit", {
      key1: "value1",
      key2: "value2"
    });
    console.log("Submission successful:", response.data);
  } catch (error) {
    console.error("Submission failed:", error);
  }
}
配置 axios 实例
javascript 复制代码 
const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: {
    "Authorization": "Bearer your_token_here"
  }
});

// 使用配置的实例发起请求
instance.get("/data")
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
拦截器（Interceptors）
javascript 复制代码 
// 请求拦截器
axios.interceptors.request.use(config => {
  console.log("Request sent:", config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  console.log("Response received:", response);
  return response;
}, error => {
  return Promise.reject(error);
});

总结

技术栈 异步实现方式
JavaScript/TypeScript 回调函数、Promise、async/await
React useEffect + async/await 或生命周期方法
Next.js API 路由中的异步处理、getServerSideProps
FastAPI async def 定义异步路由、httpx 库发起异步请求
Spring Boot @Async 注解、线程池配置
axios 基于 Promise 的 HTTP 客户端，支持 GET/POST 等请求及拦截器、异步/await 写法

异步编程的核心目标是提高程序的并发性和响应性，具体实现方式因技术栈而异，但底层逻辑（如事件循环、非阻塞 I/O）通常相似。

相关推荐
程序员Bears1 小时前
SSM整合：Spring+SpringMVC+MyBatis完美融合实战指南
java·spring·mybatis
啃火龙果的兔子2 小时前
判断手机屏幕上的横向滑动（左滑和右滑）
javascript·react.js·智能手机
liuyang-neu3 小时前
黑马点评双拦截器和Threadlocal实现原理
java
NULL指向我3 小时前
STM32F407VET6学习笔记5：STM32CubeMX配置串口工程_HAL库
笔记·stm32·学习
csdn_aspnet3 小时前
Java 程序求圆弧段的面积(Program to find area of a Circular Segment)
java·开发语言
yuanmenglxb20044 小时前
react基础技术栈
前端·javascript·react.js
佩奇的技术笔记4 小时前
Python入门手册：Python中的数据结构类型
数据结构·python
coding随想4 小时前
从SPDY到HTTP/2：网络协议的革新与未来
javascript
Magnum Lehar5 小时前
vulkan游戏引擎vulkan部分的fence实现
java·前端·游戏引擎
on the way 1235 小时前
创建型模式之Factory Method（工厂方法）
android·java·工厂方法模式
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05VMware虚拟机安装Win7专业版保姆级教程（附镜像包）06DeepSeek各版本说明与优缺点分析07头歌的数据库的第二次作业的答案08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Coze扣子平台完整体验和实践（附国内和国际版对比）10【操作系统】Linux之网络编程(UDP)（头歌作业）