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

Axios详细介绍

安装基本使用发送 POST 请求使用请求配置拦截器取消请求

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 请求的示例：

// 引入 Axiosconst axios = require('axios');// 发送 GET 请求到指定的 URLaxios.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 请求的示例，同时发送一些数据到服务器：

// 引入 Axiosconst 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);  });

使用请求配置

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

// 引入 Axiosconst 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);  });

拦截器

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

// 引入 Axiosconst 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 和 CancelTokenconst 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 请求的发送和处理的。