axios常用API详解与实例

# 1. 什么是axios

axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境。它具有许多强大的功能，如拦截器、并发请求管理等，使得在前端开发中进行HTTP请求变得更加便捷和灵活。在本章节中，我们将详细介绍axios是什么以及其特点。

# 2. axios基本用法

在开始使用axios发送请求之前，我们需要先安装axios库。在Node.js环境下，可以使用npm安装：

npm install axios

接着，在代码中引入axios模块，如下所示：

import axios from 'axios';

然后，我们可以使用axios发送GET请求：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，我们发送了一个GET请求到https://jsonplaceholder.typicode.com/posts，并在成功时打印返回的数据，失败时打印错误信息。

除了GET请求外，axios还支持其他HTTP方法，比如POST、PUT、DELETE等，在使用时只需将`get`替换为相应的方法即可。

# 3. axios常用配置选项解析

在使用axios发送请求时，我们经常需要配置一些选项来满足具体的需求。下面是一些常用的配置选项及其解析：

1. `baseURL`: 设置请求的基础URL，方便统一管理接口地址。
2. `headers`: 设置请求头，用于传递一些必要的信息，如Token等。
3. `params`: 设置请求参数，可在get请求中使用。
4. `data`: 设置请求体，通常在post请求中使用。
5. `timeout`: 设置请求超时时间，超过该时间未响应视为请求失败。
6. `responseType`: 设置响应数据的类型，如`json`、`text`等。
7. `validateStatus`: 自定义成功的http状态码范围。

下面是一个示例代码，演示如何使用这些配置选项：

import axios

# 创建axios实例
instance = axios.create({
    baseURL: 'http://api.example.com',
    timeout: 5000,
    headers: {'Authorization': 'Bearer Token'}
})

# 发送get请求
response = instance.get('/users', {
    params: {id: 1}
})

# 打印结果
print(response.data)

通过配置选项，我们可以灵活地定制请求，满足不同场景下的需求。

# 4. axios拦截器的使用与实例

在axios中，拦截器是非常重要的功能，可以在发送请求或接收响应时对它们进行拦截和处理。axios提供了`axios.interceptors.request`和`axios.interceptors.response`来实现请求和响应拦截器。下面我们来看一个使用拦截器的实例：

import axios

# 创建一个axios实例
api = axios.create()

# 请求拦截器
api.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么
        console.log('请求拦截器 - 请求发送前')
        return config
    },
    error => {
        // 对请求错误做些什么
        console.error('请求拦截器 - 请求错误')
        return Promise.reject(error)
    }
)

# 响应拦截器
api.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        console.log('响应拦截器 - 响应数据', response.data)
        return response
    },
    error => {
        // 对响应错误做点什么
        console.error('响应拦截器 - 响应错误')
        return Promise.reject(error)
    }
)

# 发送请求
response = api.get('https://jsonplaceholder.typicode.com/posts/1')
print(response.data)

**代码总结：**
- 创建axios实例`api`
- 使用`api.interceptors.request.use`方法实现请求拦截器
- 使用`api.interceptors.response.use`方法实现响应拦截器
- 发送请求并输出响应数据

**结果说明：**
- 在发送请求前会触发请求拦截器，输出"请求拦截器 - 请求发送前"
- 在接收到响应数据时会触发响应拦截器，输出"响应拦截器 - 响应数据"

# 5. axios并发请求管理

在实际开发中，经常会遇到需要同时发起多个请求的情况，而axios可以方便地管理这些并发请求。下面我们通过一个实例来展示如何使用axios来管理并发请求。

import axios from 'axios';

const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');
const request3 = axios.get('https://api.example.com/data3');

axios.all([request1, request2, request3])
    .then(axios.spread((response1, response2, response3) => {
        // 处理响应数据
        console.log('Response 1:', response1.data);
        console.log('Response 2:', response2.data);
        console.log('Response 3:', response3.data);
    }))
    .catch(error => {
        console.error('Error:', error.message);
    });

在上述代码中，我们同时发起了三个请求，使用axios的`axios.all()`方法可以将这些请求组合在一起，并通过`axios.spread()`方法来处理每个请求的响应数据。如果有任何一个请求失败，会进入`catch`中处理错误。

通过以上实例，我们展示了如何利用axios来管理并发请求，使得代码编写更加简洁高效。

# 6. axios常用API实例展示

在本节中，我们将通过实例来展示axios常用的API用法。我们将介绍如何使用axios来发送GET请求、POST请求、设置请求头、处理响应等操作。让我们一起来看看吧！

### 1. 发送GET请求

import axios

response = axios.get('https://jsonplaceholder.typicode.com/posts/1')

print(response.data)

**场景说明：** 发送一个GET请求到指定的URL，并打印返回的数据。

**代码总结：** 使用`axios.get(url)`方法发送GET请求。

**结果说明：** 打印出返回的数据。

### 2. 发送POST请求

import axios

data = {
    'title': 'foo',
    'body': 'bar',
    'userId': 1
}

response = axios.post('https://jsonplaceholder.typicode.com/posts', data=data)

print(response.data)

**场景说明：** 发送一个POST请求到指定的URL，并打印返回的数据。

**代码总结：** 使用`axios.post(url, data)`方法发送POST请求，其中`data`参数为要发送的数据。

**结果说明：** 打印出返回的数据。

### 3. 设置请求头

import axios

headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer my_token'
}

response = axios.get('https://api.example.com/data', headers=headers)

print(response.data)

**场景说明：** 发送带自定义请求头的GET请求到指定的URL，并打印返回的数据。

**代码总结：** 使用`headers`参数来设置请求头。

**结果说明：** 打印出返回的数据。

### 4. 处理响应

import axios

response = axios.get('https://jsonplaceholder.typicode.com/posts/1')

if response.status_code == 200:
    print('请求成功')
    print(response.data)
else:
    print('请求失败')

**场景说明：** 发送一个GET请求并根据响应状态码来判断请求是否成功，然后打印返回的数据。

**代码总结：** 使用`response.status_code`来获取响应状态码。

**结果说明：** 根据状态码打印不同的信息。

通过以上实例，我们展示了axios常用的API用法，包括发送GET请求、POST请求、设置请求头和处理响应。希望这些示例能帮助你更加深入地了解axios的使用方法。