Axios 深入解析

Deepsleep.2025-03-28 10:00
目录
  1. Axios API
  2. Axios 实例
  3. 请求配置
  4. 默认配置
  5. 拦截器

1. Axios API

什么是 Axios API？

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它支持多种 HTTP 方法（如 GET、POST、PUT、DELETE 等）和拦截器，简化了 HTTP 请求的处理。

为什么使用 Axios API？

  • 支持 Promise，代码更简洁。
  • 内置拦截器，方便处理请求和响应。
  • 支持浏览器和 Node.js。
  • 处理错误统一，方便调试。

如何使用 Axios API？

示例代码：使用 Axios 发送 GET 请求
javascript 复制代码 
// 引入 Axios
const axios = require('axios');

// 发送 GET 请求
axios.get('https://api.example.com/users')
  .then(response => {
    console.log('用户数据:', response.data);
  })
  .catch(error => {
    console.error('请求错误:', error);
  });
示例代码：使用 Axios 发送 POST 请求
javascript 复制代码 
const axios = require('axios');

// 发送 POST 请求
axios.post('https://api.example.com/users', {
  name: '张三',
  email: 'zhangsan@example.com'
})
  .then(response => {
    console.log('创建成功:', response.data);
  })
  .catch(error => {
    console.error('创建失败:', error);
  });

2. Axios 实例

什么是 Axios 实例？

Axios 实例是根据特定配置创建的独立 Axios 实例，允许不同的实例有不同的配置（如 baseURL、超时时间等）。

为什么使用 Axios 实例？

  • 管理多个 API 服务。
  • 独立配置不同实例，避免冲突。

如何创建和使用 Axios 实例？

示例代码：创建和使用 Axios 实例
javascript 复制代码 
const axios = require('axios');
import axios from "axios"//vue写法
// 创建实例，设置 baseURL
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});

// 使用实例发送请求
instance.get('/users')
  .then(response => {
    console.log('用户数据:', response.data);
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

3. 请求配置

什么是 请求配置？

请求配置是一个对象，用于指定 HTTP 请求的详细设置，如 URL、方法、头信息、数据等。

为什么使用 请求配置？

  • 灵活控制每次请求的参数。
  • 覆盖实例的默认配置。

如何设置请求配置？

示例代码：设置请求配置
javascript 复制代码 
const axios = require('axios');

const config = {
  method: 'post',
  url: 'https://api.example.com/users',
  headers: {
    'Content-Type': 'application/json',
  },
  data: {
    name: '张三',
    email: 'zhangsan@example.com'
  }
};

axios(config)
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

4. 默认配置

什么是 默认配置？

默认配置是 Axios 实例或全局的默认设置，用于减少重复配置，提高效率。

为什么使用 默认配置？

  • 减少代码重复。
  • 统一管理配置。

如何设置默认配置？

示例代码：设置默认配置
javascript 复制代码 
const axios = require('axios');

// 设置全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 2000;

// 或者设置实例的默认配置
const instance = axios.create();
instance.defaults.headers.common['Authorization'] = 'Bearer your_token';

// 使用实例发送请求
instance.get('/users')
  .then(response => {
    console.log('用户数据:', response.data);
  });

5. 拦截器

什么是 拦截器？

拦截器是在请求发送前或响应接收后执行的函数，用于处理请求和响应数据。

为什么使用 拦截器？

  • 统一处理认证头。
  • 格式化响应数据。
  • 错误处理。

如何使用 拦截器？

示例代码：添加请求和响应拦截器
javascript 复制代码 
const axios = require('axios');

// 添加请求拦截器
axios.interceptors.request.use(config => {
  console.log('请求拦截器:', config);
  // 添加认证头
  config.headers.Authorization = 'Bearer your_token';
  return config;
}, error => {
  console.error('请求错误:', error);
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  console.log('响应拦截器:', response);
  // 格式化响应数据
  return response.data;
}, error => {
  console.error('响应错误:', error);
  return Promise.reject(error);
});

// 发送请求
axios.get('https://api.example.com/users')
  .then(data => {
    console.log('用户数据:', data);
  });

思维导图

复制代码 
Axios 深入解析
├── Axios API
│   ├── 定义
│   ├── 优点
│   └── 示例代码
├── Axios 实例
│   ├── 定义
│   ├── 优点
│   └── 示例代码
├── 请求配置
│   ├── 定义
│   ├── 优点
│   └── 示例代码
├── 默认配置
│   ├── 定义
│   ├── 优点
│   └── 示例代码
└── 拦截器
    ├── 定义
    ├── 优点
    └── 示例代码

总结

通过学习 Axios 的 API、实例、请求配置、默认配置和拦截器，你可以更高效地处理 HTTP 请求，提升前端开发效率。希望这份文档能帮助你深入理解 Axios 的核心概念和实际应用。

那我就要问你了，请求头是什么？有什么作用？为什么要他？回答我！looking my eyes！下面是知识点：

Axios 请求头配置指南

目录

  1. 请求头的作用
  2. 设置请求头的方法
  3. 常见请求头字段
  4. 修改/删除请求头
  5. [Content-Type 详解](#Content-Type 详解)
  6. 身份验证头
  7. 跨域相关头
  8. 注意事项
  9. 完整示例

请求头的作用

HTTP 请求头（Headers）用于客户端和服务器之间传递附加信息，控制请求行为：

  • 声明内容类型
  • 身份验证
  • 控制缓存
  • 处理跨域请求
  • 传递客户端信息

设置请求头的方法

全局默认头

javascript 复制代码 
axios.defaults.headers.common['HeaderName'] = 'value';
axios.defaults.headers.post['Content-Type'] = 'application/json';

实例默认头

javascript 复制代码 
const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'X-Custom-Header': 'foobar'
  }
});

单个请求设置头

javascript 复制代码 
axios.get('/data', {
  headers: {
    'Authorization': 'Bearer token123',
    'X-Requested-With': 'XMLHttpRequest'
  }
});

axios.post('/submit', data, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

常见请求头字段

头字段 说明 示例值
Authorization 身份验证凭证 Bearer token123
Content-Type 请求体格式类型 application/json
Accept 可接受的响应类型 application/json
User-Agent 客户端信息 Mozilla/5.0...
Cookie 服务器设置的Cookie sessionId=abc123;
Cache-Control 缓存策略 no-cache
X-Requested-With 标识Ajax请求 XMLHttpRequest

修改/删除请求头

javascript 复制代码 
// 修改现有头
axios.defaults.headers.common['Authorization'] = 'new_token';

// 删除头
delete axios.defaults.headers.common['X-Custom-Header'];

Content-Type 详解

不同数据格式的配置示例：

  1. JSON (默认)
javascript 复制代码 
headers: {
  'Content-Type': 'application/json'
}
  1. Form Data
javascript 复制代码 
headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
}
  1. 文件上传
javascript 复制代码 
headers: {
  'Content-Type': 'multipart/form-data'
}

身份验证头

常见验证方式示例：

  1. Bearer Token
javascript 复制代码 
headers: {
  'Authorization': `Bearer ${token}`
}
  1. Basic Auth
javascript 复制代码 
headers: {
  'Authorization': `Basic ${base64(username:password)}`
}

跨域相关头

处理CORS时需要配置的常见头：

客户端设置：

javascript 复制代码 
headers: {
  'Content-Type': 'application/json',
  'Access-Control-Request-Headers': 'Content-Type'
}

服务器需配置：

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Headers
  • Access-Control-Allow-Methods

注意事项

  1. 浏览器限制的头字段（无法修改）：

  2. 大小写不敏感但建议使用首字母大写格式

  3. 文件上传时需要正确设置Content-Type

  4. 使用拦截器统一处理请求头：

javascript 复制代码 
axios.interceptors.request.use(config => {
  config.headers.Authorization = getToken();
  return config;
});

完整示例

javascript 复制代码 
// 创建axios实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Client': 'web-app-v1'
  }
});

// 添加认证拦截器
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 使用实例发送请求
api.post('/data', {
  userId: 123,
  data: 'example'
}, {
  headers: {
    'X-Custom-Header': 'special-value'
  }
});

官方文档参考：Axios Request Config

相关推荐
加班是不可能的，除非双倍日工资4 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi5 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip5 小时前
vite和webpack打包结构控制
前端·javascript
excel5 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国6 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼6 小时前
Kotlin 基本数据类型（三）：Booleans、Characters
android·前端·kotlin
Jimmy6 小时前
AI 代理是什么，其有助于我们实现更智能编程
前端·后端·ai编程
ZXT6 小时前
promise & async await总结
前端
Jerry说前后端6 小时前
RecyclerView 性能优化：从原理到实践的深度优化方案
android·前端·性能优化
画个太阳作晴天6 小时前
A12预装app
linux·服务器·前端
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09全球最强模型Grok4，国内已可免费使用！（附教程）10TRAE Rules 实践：为项目配置 6A 工作流