什么是axios？怎么使用axios封装Ajax？

news2024/11/24 0:05:10

学习目标

什么是axios

  Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 环境中使用。Axios 提供了简单易用的 API，用于执行各种 HTTP 请求操作，如 GET、POST、PUT、DELETE 等。

以下是 Axios 的一些关键特性和功能：

  1. 基于 Promise：Axios 的 API 设计完全基于 Promise，这使得它能够很好地与 async/await 语法结合使用，从而简化了异步操作的处理。
  2. 请求和响应的拦截器：Axios 支持请求和响应的拦截器，允许你在请求发送前或响应接收后对其进行处理。这可以用于添加认证信息、处理错误、记录日志等。
  3. 自动转换数据：Axios 会自动将请求数据转换为请求体（例如，将 JavaScript 对象转换为 JSON 字符串），并自动解析响应数据（例如，将 JSON 字符串转换为 JavaScript 对象）。
  4. 取消请求：你可以使用 Axios 提供的取消令牌（CancelToken）来取消已发出的请求。
  5. 防止跨站请求伪造（XSRF）：在浏览器环境中，Axios 可以自动从 cookies 中读取 XSRF 令牌，并将其添加到请求头中，以防止跨站请求伪造攻击。
  6. 配置灵活性：你可以通过创建一个 Axios 实例来配置其默认设置，如基础 URL、超时时间、请求头等。这使得在不同的项目或不同的请求中重用相同的配置变得更加容易。
  7. 浏览器和 Node.js 兼容：Axios 可以在所有现代浏览器中运行，并且也支持在 Node.js 环境中使用，这使得它成为一个跨平台的 HTTP 客户端。
  8. 小型且高效：Axios 的代码库相对较小，但它提供了丰富的功能，使得它成为许多 Web 应用程序和 API 的首选 HTTP 客户端。

总的来说，Axios 是一个功能强大、易于使用且灵活的 HTTP 客户端，它能够帮助开发者以简洁和高效的方式处理 HTTP 请求和响应。

怎么使用axios封装Ajax

  使用 Axios 封装 AJAX 请求是一个常见的做法，它可以帮助你简化代码、统一请求格式和处理逻辑。以下是一个基本的 Axios 封装示例，包括请求和响应的拦截器、错误处理以及配置默认请求选项。

首先，你需要安装 Axios。如果你还没有安装它，可以使用 npm 或 yarn 进行安装：

npm install axios
# 或者
yarn add axios

然后，你可以创建一个新的文件（例如 axiosInstance.js）来封装 Axios 实例：

// axiosInstance.js
import axios from 'axios';
 
// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 你的 API 基础 URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});
 
// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加认证令牌
    // config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
 
// 响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做点什么，例如统一处理错误状态码
    if (response.status >= 200 && response.status < 300) {
      return response.data; // 返回实际数据
    } else {
      // 处理错误响应，例如显示错误消息或抛出错误
      return Promise.reject(new Error(response.statusText));
    }
  },
  error => {
    // 对响应错误做点什么，例如显示错误消息或抛出错误
    if (error.response) {
      // 服务器返回了一个状态码，且状态码触发了错误处理
      console.error('Error Response:', error.response.data);
      console.error('Error Status:', error.response.status);
      console.error('Error Headers:', error.response.headers);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('Error Request:', error.request);
    } else {
      // 其他错误（例如，设置请求时发生的错误）
      console.error('Error Message:', error.message);
    }
    return Promise.reject(error);
  }
);
 
// 导出 Axios 实例
export default axiosInstance;

现在，你可以在你的应用程序中使用这个封装的 Axios 实例来发送 AJAX 请求。例如：

// someComponent.js 或 anyOtherFile.js
import axiosInstance from './axiosInstance';
 
// 发送一个 GET 请求
axiosInstance.get('/some-endpoint')
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
 
// 发送一个 POST 请求
axiosInstance.post('/another-endpoint', { key: 'value' })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

这个封装示例提供了基本的功能，但你可以根据需要进行扩展。例如，你可以添加更多的请求拦截器来处理身份验证令牌、全局错误处理逻辑、请求重试机制等。

该如何使用Axios 封装 XHR 请求

实际上，Axios 本身就是一个基于 Promise 的 HTTP 客户端，它已经在内部封装了 XMLHttpRequest (XHR) 的复杂细节，因此你不需要直接使用或封装 XHR。使用 Axios，你可以更方便地发送 HTTP 请求，并处理响应和错误。

不过，如果你想要了解如何使用 Axios 来替代传统的 XHR 请求，或者想要在你的项目中通过 Axios 来封装一些常用的请求逻辑，以下是一个基本的指南：

  1. 安装 Axios：
    首先，你需要确保你的项目中已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 进行安装。
npm install axios
# 或者
yarn add axios
  1. 创建 Axios 实例（可选）：
    你可以创建一个 Axios 实例来配置一些默认的设置，比如基础 URL、超时时间、请求头等。这类似于传统 XHR 中的“打开”一个连接并设置请求头。
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});
  1. 发送请求：
    使用 Axios 的方法（如 get、post、put、delete 等）来发送 HTTP 请求。这些方法会返回一个 Promise，你可以使用 .then() 和 .catch() 来处理响应和错误。
// 使用默认的 axios
axios.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching users:', error);
  });
 
// 使用自定义的 axios 实例
axiosInstance.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });
  1. 配置拦截器（可选）：
    你可以配置请求拦截器和响应拦截器来在请求发送之前或响应到达之后执行一些逻辑。这类似于传统 XHR 中的“设置请求头”和“处理响应”。
axiosInstance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如添加认证 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
 
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // 处理 HTTP 状态码错误
    }
    return Promise.reject(error);
  }
);
  1. 处理响应和错误：
    使用 .then() 方法来处理成功的响应，使用 .catch() 方法来处理错误。你也可以使用 async/await 语法来更简洁地处理异步请求。
async function fetchUsers() {
  try {
    const response = await axiosInstance.get('/users');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
}
 
fetchUsers();

总之，使用 Axios 封装 HTTP 请求可以大大简化你的代码，并提升可读性和可维护性。你不需要直接处理 XHR 的复杂细节，因为 Axios 已经为你处理了这些。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2246318.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Cloud Native 云原生后端的开发注意事项

Cloud Native 云原生后端的开发注意事项

在云原生后端开发里&#xff0c;数据管理和存储这块得好好弄。数据库选型得综合考虑&#xff0c;像关系型数据有复杂查询需求就选 MySQL、PostgreSQL&#xff0c;海量非结构化数据就可以考虑 MongoDB、Cassandra 这些。设计数据库得遵循规范化原则&#xff0c;像设计电商订单表…
阅读更多...
通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600)

通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600)

通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600) pda/appcenter/submenu.php 未包含inc/auth.inc.php且 $appid 参数未用’包裹导致前台SQL注入 影响范围 v2017-v11.6 fofa app"TDXK-通达OA" && icon_hash"-759108386"poc http://url…
阅读更多...
TCP连接（三次握手）（四次挥手）

TCP连接（三次握手）（四次挥手）

建立TCP连接&#xff08;三次握手&#xff09; 以下是简单阐述 在确定目标服务器 IP 地址后&#xff0c;则经历三次握手建立TCP 连接 三次握手 代表客户端和服务端 之间的传递信息有三次 A说&#xff1a;我想和你聊天 &#xff0c;你能听到我说话吗 B说&#xff1a;我可以听到…
阅读更多...
【MySQL实战45讲笔记】基础篇——事务隔离

【MySQL实战45讲笔记】基础篇——事务隔离

系列文章 基础篇——MySQL 的基础架构 基础篇——redo log 和 binlog 目录 系列文章1. 事务隔离1.1 隔离性与隔离级别1.2 如何实现事务隔离1.3 事务的启动方式1.4 思考&#xff1a; 使用什么方案来避免长事务 1. 事务隔离 简单来说&#xff0c;事务就是要保证一组数据库操作&…
阅读更多...
upload-labs-master第12关详细教程

upload-labs-master第12关详细教程

成功了别忘了回来留下你的评论哦&#xff0c;嘻嘻 目录 环境配置闯关 环境配置 需要的东西 phpstudy-2018 链接&#xff1a; https://pan.baidu.com/s/1D9l13XTQw7o6A8CSJ2ff9Q 提取码&#xff1a;0278 32位 vc9和11运行库 链接&#xff1a; https://pan.baidu.com/s/1pBV3W…
阅读更多...
Mac 修改默认jdk版本

Mac 修改默认jdk版本

当前会话生效 这里演示将 Java 17 版本降低到 Java 8 查看已安装的 Java 版本&#xff1a; 在终端&#xff08;Terminal&#xff09;中运行以下命令&#xff0c;查看已安装的 Java 版本列表 /usr/libexec/java_home -V设置默认 Java 版本&#xff1a; 找到 Java 8 的安装路…
阅读更多...
uniapp奇怪bug汇总

uniapp奇怪bug汇总

H5端请求api文件夹接口报错 踩坑指数&#xff1a;5星 小程序、APP之前都是用api文件夹的接口引用调用&#xff0c;在h5端启动时报错&#xff0c;研究半天&#xff0c;发现把api文件夹名字改成apis就能调用&#xff0c;就像是关键字一样无法使用。 import authApi from /api/…
阅读更多...
交换机配置从IP（Switch Configuration from IP）

交换机配置从IP（Switch Configuration from IP）

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…
阅读更多...
大语言模型---ReLU函数的计算过程及其函数介绍

大语言模型---ReLU函数的计算过程及其函数介绍

文章目录 1. 概要2. ReLU定义 1. 概要 **ReLU 作用&#xff1a;**主要用于为神经网络引入非线性能力&#xff0c;作用是将输入中的整数保留原值&#xff0c;负数置为 0。 从而在层与层之间引入非线性&#xff0c;使神经网络能够拟合复杂的非线性关系。 **ReLU使用场景&#xf…
阅读更多...
QT如何共享文件+拷贝文件

QT如何共享文件+拷贝文件

QString sharedFolderPathImg "\\\\" IP "/profileImage/"; // 更换为你的共享文件夹路径QDir dirImg(sharedFolderPathImg);dirImg.setFilter(QDir::NoDotAndDotDot | QDir::AllEntries);QVector<QString> curFileEntryArrayImg dirImg.entryList…
阅读更多...
sourceTree无效的源路径问题解决

sourceTree无效的源路径问题解决

1.点击工具 2.点击选项 3.修改ssh客户端为OpenSSH 4.点击确定&#xff0c;然后重新打开软件
阅读更多...
智慧营区整体解决方案

智慧营区整体解决方案

智慧军营概述智慧军营以信息化平台为基础&#xff0c;整合物联网、大数据、云计算、AI智能等技术&#xff0c;构建集人员、车辆、安防管理于一体的物联网平台。通过信息技术和网络技术&#xff0c;提高管理可控性&#xff0c;减少管理流程&#xff0c;降低成本&#xff0c;实现…
阅读更多...
node实战：创建第一个简单的应用项目

node实战：创建第一个简单的应用项目

1、确保node已安装 node -vnpm -v 2、创建项目文件夹 mkdir first-node-app-demo 3、初始化项目 3.1 执行&#xff08;输入&#xff09;命令 cd first-node-app-demo npm init -y 3.2 控制台输出 3.3 查看项目中的package.json文件 3.4 修改package.json文件 {"name…
阅读更多...
STL——vector(1)

STL——vector(1)

博客ID&#xff1a;LanFuRenC系列专栏&#xff1a;C语言重点部分 C语言注意点 C基础 Linux 数据结构 C注意点 今日好题 声明等级&#xff1a;黑色->蓝色->红色 欢迎新粉加入&#xff0c;会一直努力提供更优质的编程博客&#xff0c;希望大家三连支持一下啦 目录 尾…
阅读更多...
pycharm在使用conda虚拟环境时Terminal爆红问题

pycharm在使用conda虚拟环境时Terminal爆红问题

问题&#xff1a; 解决方法&#xff1a; 复制cmd.exe后面所有路径 添加到pycharm的shell path中&#xff1a;
阅读更多...
嵌入式LVGL自定义纯数字键盘

嵌入式LVGL自定义纯数字键盘

嵌入式LVGL自定义纯数字键盘 一、前言二、设置自定义数字键盘三、使用一、前言 嵌入式UI项目中有时候会使用到纯数字密码的需求，所以打算使用LVGL构建自定义的纯数字键盘。 二、设置自定义数字键盘 参考这个文章，以LV_KEYBOARD_MODE_USER_1为例，增加一个数字键盘，如下图所…
阅读更多...
太速科技-512-基于ZU19EG的4路100G 8路40G的光纤汇流计算卡

太速科技-512-基于ZU19EG的4路100G 8路40G的光纤汇流计算卡

基于ZU19EG的4路100G 8路40G的光纤汇流计算卡 一、板卡概述 本板卡系我司自主设计研发&#xff0c;基于Xilinx公司Zynq UltraScale MPSOC系列SOC XCZU19EG-FFVC1760架构&#xff0c;ARM端搭载一组64-bit DDR4&#xff0c;总容量达4GB&#xff0c;可稳定运行在2400MT/s…
阅读更多...
【java-Neo4j 5开发入门篇】-最新Java开发Neo4j

【java-Neo4j 5开发入门篇】-最新Java开发Neo4j

系列文章目录 前言 上一篇文章讲解了Neo4j的基本使用&#xff0c;本篇文章对Java操作Neo4j进行入门级别的阐述&#xff0c;方便读者快速上手对Neo4j的开发。 一、开发环境与代码 1.docker 部署Neo4j #这里使用docker部署Neo4j,需要镜像加速的需要自行配置 docker run --name…
阅读更多...
时间请求参数、响应

时间请求参数、响应

&#xff08;7&#xff09;时间请求参数 1.默认格式转换 控制器 RequestMapping("/commonDate") ResponseBody public String commonDate(Date date){System.out.println("默认格式时间参数 date > "date);return "{module : commonDate}"; }…
阅读更多...
华为防火墙技术基本概念学习笔记

华为防火墙技术基本概念学习笔记

1.防火墙概述 1.1防火墙与交换机、路由器对比 路由器与交换机的本质是转发&#xff0c;防火墙的本质是控制。 防火墙与路由器、交换机是有区别的。路由器用来连接不同的网络&#xff0c;通过路由协议保证互联互通&#xff0c;确保将报文转发到目的地;交换机则通常用来组建局域…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023