【前端知识】前端组件-axios详细介绍

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了简单易用的 API，可以在浏览器和 Node.js 环境中发送 HTTP 请求，并处理响应。Axios 支持请求和响应的拦截器、自动转换 JSON 数据、取消请求、客户端支持保护免受 XSRF 攻击等功能。

安装

在 Node.js 环境中，你可以使用 npm 或 yarn 来安装 Axios：

npm install axios
# 或者
yarn add axios

在浏览器中，你可以通过 CDN 引入 Axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

基本使用

以下是一个使用 Axios 发送 GET 请求的示例：

// 引入 Axios
const axios = require('axios');

// 发送 GET 请求到指定的 URL
axios.get('https://api.example.com/data')
  .then(response => {
    // 请求成功时，response 对象包含服务器返回的数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败时，error 对象包含错误信息
    console.error('Error fetching data:', error);
  });

发送 POST 请求

以下是一个使用 Axios 发送 POST 请求的示例，同时发送一些数据到服务器：

// 引入 Axios
const axios = require('axios');

// 定义要发送的数据
const postData = {
  key1: 'value1',
  key2: 'value2'
};

// 发送 POST 请求到指定的 URL，并携带数据
axios.post('https://api.example.com/submit', postData)
  .then(response => {
    // 请求成功时，处理服务器返回的数据
    console.log('Data submitted successfully:', response.data);
  })
  .catch(error => {
    // 请求失败时，处理错误信息
    console.error('Error submitting data:', error);
  });

使用请求配置

你可以通过配置对象来定制请求，例如设置请求头、查询参数等：

// 引入 Axios
const axios = require('axios');

// 定义请求配置
const config = {
  method: 'get', // 请求方法
  url: 'https://api.example.com/search', // 请求 URL
  params: { // 查询参数
    q: 'search query'
  },
  headers: { // 请求头
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  }
};

// 发送请求
axios(config)
  .then(response => {
    // 请求成功时，处理服务器返回的数据
    console.log('Search results:', response.data);
  })
  .catch(error => {
    // 请求失败时，处理错误信息
    console.error('Error fetching search results:', error);
  });

拦截器

拦截器允许你在请求或响应被处理之前拦截它们。你可以添加请求拦截器来在发送请求之前做一些事情，比如添加认证令牌。你也可以添加响应拦截器来处理响应数据或错误。

// 引入 Axios
const axios = require('axios');

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如添加认证令牌
  const token = 'YOUR_ACCESS_TOKEN';
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {
  // 对响应错误做些什么，比如统一处理错误格式
  if (error.response.status === 401) {
    // 处理未授权错误
    console.error('Unauthorized, redirecting to login');
  }
  return Promise.reject(error);
});

// 发送请求
axios.get('https://api.example.com/protected')
  .then(response => {
    console.log('Protected data:', response.data);
  })
  .catch(error => {
    console.error('Error fetching protected data:', error);
  });

取消请求

你可以使用 CancelToken 来取消请求：

// 引入 Axios 和 CancelToken
const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;

// 发送请求，并设置取消令牌
axios.get('https://api.example.com/long-request', {
  cancelToken: new CancelToken(function executor(c) {
    // 保存取消函数
    cancel = c;
  })
})
.then(response => {
  console.log('Data received:', response.data);
})
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

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

以上就是对 Axios 的详细介绍和一些具体的使用样例。通过这些示例，你可以看到 Axios 是如何简化 HTTP 请求的发送和处理的。