Axios 库深入解析：强大网络请求工具大揭秘

2024-01-06 12:19:47

Axios：现代化网络请求的神兵利器

简介

Axios 是一个基于 Promise 的网络请求库，适用于浏览器和 Node.js。它的核心在于简化网络请求，让开发者可以专注于业务逻辑，摆脱底层网络复杂性的束缚。Axios 的易用性、强大功能和广泛应用使其成为开发者的心头好。

基本用法

1. 安装 Axios

在 Node.js 中：

npm install axios

2. 导入 Axios

import axios from 'axios';

3. 发起 GET 请求

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

4. 发起 POST 请求

axios.post('https://example.com', {
  data: {
    name: 'John Doe',
    email: 'johndoe@example.com'
  }
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

5. 发起 PUT 请求

axios.put('https://example.com/1', {
  data: {
    name: 'Jane Doe',
    email: 'janedoe@example.com'
  }
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

6. 发起 DELETE 请求

axios.delete('https://example.com/1')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

高级用法

1. 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);
});

2. Axios 取消重复请求

Axios 可取消重复请求。通过使用 CancelToken 创建令牌并在请求中传递，可以取消请求并抛出 AxiosError 异常。

const cancelToken = axios.CancelToken.source();

axios.get('https://example.com', {
  cancelToken: cancelToken.token
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('请求已取消');
    } else {
      console.log(error);
    }
  });

// 取消请求
cancelToken.cancel('请求已取消');