使用Axios函数库进行网络请求的使用指南

目录

  • 前言
  • 1. 什么是Axios
  • 2. Axios的引入方式
    • 2.1 通过CDN直接引入
    • 2.2 在模块化项目中引入
  • 3. 使用Axios发送请求
    • 3.1 GET请求
    • 3.2 POST请求
  • 4. Axios请求方式别名
  • 5. 使用Axios创建实例
    • 5.1 创建Axios实例
    • 5.2 使用实例发送请求
  • 6. 使用async/await简化异步请求
    • 6.1 获取所有文章数据
    • 6.2 捕获异常
  • 7. 将Axios提取成模块
  • 8. 小结

前言

在现代的前端开发中,API调用是实现前后端数据交互的重要环节。而在众多的HTTP库中,Axios以其简洁的语法、丰富的功能和易于扩展的特性,成为了开发者的首选。本篇文章将深入介绍Axios的使用方法,包括如何引入、基本使用方法、请求方式别名、异步操作等,并通过示例代码帮助读者快速掌握Axios。

1. 什么是Axios

Axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js环境下的网络请求。它支持多种请求方式(GET、POST、PUT、DELETE等),支持Promise语法,并且兼容ES7的async/await语法。Axios能够轻松发送异步请求,处理JSON格式数据,还支持自动转换请求和响应数据格式、拦截请求与响应、取消请求等高级功能。
在这里插入图片描述

2. Axios的引入方式

在项目中使用Axios有多种引入方式,主要包括通过CDN直接引入和在模块化项目中通过npm安装。

2.1 通过CDN直接引入

在HTML文件中,可以直接使用script标签引入Axios的CDN链接:

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

通过这种方式引入后,Axios会挂载到全局的axios变量上,可以直接使用axios对象进行请求操作。

2.2 在模块化项目中引入

对于前端开发中常见的模块化项目(如基于Webpack、Vite构建的项目),推荐通过npm安装Axios:

npm install axios

安装完成后,在需要的文件中通过import导入:

import axios from 'axios';

这样可以确保项目依赖的管理,同时避免全局污染。

3. 使用Axios发送请求

Axios支持多种HTTP请求方法,开发者可以根据具体需求选择不同的方法来发送请求。最基本的请求方法为GET和POST,这两者涵盖了大多数的使用场景。

3.1 GET请求

GET请求用于从服务器获取数据。例如,我们希望获取所有文章数据:

axios.get('http://localhost:8080/article/getAll').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

在上述代码中,通过axios.get()发送请求,若请求成功,则可以通过response.data获取服务器返回的数据;若失败,则进入catch方法进行错误处理。

3.2 POST请求

POST请求用于向服务器发送数据,一般用于提交表单或其他信息。例如:

axios.post('http://localhost:8080/article/create', {title: 'Axios使用指南',content: '本文详细介绍了Axios的使用方法...'
}).then(response => {console.log(response.data);}).catch(error => {console.error(error);});

axios.post()的第一个参数是请求URL,第二个参数是请求体,通常以JSON格式传递。

4. Axios请求方式别名

为了简化代码,Axios提供了所有常用请求方式的别名,开发者可以直接使用这些别名来发送相应的请求。

请求方式别名说明
GETaxios.get(url, config)用于获取数据
POSTaxios.post(url, data, config)提交数据
PUTaxios.put(url, data, config)更新资源
DELETEaxios.delete(url, config)删除资源

这些别名方法的参数包括URL、请求数据、请求配置(可选),能够满足不同的需求。通过这些别名,Axios进一步提升了开发效率。

5. 使用Axios创建实例

在项目中频繁调用API时,为了避免重复编写baseURL等信息,我们可以创建Axios实例。下面通过代码示例展示如何创建一个带有基础URL的Axios实例。
在这里插入图片描述

5.1 创建Axios实例

首先,定义一个公共的baseURL前缀,然后通过axios.create()创建一个实例:

const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL: baseURL
});

通过instance可以直接调用指定API而不需要重复写baseURL

5.2 使用实例发送请求

实例创建完成后,就可以通过instance来发送请求:

instance.get('/article/getAll').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

在这里,/article/getAll是相对路径,Axios会自动拼接baseURL,构成完整的URL并发送请求。

6. 使用async/await简化异步请求

在Axios中,Promise的语法已经非常简洁,但在一些复杂场景下,async/await的同步风格可以使代码逻辑更为直观。以下是使用async/await发送请求的示例。

6.1 获取所有文章数据

我们可以将获取文章列表的功能封装成一个异步函数:

export async function articleGetAllService() {try {const response = await instance.get('/article/getAll');return response.data;} catch (error) {console.error(error);}
}

在这个例子中,通过await等待instance.get()的结果,并在返回前检查是否发生错误。这种方式能够同步等待服务器响应,更加符合人类的阅读逻辑。

6.2 捕获异常

async/await同样支持try...catch进行错误捕获,便于进行统一的错误处理。例如,在请求失败时,可以在控制台输出错误信息或提示用户重新尝试。

7. 将Axios提取成模块

在大型项目中,建议将Axios相关的代码集中到一个模块中,这样有助于管理API调用。以下是一个简单的Axios服务模块示例:

// apiService.js
import axios from 'axios';const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL: baseURL
});// 获取所有文章数据的函数
export async function articleGetAllService() {try {const response = await instance.get('/article/getAll');return response.data;} catch (error) {console.error(error);}
}

这个模块包含Axios实例的创建和API调用函数的封装,使用时只需在其他文件中导入模块即可。这样可以提高代码的可维护性和复用性。

8. 小结

在现代前端开发中,Axios提供了强大而灵活的HTTP请求能力。通过本篇文章,我们详细探讨了Axios的引入方式、请求方法的别名、实例的创建、async/await的使用等内容。将Axios作为模块提取,更加符合实际项目开发需求,可以有效提高代码的复用性和可维护性。

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

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

相关文章

MySQL —— MySQL索引介绍、索引数据结构、聚集索引和辅助索引、索引覆盖

文章目录 索引概念索引分类索引数据结构种类Innodb 索引数据结构聚集索引和辅助索引&#xff08;非聚集索引&#xff09;聚集索引辅助索引&#xff08;非聚集索引&#xff09; 索引覆盖 索引概念 索引是对数据库表中一列或多列的值进行排序后的一种数据结构。用于帮助 mysql 提…

python实现十进制转换二进制,tkinter界面

目录 需求 效果 代码实现 代码解释 需求 python实现十进制转换二进制 效果 代码实现 import tkinter as tk from tkinter import messageboxdef convert_to_binary():try:# 获取输入框中的十进制数decimal_number int(entry.get())# 转换为二进制binary_number bin(de…

机器学习—正则化和偏差或方差

正则化参数的选择对偏差和方差的影响 用一个四阶多项式&#xff0c;要用正则化拟合这个模型&#xff0c;这里的lambda的值是正则化参数&#xff0c;它控制着你交易的金额&#xff0c;保持参数w与训练数据拟合&#xff0c;从将lambda设置为非常大的值的示例开始&#xff0c;例如…

在Node.js中如何使用TypeScript

第一步&#xff1a;创建一个Node.js项目的package.json文件 npm init -y第二步&#xff1a;添加TypeScript、添加node.d.ts npm install typescript -D npm install types/node -D第三步&#xff1a;初始化一个tsconfig.json文件 npx tsc --init --rootDir src --outDir lib…

零基础Java第十九期:认识String(一)

目录 一、String的重要性 二、String的常用方法 2.1. 字符串构造 2.2. String对象的比较 2.3. 字符串查找 2.4. 转化 2.4. 字符串替换 2.5. 字符串拆分 2.6. 字符串截取 一、String的重要性 在C语言中已经涉及到字符串了&#xff0c;但是在C语言中要表示字符串只能…

面试经典 150 题:20、2、228、122

20. 有效的括号 参考代码 #include <stack>class Solution { public:bool isValid(string s) {if(s.size() < 2){ //特判&#xff1a;空字符串和一个字符的情况return false;}bool flag true;stack<char> st; //栈for(int i0; i<s.size(); i){if(s[i] ( |…

【SpringBoot】公共字段自动填充

问题引入 JavaEE开发的时候&#xff0c;新增字段&#xff0c;修改字段大都会涉及到创建时间(createTime)&#xff0c;更改时间(updateTime)&#xff0c;创建人(craeteUser)&#xff0c;更改人(updateUser)&#xff0c;如果每次都要自己去setter()&#xff0c;会比较麻烦&#…

深度学习-卷积神经网络CNN

案例-图像分类 网络结构: 卷积BN激活池化 数据集介绍 CIFAR-10数据集5万张训练图像、1万张测试图像、10个类别、每个类别有6k个图像&#xff0c;图像大小32323。下图列举了10个类&#xff0c;每一类随机展示了10张图片&#xff1a; 特征图计算 在卷积层和池化层结束后, 将特征…

stm32——通用定时器时钟知识点

&#xff08;该图来自小破站 铁头山羊老师的stm32标准库教学&#xff09;

SobarQube实现PDF报告导出

文章目录 前言一、插件配置二、使用步骤1.新生成一个Token2.将拷贝的Token加到上文中执行的命令中3.查看报告 三、友情提示总结 前言 这篇博文是承接此文 .Net项目在Windows中使用sonarqube进行代码质量扫描的详细操作配置 描述如何导出PDF报告 众所周知&#xff0c;导出PDF功…

【数据结构】10.线索二叉树

一、线索二叉树的产生 采用先序、中序、后序三种方法遍历二叉树后都可以得到一个线性序列&#xff0c;序列上的每一个结点&#xff08;除了第一个和最后一个&#xff09;都有一个前驱和一个后继&#xff0c;但是&#xff0c;这个线性序列只是逻辑的概念&#xff0c;不是物理结…

如何合理设计一套springcloud+springboot项目中的各个微服务模块之间的继承关系的最优方案

文章目录 一、模块化设计所遵循的原则二、项目架构设计三、各个模块作用说明3.1 core 模块3.2 common 模块3.3 generatorcode模块3.4 business 模块3.5 web 模块3.6 admin 模块3.7 父pom 四、采用import引入SpringBoot 在springcloud微服务项目中经常用到多模块化的架构设计&am…

HarmonyOS4+NEXT星河版入门与项目实战--------开发工具与环境准备

文章目录 1、熟悉鸿蒙官网1、打开官网2、下载 DevEco Studio3、HarmonyOS 资源库4、开发指南与API 2、安装 DevEco Studio1、软件安装2、配置开发工具 1、熟悉鸿蒙官网 1、打开官网 百度搜索 鸿蒙开发者官网 点击进入开发者官网&#xff0c;点击开发&#xff0c;可以看到各种…

单元测试、集成测试、系统测试、验收测试、压力测试、性能测试、安全性测试、兼容性测试、回归测试(超详细的分类介绍及教学)

目录 1.单元测试 实现单元测试的方法&#xff1a; 注意事项&#xff1a; 2.集成测试 需注意事项&#xff1a; 实现集成测试的方法&#xff1a; 如何实现高效且可靠的集成测试&#xff1a; 3.系统测试 实现系统测试的方法: 须知注意事项&#xff1a; 4.验收测试 实现验…

Ubuntu24 上安装搜狗输入法

link 首先在终端中依次输入以下代码 sudo apt update sudo apt install fcitx 找到语言支持 在终端中依次输入 sudo cp /usr/share/applications/fcitx.desktop /etc/xdg/autostart/ sudo apt purge ibus 进入网页 搜狗输入法linux-首页​ shurufa.sogou.com/linux 找到刚才下…

FairyGUI和Unity联动(入门篇)

一、FairyGUI编辑器中 1.新建按钮、新建组件 编辑器中界面简易设计如下 2.文件-发布设置-发布路径&#xff1a;自己unity项目Resources所在的路径 二、Unity 使用代码展示UI using FairyGUI; using System.Collections; using System.Collections.Generic; using UnityEngi…

【Java知识】Java性能测试工具JMeter

一文带你了解什么是JMeter 概述JMeter的主要功能&#xff1a;JMeter的工作原理&#xff1a;JMeter的应用场景&#xff1a;JMeter的组件介绍&#xff1a; 实践说明JMeter实践基本步骤&#xff1a;JMeter实践关键点&#xff1a; JMeter支持哪些参数化技术&#xff1f;常见插件及其…

Redis的缓存穿透、缓存雪崩、缓存击穿问题及有效解决方案

目录 一、缓存穿透 1.简介 2.解决方案 3.修改前的代码 4.修改过后的代码 二、缓存雪崩 1.简介 2.解决方案 三、缓存击穿 1.简介 2.解决方案 3.用代码来实现互斥锁来解决缓存击穿 4.用代码来实现逻辑过期解决缓存击穿 四、缓存穿透和缓存击穿的区别 一、缓存穿透 …

CPU的性能指标总结(学习笔记)

CPU 性能指标 我们先来回顾下&#xff0c;描述 CPU 的性能指标都有哪些。 首先&#xff0c;最容易想到的应该是 CPU 使用率&#xff0c;这也是实际环境中最常见的一个性能指标。 用户 CPU 使用率&#xff0c;包括用户态 CPU 使用率&#xff08;user&#xff09;和低优先级用…

【go从零单排】Environment Variables环境变量

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;环境变量是用于配置程序行为的一种常见方式。它们可以用…