Axios 深入解析

作者: 前端AC | 原文: https://juejin.cn/post/7486315070361763877

前言

小编备赛蓝桥杯，今天是axios的考纲。以下是总结的知识点：

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 请求

// 引入 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 请求

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 实例

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、方法、头信息、数据等。

为什么使用请求配置？

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

如何设置请求配置？

示例代码：设置请求配置

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 实例或全局的默认设置，用于减少重复配置，提高效率。

为什么使用默认配置？

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

如何设置默认配置？

示例代码：设置默认配置

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. 拦截器

什么是拦截器？

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

为什么使用拦截器？

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

如何使用拦截器？

示例代码：添加请求和响应拦截器

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 请求头配置指南

请求头的作用

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

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

设置请求头的方法

全局默认头

axios.defaults.headers.common['HeaderName'] = 'value';
axios.defaults.headers.post['Content-Type'] = 'application/json';

实例默认头

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

单个请求设置头

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

修改/删除请求头

// 修改现有头
axios.defaults.headers.common['Authorization'] = 'new_token';

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

Content-Type 详解

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

JSON (默认)

headers: {
  'Content-Type': 'application/json'
}

Form Data

headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
}

文件上传

headers: {
  'Content-Type': 'multipart/form-data'
}

身份验证头

常见验证方式示例：

Bearer Token

headers: {
  'Authorization': `Bearer ${token}`
}

Basic Auth

headers: {
  'Authorization': `Basic ${base64(username:password)}`
}

跨域相关头

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

客户端设置：

headers: {
  'Content-Type': 'application/json',
  'Access-Control-Request-Headers': 'Content-Type'
}

服务器需配置：

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

注意事项

浏览器限制的头字段（无法修改）：
- Host
- Connection
- Referer
- 等安全相关头
大小写不敏感但建议使用首字母大写格式
文件上传时需要正确设置Content-Type
使用拦截器统一处理请求头：

axios.interceptors.request.use(config => {
  config.headers.Authorization = getToken();
  return config;
});

完整示例

// 创建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

Axios 深入解析

Axios 深入解析

前言

目录

1. Axios API

示例代码：使用 Axios 发送 GET 请求

示例代码：使用 Axios 发送 POST 请求

2. Axios 实例

示例代码：创建和使用 Axios 实例

3. 请求配置

示例代码：设置请求配置

4. 默认配置

示例代码：设置默认配置

5. 拦截器

示例代码：添加请求和响应拦截器

思维导图

总结

Axios 请求头配置指南

目录

请求头的作用

设置请求头的方法

全局默认头

实例默认头

单个请求设置头

常见请求头字段

修改/删除请求头

Content-Type 详解

身份验证头

跨域相关头

注意事项

完整示例