axios基础入门教程

一、axios 简介

axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境，支持以下特性：

发送 HTTP 请求（GET/POST/PUT/DELETE 等）

拦截请求和响应

自动转换 JSON 数据

取消请求

并发请求处理

二、安装

1. 使用 npm/yarn

npm install axios# 或yarn add axios

2. 浏览器直接引入

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

三、基本用法

1. 发送 GET 请求

axios.get('https://api.example.com/data')  .then(response => {    console.log(response.data); // 响应数据  })  .catch(error => {    console.error('请求失败:', error);  });

2. 发送 POST 请求

axios.post('https://api.example.com/data', {    name: 'John',    age: 30  })  .then(response => {    console.log(response.data);  });

3. 使用 async/await

async function fetchData() {  try {    const response = await axios.get('https://api.example.com/data');    console.log(response.data);  } catch (error) {    console.error(error);  }}

四、请求配置

1. 全局默认配置

axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = 'Bearer token123';axios.defaults.timeout = 5000; // 超时时间

2. 单个请求配置

axios.get('/data', {  params: { id: 1 }, // 查询参数  headers: { 'X-Custom-Header': 'value' }});

五、响应结构

响应对象包含以下字段：

{  data: {},       // 服务器返回的数据  status: 200,    // HTTP 状态码  statusText: 'OK',  headers: {},     // 响应头  config: {},      // 请求配置  request: {}      // 原始的 XMLHttpRequest 对象（浏览器）}

六、错误处理

1. 通用错误捕获

axios.get('/data')  .catch(error => {    if (error.response) {      // 服务器返回了非 2xx 状态码      console.log(error.response.status);      console.log(error.response.data);    } else if (error.request) {      // 请求已发送但无响应      console.log('No response received');    } else {      // 请求配置错误      console.log('Error:', error.message);    }  });

2. 全局错误拦截

axios.interceptors.response.use(  response => response,  error => {    // 统一处理错误    return Promise.reject(error);  });

七、高级功能

1. 并发请求

const request1 = axios.get('/data1');const request2 = axios.get('/data2');axios.all([request1, request2])  .then(axios.spread((res1, res2) => {    console.log(res1.data, res2.data);  }));

2. 取消请求

const source = axios.CancelToken.source();axios.get('/data', {  cancelToken: source.token}).catch(thrown => {  if (axios.isCancel(thrown)) {    console.log('请求被取消:', thrown.message);  }});// 取消请求source.cancel('用户取消操作');

3. 请求拦截器

axios.interceptors.request.use(  config => {    // 在发送请求前做些什么（如添加 token）    config.headers.Authorization = 'Bearer token';    return config;  },  error => {    return Promise.reject(error);  });

八、常见场景示例

1. 上传文件

const formData = new FormData();formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {  headers: { 'Content-Type': 'multipart/form-data' }});

2. 下载文件

axios.get('/download', { responseType: 'blob' })  .then(response => {    const url = window.URL.createObjectURL(new Blob([response.data]));    const link = document.createElement('a');    link.href = url;    link.setAttribute('download', 'file.pdf');    document.body.appendChild(link);    link.click();  });

九、最佳实践

封装 axios：创建 api.js 统一管理接口

环境区分：通过 .env 文件配置不同环境的 baseURL

安全防护：结合 CSRF Token 或 JWT 进行身份验证

性能优化：合理设置超时时间，使用缓存策略

示例:

以下是使用 Axios 和 Spring Boot 实现前后端分离的登录功能的步骤详解：

1. 后端实现（Spring Boot）

1.1 添加依赖

在 pom.xml 中添加必要依赖：

<!-- Spring Web --><dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-web</artifactId></dependency><!-- 数据库（以 JPA + H2 为例） --><dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency>    <groupId>com.h2database</groupId>    <artifactId>h2</artifactId>    <scope>runtime</scope></dependency><!-- 密码加密 --><dependency>    <groupId>org.springframework.security</groupId>    <artifactId>spring-security-crypto</artifactId></dependency>

1.2 配置数据库和加密

在 application.properties 中配置：

spring.datasource.url=jdbc:h2:mem:testdbspring.datasource.driverClassName=org.h2.Driverspring.h2.console.enabled=truespring.jpa.hibernate.ddl-auto=update

1.3 创建用户实体类

@Entitypublic class User {    @Id    @GeneratedValue(strategy = GenerationType.IDENTITY)    private Long id;    @Column(unique = true)    private String username;    private String password;    // Getters and Setters}

1.4 创建 Repository

public interface UserRepository extends JpaRepository<User, Long> {    User findByUsername(String username);}

1.5 创建 Service 层

@Servicepublic class AuthService {    @Autowired    private UserRepository userRepository;    @Autowired    private BCryptPasswordEncoder passwordEncoder;    public boolean authenticate(String username, String password) {        User user = userRepository.findByUsername(username);        return user != null && passwordEncoder.matches(password, user.getPassword());    }}

1.6 创建 Controller

@RestController@RequestMapping("/api/auth")@CrossOrigin(origins = "http://localhost:3000") // 允许前端跨域请求public class AuthController {    @Autowired    private AuthService authService;    @PostMapping("/login")    public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {        boolean isValid = authService.authenticate(            loginRequest.getUsername(),            loginRequest.getPassword()        );        if (isValid) {            return ResponseEntity.ok().body("登录成功");        } else {            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");        }    }}// 登录请求DTOpublic class LoginRequest {    private String username;    private String password;    // Getters and Setters}

2. 前端实现（使用 Axios）

2.1 安装 Axios

npm install axios

2.2 登录组件示例（React）

import React, { useState } from 'react';import axios from 'axios';const LoginForm = () => {    const [username, setUsername] = useState('');    const [password, setPassword] = useState('');    const [error, setError] = useState('');    const handleSubmit = async (e) => {        e.preventDefault();        try {            const response = await axios.post(                'http://localhost:8080/api/auth/login',                { username, password },                { headers: { 'Content-Type': 'application/json' } }            );            if (response.status === 200) {                alert('登录成功');                // 跳转到主页或处理登录状态            }        } catch (err) {            if (err.response && err.response.status === 401) {                setError('用户名或密码错误');            } else {                setError('登录失败，请重试');            }        }    };    return (        <form onSubmit={handleSubmit}>            <input                type="text"                value={username}                onChange={(e) => setUsername(e.target.value)}                placeholder="用户名"            />            <input                type="password"                value={password}                onChange={(e) => setPassword(e.target.value)}                placeholder="密码"            />            {error && <div className="error">{error}</div>}            <button type="submit">登录</button>        </form>    );};export default LoginForm;