轻松使用 Axios，领略 HTTP 请求的魅力

Axios 的使用方法非常简单，基本流程如下：

1. 导入 Axios 库

在使用 Axios 之前，需要先导入该库。在 Node.js 中，可以使用 require() 方法导入，而在浏览器中，可以使用 <script> 标签导入。

// Node.js
const axios = require('axios');

// 浏览器
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 创建 Axios 实例

创建 Axios 实例可以帮助我们配置一些默认选项，比如基础 URL、超时时间等。如果不需要特殊的配置，也可以直接使用 axios 对象。

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

3. 发送请求

使用 Axios 发送请求非常简单，只需要调用 request() 方法即可。request() 方法的第一个参数是请求配置对象，其中包含了请求 URL、请求方法、请求数据等信息。第二个参数是响应处理函数，当请求完成后，这个函数会被自动调用。

instance.request({
  url: '/users',
  method: 'get'
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.log(error);
});

4. 处理响应

当请求完成后，request() 方法会返回一个 Promise 对象。如果请求成功，Promise 对象的 then() 方法会被调用，此时可以拿到请求的响应数据。如果请求失败，Promise 对象的 catch() 方法会被调用，此时可以拿到请求的错误信息。

instance.request({
  url: '/users',
  method: 'get'
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.log(error);
});

除了基本用法之外，Axios 还提供了许多高级特性，比如拦截器、取消请求、并行请求等。这些特性可以帮助开发人员在实际开发中更加灵活地使用 Axios。

拦截器

拦截器是 Axios 中一个非常重要的特性，它允许开发人员在请求发送之前和响应返回之后对请求和响应进行拦截和处理。拦截器可以用来做很多事情，比如添加请求头、处理响应数据、取消请求等。

axios.interceptors.request.use((config) => {
  // 在发送请求之前做一些事情
  return config;
}, (error) => {
  // 在发送请求时遇到错误时做一些事情
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 在收到响应时做一些事情
  return response;
}, (error) => {
  // 在收到响应时遇到错误时做一些事情
  return Promise.reject(error);
});

取消请求

在某些情况下，开发人员可能需要取消某个正在进行的请求。Axios 提供了 cancelToken 来帮助开发人员实现这个功能。

const source = axios.CancelToken.source();

instance.request({
  url: '/users',
  method: 'get',
  cancelToken: source.token
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.log(error);
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

并行请求

Axios 还支持并行请求，即同时发送多个请求。这可以帮助开发人员提高请求效率。

axios.all([
  instance.request({
    url: '/users',
    method: 'get'
  }),
  instance.request({
    url: '/posts',
    method: 'get'
  })
]).then(axios.spread((usersResponse, postsResponse) => {
  console.log(usersResponse.data);
  console.log(postsResponse.data);
}));

注意事项

在使用 Axios 时，需要注意以下几点：

• Axios 只能发送跨域请求，如果要发送同源请求，可以使用 fetch() API。
• Axios 默认情况下不会自动处理 cookie，如果需要处理 cookie，需要手动设置 withCredentials 属性为 true。
• Axios 默认情况下不会自动解析 JSON 响应数据，如果需要解析 JSON 响应数据，需要手动设置 headers 属性为 {'Content-Type': 'application/json'}。

总结

Axios 是一个非常强大且易于使用的 HTTP 请求库，它可以帮助开发人员轻松地进行网络请求。本文介绍了 Axios 的基本用法、高级用法和一些常见的注意事项，希望对大家有所帮助。