Axios 深入解析

目录

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

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

目录

1. 请求头的作用
2. 设置请求头的方法
   • 全局默认头
   • 实例默认头
   • 单个请求设置头
3. 常见请求头字段
4. 修改/删除请求头
5. Content-Type 详解
6. 身份验证头
7. 跨域相关头
8. 注意事项
9. 完整示例

请求头的作用

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'
  }
});

常见请求头字段

修改/删除请求头

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

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

Content-Type 详解

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

1. JSON (默认)

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

2. Form Data

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

3. 文件上传

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

身份验证头

常见验证方式示例：

1. Bearer Token

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

2. 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

注意事项

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

   • Host
   • Connection
   • Referer
   • 等安全相关头

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

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

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

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