全面解析 Axios 请求库的基本使用方法

Axios 是一个流行的基于 Promise 的 HTTP 请求库,用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用的 API,可以发送各种类型的请求(如 GET、POST、PUT、DELETE等),并处理响应数据,Axios 在前端工程化项目中有 99% 的概率会被优先选择。下面通过一个实践案例来了解它的基本使用——编写接口并调用 Apifox 生成的 Mock 数据。

安装 Axios

要安装 Axios,首先需要确保本地已安装 Node.js 环境,然后选择执行如下其中一条命令:

使用 npm:

npm install axios

使用 yarn:

yarn add axios

使用 pnpm:

pnpm install axios

以上命令用的是局部安装(即安装到项目目录中的node_modules文件夹下)。这是推荐的方式,因为它将 Axios的依赖项与项目的其他依赖项隔离开来,确保每个项目都可以有自己的版本控制和管理。如果您想在全局范围内安装 Axios,可以使用-g--global选项:

pnpm install -g axios

安装完成后,你可以新建一个以 .js 后缀结尾的文件,该文件用来发起 Http 请求,基本结构如下图所示:

 

接口 Mock

为了更方便接口的测试,这里使用 Apifox 的示例项目里提供的 Mock 数据。你可以访问 Apifox 的官网,下载后新建一个项目,即可进行调用。

 

发起请求

在发起请求之前,要先导入 Axios 库,然后根据需要,也可以定义一个全局的URL地址,详情如下:

const $http = require("axios");/*baseUrl: 即请求路径,该路径可在 Apifox 的云端 Mock 查看
*/
const baseUrl = "https://mock.apifox.cn/......";

GET 请求

一个 get 请求示例如下:

// get
$http.get(`${baseUrl}/pet/1`).then((res) => {console.log(res.data);
});

响应示例如下:

 

POST 请求

一个 post 请求示例如下:

// post
$http.post(`${baseUrl}/pet`, {name: "太酷啦",status: "sold",}).then((res) => {console.log(res.data);});

PUT 请求

一个 put 请求示例如下:

// put
$http.put(`${baseUrl}/pet`, {name: "test",}).then((res) => {console.log(res.data);});

DELETE 请求

一个 delete 请求示例如下:

$http.delete(`${baseUrl}/pet/2`) // 删除id为2的数据.then(function (res) {console.log(res.data);});

总结

以上介绍了 Axios 的基本使用,在前端工程化项目中,它经常会被单独封装,以方便前端开发人员的调用,要进一步学习可访问 Axios 的官网。另外,在后端人员还没开发好接口时,通常会使用 Mock 数据来测试业务,Apifox 提供的高级 Mock 功能很好的解决了这个需求,极大地方便了后续工作的开展。


资料获取方法

【留言777】

各位想获取源码等教程资料的朋友请点赞 + 评论 + 收藏,三连!

三连之后我会在评论区挨个私信发给你们~

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lvs集群与nat模式

一,什么是集群: 集群,群集,Cluster,由多台主机构成,但是对外只表现为一个整体,只提供一个访问入口(域名与ip地址),相当于一台大型计算机。 二,集…

算法通关村第4关【白银】| 栈的经典算法问题

1.括号匹配问题 思路:将左括号压入栈中,遍历字符串,当遇到右括号就出栈,判断是否是匹配的一对,不是就返回false(因为按照顺序所以当遇到右括号出栈一定要是匹配的)。使用Map来简化ifelse clas…

Compose - 修饰符 Modifier

一、概念 四大使用场景: 修改外观(尺寸、样式、布局、行为)。添加额外信息(如无障碍标签)。添加交互功能(点击、滚动、拖拽、缩放)。处理用户输入。 1.1 为组合函数添加 Modifier 参数 任何一…

kafka的位移

文章目录 概要消费位移__consumer_offsets主题位移提交 概要 本文主要总结kafka的位移是如何管理的,在broker端如何通过命令行查看到位移信息,并从代码层面总结了位移的提交方式。 消费位移 对于 Kafka 中的分区而言,它的每条消息都有唯一…

LVS-DR的RS进行ARP抑制的原因和LVS持久连接配置

一.RS的ARP抑制 1.为什么要抑制 2.如何抑制 (1)修改/etc/sysctl.conf文件,增加以下内容 (2)命令行临时设置 二.LVS持久连接 1.客户端持久连接 2.端口持久连接 3.防火墙标记持久连接 一.RS的ARP抑制 1.为什么要…

C++--红黑树

1.什么是红黑树 红黑树,是一种二叉搜索树,但在每个结点上增加一个存储位表示结点的颜色,可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制,红黑树确保没有一条路径会比其他路径长出俩倍,因…

解决c/c++ Error: redefinition of ‘xxx’ 的问题

错误信息 两个类/文件同时引用定义ReplyInfo的头文件,会造成头文件中定义重复定义 如两个类/文件重复引用massage文件报错 message.h:36:16: error: redefinition of struct MSG_SERVOCTRL message.h:40:2: error: conflicting types for servoctrl解决 一般是目…

计算机组成与设计 Patterson Hennessy 笔记(一)MIPS 指令集

计算机的语言:汇编指令集 也就是指令集。本书主要介绍 MIPS 指令集。 汇编指令 算数运算: add a,b,c # abc sub a,b,c # ab-cMIPS 汇编的注释是 # 号。 由于MIPS中寄存器大小32位,是基本访问单位,因此也被称为一个字 word。M…

YOLOv5改进系列(21)——替换主干网络之RepViT(清华 ICCV 2023|最新开源移动端ViT)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制 YOLOv5改进系列(2

React 之 Suspense和lazy

一. Suspense 参考链接&#xff1a;https://react.docschina.org/reference/react/Suspense suspense&#xff1a;n. 焦虑、悬念 <Suspense> 允许你显示一个退路方案&#xff08;fallback&#xff09;直到它的所有子组件完成加载。 <Suspense fallback{<Loadin…

vue项目根据word模版导出word文件

一、安装依赖 //1、docxtemplaternpm install docxtemplater pizzip -S//2、jszip-utilsnpm install jszip-utils -S//3、pizzipnpm install pizzip -S//4、FileSaver npm install file-saver --save二、创建word模版 也就是编辑一个word文档&#xff0c;文档中需要动态取值的…

基于chatgpt动手实现一个ai_translator

动手实现一个ai翻译 前言 最近在极客时间学习《AI 大模型应用开发实战营》&#xff0c;自己一边跟着学一边开发了一个进阶版本的 OpenAI-Translator&#xff0c;在这里简单记录下开发过程和心得体会&#xff0c;供有兴趣的同学参考&#xff1b; ai翻译程序 版本迭代 在学习…

Spring-MVC的数据响应-19

在访问服务端MVC的时候&#xff0c;这个controller层进行相应操作之后 他要做两件事&#xff1a;页面跳转和返回字符串&#xff0c;在做完这些操作之后&#xff0c;我们一般进行页面展示:排除页面展示之外&#xff0c;有些需求可能直接回写给我们一些数据&#xff1a; 页面跳…

spring bean创建总览 1

1 开始 这是一个总图 下边慢慢看 我们最基础的写的方式就是xml的方式去写 像这样&#xff0c; 而我们会通过applicationContext的方式去获得我们的bean &#xff0c;我其中一篇博客就写到了applicationContext他的父类就是beanFactory 但是中间的是怎么样处理的呢&#xff1f…

springboot引入druid解析sql

一、前言 在开发中&#xff0c;有时我们可能会需要获取SQL中的表名&#xff0c;那么因为不同的数据源类型SQL会存在部分差异&#xff0c;那么我们就可以使用alibaba 的druid包实现不同的数据源类型的sql解析。 二、引入相关maven依赖 <dependency><groupId>com.a…

MySQL表的操作

MySQL表的操作 创建表查看表结构的详细信息修改表结构增加表结构属性删除表结构表结构的修改 删除表结构 创建表 语法: create table table_name( field1 datatype [comment xxxxx], field2 datatype [comment xxxxx], field3 datatype [comment xxxxx]) [charsetxxx][collatey…

idea 转换为 Maven Project 的方法

选项&#xff1a; Add as Maven Project

一、进入sql环境,以及sql的查询、新建、删除、使用

1、进入sql环境 》》》mysql -u root -p 》》》输入密码 2、sql语言的分类 3、注意事项&#xff1a; 4、基础操作&#xff1a; &#xff08;1&#xff09;查询所有数据库&#xff1a; show databases; 运行结果&#xff1a; &#xff08;2&#xff09;创建一个新的数据库&…

ceph数据分布

ceph的存储是无主结构&#xff0c;数据分布依赖client来计算&#xff0c;有两个条主要路径。 1、数据到PG 2、PG 到OSD 有两个假设&#xff1a; 第一&#xff0c;pg的数量稳定&#xff0c;可以认为保持不变&#xff1b; 第二&#xff0c; OSD的数量可以增减&#xff0c;OSD的…

我能“C”——实用的调试技巧

什么是bug&#xff1f; 调试是什么&#xff1f;有多重要&#xff1f; debug和release的介绍。 windows环境调试介绍。 一些调试的实例。 如何写出好&#xff08;易于调试&#xff09;的代码。 编程常见的错误。 1.什么是bug&#xff1f; 世界上第一个bug是程序员赫柏发现的。 …