简介

Axios 是一个基于 Promise 的 HTTP 客户端库，广泛用于浏览器和 Node.js 环境中，支持发送 GET、POST 等请求。

安装

使用 npm 安装 Axios

1
npm install axios

基本用法

Axios 提供了多种发送请求的方式：

GET 请求

1
axios.get(url[, config])

POST 请求

1
axios.post(url[, data[, config]])

其他请求方法

1
2
3
axios.head(url[, config])
axios.delete(url[, config])
axios.put(url[, data[, config]])

其中，url 是请求的地址，data 是请求体数据，config 是请求配置。

请求配置

在发送请求时，可以通过配置对象设置请求的各项参数：

baseURL：基础的 URL 路径。
headers：自定义请求头信息。
params：用于 GET 请求的 URL 查询参数。
data：用于 POST、PUT、PATCH 请求的请求体数据。
timeout：请求超时时间。
responseType：预设服务器返回结果的格式，默认为 json。

请求拦截器和响应拦截器

Axios 允许在请求发送前和响应接收后对请求和响应进行拦截处理：

请求拦截器：在请求发送前对请求进行处理，例如添加认证信息。

1
2
3
4
5
6
7
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器：在响应接收后对响应进行处理，例如统一处理错误码。

1
2
3
4
5
6
7
axios.interceptors.response.use(function (response) {
  // 对响应数据做些什么
  return response;
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error);
});

取消请求

Axios 提供了取消请求的功能，避免不必要的请求占用资源：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/1234', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

实例化 Axios

可以通过 axios.create() 方法创建一个新的 Axios 实例，以便为不同的请求设置不同的配置：

1
2
3
4
5
6
7
8
9
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/path')
  .then(response => console.log(response))
  .catch(error => console.error(error));

文件下载

使用 Axios 下载文件时，需要设置 responseType 为 ‘blob’，并处理文件的下载：

1
2
3
4
5
6
7
8
9
axios.get('/path/to/file', { responseType: 'blob' })
  .then(response => {
    const blob = response.data;
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'filename';
    link.click();
  })
  .catch(error => console.error(error));

总结

Axios 是一个功能强大的 HTTP 客户端库，提供了丰富的功能，如请求和响应拦截、请求取消、文件下载等，方便开发者进行 HTTP 请求的管理和处理。