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

server/2024/11/25 6:51:26/

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

// 引入 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', // 请求 URLparams: { // 查询参数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 请求的发送和处理的。


http://www.ppmy.cn/server/144723.html

相关文章

大数据调度组件之Apache DolphinScheduler

Apache DolphinScheduler 是一个分布式易扩展的可视化 DAG 工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系&#xff0c;使调度系统在数据处理流程中开箱即用。 主要特性 易于部署&#xff0c;提供四种部署方式&#xff0c;包括Standalone、Cluster、Docker和…

C++详细笔记(七)(string底层初步实现)

1.string库简介 C 的string库提供了std::string类型&#xff0c;用于方便地处理文本字符串。它是 C 标准模板库&#xff08;STL&#xff09;的一部分&#xff0c;相比于 C 语言中以\0结尾的字符数组&#xff08;C - 风格字符串&#xff09;&#xff0c;std::string提供了更安全…

Dkron 架构与设计

Dkron 是一个分布式、容错的任务调度系统&#xff0c;基于 Raft 共识算法&#xff0c;专注于高可用和扩展性。它被广泛用于调度和管理周期性任务&#xff0c;例如在分布式系统中运行批处理任务。以下是 Dkron 的主要架构和组件&#xff1a; 1. 核心组件 a. Server 节点 角色&…

本地安装YAPI

项目中用到很多的RESTAPI&#xff0c;光靠人工管理或者普通文档肯定是不行的&#xff0c;翻了很多的RESTAPI管理工具&#xff0c;还是选择了YAPI&#xff0c;原因有2&#xff0c;一个是接口位于内网&#xff0c;外网网站上管理测试不到内网接口&#xff0c;另外一个是使用方式&…

防火墙第一天(day035)

1.表与链 表是对功能的分类&#xff0c;防火墙功能filter表&#xff0c;共享上网&#xff0c;端口转发nat表,其他raw表&#xff0c;mangle表 链对数据流进行处理&#xff0c;需要使用不同的链&#xff08;数据流入&#xff08;INPUT&#xff09;,数据流出&#xff08;output&…

CodeTON Round 9 (Div. 1 + Div. 2, Rated, Prizes! ABCDE题) 视频讲解

A. Shohag Loves Mod Problem Statement Shohag has an integer n n n. Please help him find an increasing integer sequence 1 ≤ a 1 < a 2 < … < a n ≤ 100 1 \le a_1 \lt a_2 \lt \ldots \lt a_n \le 100 1≤a1​<a2​<…<an​≤100 such that …

开源网络安全检测工具——伏羲 Fuxi-Scanner

伏羲是一款开源的网络安全检测工具&#xff0c;适用于中小型企业对企业信息系统进行安全巡航检测 本系统通过模块化提供多种安全功能 基于插件的漏洞扫描功能持续化漏洞管理多种协议的弱口令检测企业子域名收集企业 IT 资产管理及服务发现端口扫描AWVS(Acunetix Web Vulnerab…

【漏洞复现】广州锦铭泰软件 F22服装管理软件系统 Load.ashx 任意文件读取漏洞

免责声明: 本文旨在提供有关特定漏洞的信息,以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步,并非出于恶意。读者应理解,利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…