什么是axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中。它可以发送异步的 HTTP 请求并处理响应。Axios 是一个流行的库，因为它提供了一个简单易用的接口，可以轻松地与服务器进行通信。

### 安装和导入 Axios

可以通过 npm 进行安装：

```

npm install axios

```

然后，在代码中导入 Axios：

```javascript

import axios from 'axios';

```

或者使用 `require`：

```javascript

const axios = require('axios');

```

### 发送 GET 请求

以下是使用 Axios 发送 GET 请求的基本示例：

```javascript

axios.get('https://api.example.com/users')

.then(response => {

// 处理成功响应数据

console.log(response.data);

})

.catch(error => {

// 处理错误

console.error(error);

});

```

可以通过使用 `axios.get` 方法并传入 URL 来发送 GET 请求。`then` 方法用于处理成功响应，`catch` 方法用于处理错误。响应数据可以通过 `response.data` 获取。

### 发送 POST 请求

以下是使用 Axios 发送 POST 请求的基本示例：

```javascript

axios.post('https://api.example.com/users', {

name: 'John',

age: 25

})

.then(response => {

// 处理成功响应数据

console.log(response.data);

})

.catch(error => {

// 处理错误

console.error(error);

});

```

可以通过使用 `axios.post` 方法并传入 URL 和请求数据对象来发送 POST 请求。

### 设置请求头

可以使用 `axios.defaults.headers` 属性来设置请求头。以下是一个示例：

```javascript

axios.defaults.headers.common['Authorization'] = 'Bearer token';

```

此代码将设置一个名为 `Authorization` 的请求头，并将其值设置为 `Bearer token`。

### 并发请求

Axios 允许同时发送多个请求。可以使用 `axios.all` 方法来发送多个请求并等待它们全部返回。以下是一个示例：

```javascript

axios.all([

axios.get('https://api.example.com/users'),

axios.get('https://api.example.com/posts')

])

.then(axios.spread((usersResponse, postsResponse) => {

// 处理成功响应数据

console.log(usersResponse.data);

console.log(postsResponse.data);

}))

.catch(error => {

// 处理错误

console.error(error);

});

```

此代码会同时发送两个 GET 请求，并使用 `axios.spread` 方法将成功响应解构为两个单独的参数。

### 取消请求

Axios 提供了可以取消请求的方法。以下是一个示例：

```javascript

const source = axios.CancelToken.source();

axios.get('https://api.example.com/users', {

cancelToken: source.token

})

.then(response => {

// 处理成功响应数据

console.log(response.data);

})

.catch(function (error) {

// 处理错误

console.error(error);

if (axios.isCancel(error)) {

console.log('请求取消：', error.message);

}

});

// 取消请求

source.cancel('请求被用户取消');

```

首先，使用 `axios.CancelToken.source` 方法创建一个取消令牌。然后，将取消令牌作为 `cancelToken` 参数传递给请求。之后，可以调用 `cancel` 方法来取消请求。

### 拦截器

Axios 提供了拦截器，可以在请求和响应发送/到达前后执行某些任务。拦截器可以用于添加一个全局的请求拦截器或响应拦截器，也可以为特定请求添加拦截器。以下是一个示例：

```javascript

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

console.log('请求拦截器被触发');

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 对响应数据做些什么

console.log('响应拦截器被触发');

return response;

}, function (error) {

// 对响应错误做些什么

return Promise.reject(error);

});

// 发送请求

axios.get('https://api.example.com/users')

.then(response => {

// 处理成功响应数据

console.log(response.data);

})

.catch(error => {

// 处理错误

console.error(error);

});

```

在以上示例中，我们添加了一个全局的请求拦截器和响应拦截器，它们会在每个请求发送和响应到达前后被触发。

### Axios 实例

可以创建一个自定义的 Axios 实例，并设置不同的默认值和拦截器。以下是一个示例：

```javascript

const instance = axios.create({

baseURL: 'https://api.example.com',

timeout: 5000,

headers: {'X-Custom-Header': 'foobar'}

});

instance.get('/users')

.then(response => {

// 处理成功响应数据

console.log(response.data);

})

.catch(error => {

// 处理错误

console.error(error);

});

```

我们通过 `axios.create` 方法创建了一个自定义的 Axios 实例，并设置了一些默认值。然后，我们可以使用该实例来发送请求。

### Axios 和 Fetch 的比较

Axios 和 Fetch 都是用于发送 HTTP 请求的工具，它们有一些相似之处，但也有一些重要的区别。

Axios 提供了更简洁易用的 API，可以处理请求和响应的拦截器，并支持取消请求和并发请求等功能。同时，它还提供了一些配置选项，如请求超时时间、自定义请求头等。

Fetch 是浏览器内置的 API，用于发送 HTTP 请求。它也是基于 Promise 的，但 API 相对较低级，而且不支持请求拦截器、取消请求等功能。但是，由于 Fetch 是浏览器原生支持的 API，因此在某些情况下可能更适合使用。还需要注意的是，Fetch 在处理错误时的行为与 Axios 有所不同。

### 结论

Axios 是一个强大且易用的 HTTP 客户端，可以用于浏览器和 Node.js 环境中。它提供了简洁的 API，可以轻松地发送和处理 HTTP 请求。通过了解 Axios 的基本用法和功能，可以更好地使用它来满足项目的需求。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/