Axios：轻松进行 HTTP 请求的强大工具

在前端开发中，与服务器进行通信是非常常见的需求。无论是获取数据、发送表单，还是上传文件，HTTP 请求都扮演着重要角色。虽然 JavaScript 提供了原生的 fetch API 和 XMLHttpRequest，但它们在处理复杂请求时可能不太方便。这时候，Axios 作为一个基于 Promise 的 HTTP 客户端库，提供了更加简洁和强大的解决方案。

一、Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，可以运行在浏览器和 Node.js 中。它具有以下特点：

• 支持 Promise：使用异步请求时可以使用 async/await。
• 拦截请求和响应：可以在请求发送前或响应到达后进行处理。
• 取消请求：支持通过 CancelToken 取消请求。
• 自动转换 JSON 数据：请求和响应中的 JSON 数据会自动转换为 JavaScript 对象。
• 客户端支持防御 XSRF：有助于保护应用免受跨站请求伪造（XSRF）的攻击。

二、安装 Axios

在使用 Axios 之前，需要先将其安装到你的项目中。你可以通过 npm 或 yarn 安装：

npm install axios

或者

yarn add axios

安装完成后，你可以在项目的 JavaScript 文件中导入 Axios：

import axios from 'axios';

三、基本使用方法

1. 发送 GET 请求

GET 请求通常用于从服务器获取数据。使用 Axios 发送 GET 请求非常简单：

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

通过 axios.get(url) 发送请求，response.data 包含服务器返回的数据。

2. 发送 POST 请求

POST 请求用于向服务器发送数据。你可以通过 axios.post(url, data) 发送 POST 请求：

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

在这个例子中，我们将一个 JSON 对象发送到服务器，并打印返回的数据。

3. 发送 PUT 请求

PUT 请求通常用于更新服务器上的资源。类似于 POST 请求，你可以使用 axios.put(url, data) 发送 PUT 请求：

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  title: 'updated title',
  body: 'updated body',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

4. 发送 DELETE 请求

DELETE 请求用于删除服务器上的资源。使用 axios.delete(url) 发送 DELETE 请求：

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Post deleted:', response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

四、高级用法

1. 请求和响应拦截器

Axios 允许你在请求或响应被 then 或 catch 处理之前拦截它们。这对于全局处理错误、设置通用的请求头部或记录日志非常有用。

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer token';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

2. 设置默认配置

你可以设置 Axios 的全局默认配置，如基 URL、请求超时时间、请求头等：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';

3. 取消请求

在某些情况下，你可能需要取消一个正在进行的请求，Axios 提供了 CancelToken 来实现这一功能：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/longRequest', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 取消请求
cancel('Request canceled.');

4. 并发请求

如果你需要同时发送多个请求，并且在所有请求都完成后执行某些操作，可以使用 axios.all 和 axios.spread：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 当这两个请求都完成后执行此操作
    console.log(acct.data);
    console.log(perms.data);
  }));

5. 上传文件

Axios 也可以轻松处理文件上传操作。你可以使用 FormData 对象来构建请求数据：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('File uploaded successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error uploading the file!', error);
  });

五、总结

Axios 是一个功能强大且易于使用的 HTTP 客户端，特别适合在现代 JavaScript 应用程序中进行网络请求。无论你是在处理简单的 GET 请求，还是在处理复杂的拦截器和文件上传，Axios 都提供了简洁的 API 和灵活的配置选项。