WEB前端12-axios基础

Vue2-axios基础

1.axios基本概念

在现代的前端开发中,处理网络请求是至关重要的一部分。Axios 是一个流行的基于 Promise 的 HTTP 客户端,它可以在浏览器和 Node.js 环境中使用。它的设计简单易用,支持并行请求、拦截器、CSRF 防护等特性,使得它成为开发人员首选的 HTTP 请求库之一。

Axios 提供了许多优点,使得它比传统的 XMLHttpRequest 或者其他 HTTP 客户端更具吸引力:

1.简单易用的APIAxiosAPI 设计非常直观,支持 Promise API,使得异步请求变得更加简单和清晰。
2.浏览器和 Node.js支持:Axios 可以在浏览器和 Node.js 环境中无缝使用,这使得它可以用于各种类型的项目。
3.拦截器支持:可以在请求或响应被 then 或 catch 处理之前拦截它们。这对于在请求发送前或收到响应后执行额外的逻辑(比如添加认证信息、日志记录等)非常有用。
4.自动转换 JSON 数据:Axios 默认会自动将 JSON 数据转换为 JavaScript 对象,这简化了在请求和响应之间转换数据的过程。
5.错误处理:对于HTTP 请求错误,Axios 提供了清晰的错误信息和状态码,帮助开发者更容易地处理异常情况。
2.axios发送请求

安装:使用 npm 安装 Axios:

npm install axios -S

导入 Axios:安装完成后,在你的 JavaScript 文件中导入 Axios:

import axios from 'axios';

方法:Axios 提供了多种方法用于发起 HTTP 请求:

方法描述
axios.get(url[, config])发起 GET 请求
axios.delete(url[, config])发起 DELETE 请求
axios.head(url[, config])发起 HEAD 请求
axios.options(url[, config])发起 OPTIONS 请求
axios.post(url[, data[, config]])发起 POST 请求
axios.put(url[, data[, config]])发起 PUT 请求
axios.patch(url[, data[, config]])发起 PATCH 请求

参数

  • url: 请求的 URL 地址。
  • config: 可选的配置对象,可以包含查询参数 (params)、请求头 (headers)、认证信息 (auth) 等。
  • data: 可选的请求体数据,通常用于 POST、PUT 和 PATCH 请求。

1. 发送 GET 请求

async sendReq() {try {const response = await axios.get('/management_system/getStudentsServlet');console.log(response);} catch (error) {console.error('获取数据出错:', error);}
}

这段代码展示了如何使用 Axios 发送一个简单的 GET 请求,从指定的 URL 获取数据。

2. 发送带请求头的 POST 请求

async sendReq() {try {const response = await axios.post('/management_system/getStudentsServlet', null, {headers: { Authorization: 'Bearer your_token_here' }});console.log(response);} catch (error) {console.error('请求出错:', error);}
}

这里我们演示了如何在 POST 请求中添加自定义的请求头信息。

//servlet接受方式
System.out.println(request.getHeader("Authorization"));

3. 发送带参数的 GET ,POST请求

//GET方式
async sendReq() {try {const username = '白鹿';const password = '女神';const response = await axios.get(`/management_system/getStudentsServlet?username=${username}&password=${password}`);console.log(response);} catch (error) {console.error('请求出错:', error);}
}//POST方式
const response = await axios.post(`/management_system/getStudentsServlet`,null,{params:{username : name, message : msg}}
);
console.log(response);

这段代码展示了如何在 GET 请求中携带参数,参数会自动编码并添加到 URL 中。

//servlet接受方式
System.out.println("名字是:" + request.getParameter("name"));
System.out.println("信息是:" + request.getParameter("message"));
  1. 发送 JSON 数据的 POST 请求
async sendReq() {try {const data = {name: '白鹿',message: '女神'};const response = await axios.post('/management_system/getStudentsServlet', data);console.log(response);} catch (error) {console.error('请求出错:', error);}
}

这段代码展示了如何通过 POST 请求发送 JSON 格式的数据。

//servlet接受方式
StringBuilder sb = new StringBuilder();
BufferedReader reader = request.getReader();
String line;
while ((line = reader.readLine()) != null) {sb.append(line);
}
String json = sb.toString();
// 现在 `json` 变量中包含了请求体的 JSON 数据
System.out.println("Received JSON data: " + json);
  1. 发送 application/x-www-form-urlencoded 格式的 POST 请求

application/x-www-form-urlencoded 是 HTTP 请求的默认编码类型,通常用于通过 URL 参数传递较简单的表单数据。数据会以键值对的形式发送,每个键值对之间用 & 符号分隔,键名和键值都会进行 URL 编码。

async sendReq() {try {const params = new URLSearchParams();params.append('name', '白鹿');params.append('message', '女神');const response = await axios.post('/management_system/getStudentsServlet', params);console.log(response);} catch (error) {console.error('请求出错:', error);}
}

这段代码展示了如何以 URL 查询参数形式发送 POST 请求。

//servlet接受方式
System.out.println("名字是:" + request.getParameter("name"));
System.out.println("信息是:" + request.getParameter("message"));

6. 发送 multipart/form-data 格式的 POST 请求

multipart/form-data 格式通常用于上传文件或者发送复杂的数据结构,它允许将一个表单分成多个部分,每个部分有自己的内容类型和编码方式。每个部分之间用 boundary 进行分隔,这个 boundary 是一个唯一的字符串,用于区分各个部分。

async sendReq() {try {const formData = new FormData();formData.append('name', '白鹿');formData.append('message', '女神');const response = await axios.post('/management_system/getStudentsServlet', formData);console.log(response);} catch (error) {console.error('请求出错:', error);}
}
  • application/x-www-form-urlencoded:适合发送简单的键值对表单数据,如用户名和密码等。它的优点是简单易用,但不支持文件上传,且对于复杂的数据结构支持有限。
  • multipart/form-data:适合上传文件或者发送包含文件在内的复杂数据结构。它的优点是能够处理大文件和复杂的数据格式,但相对于 application/x-www-form-urlencoded,它需要更多的请求体积和处理时间。
3.axios默认配置

在使用axios时,一般使用的默认的axios,这使得一些常用的配置需要在每次发送请求的时候多次重复配置,所以我们可以修改axios的默认配置,减少重复的代码

const axios = create(config);

常见的 config 项有

名称含义
baseURL将自动加在 url 前面(常常用做修改统一路径,减少取消自动代理带来的工作量)
headers请求头,类型为简单对象
params跟在 URL 后的请求参数,类型为简单对象或 URLSearchParams
data请求体,类型有简单对象、FormData、URLSearchParams、File 等
withCredentials跨域时是否携带 Cookie 等凭证,默认为 false(在浏览器端请求服务器端时,默认在跨域情况下不会携带cookie,这使得服务器每次不会得到正确的cookie信息,这时需要设置发送的请求应携带cookie,因此可以添加withCredentials=true;在服务器端默认不会接受跨域来的cookie,因此在@CrossOrigin注解中allowCredentuals=true,用于接受cookie)
responseType响应类型,默认为 json
const _axios = axios.create({baseURL:"http://localhost:8080",withCredentials:true
});const response = await _axios.get("/management_system/getStudentsServlet");
console.log(response);
4.response对象属性
名称含义具体
data响应体数据 ⭐️
status状态码 ⭐️200 表示响应成功 400 请求数据不正确 401 身份验证没通过 403 没有权限 404 资源不存在 405 不支持请求方式 post 500 服务器内部错误
headers响应头
5.axios拦截器

Axios拦截器是在发送请求或接收响应前允许我们进行额外处理的机制。它可以用来全局地添加、修改或者捕获请求和响应。在实际应用中,拦截器可以用来处理诸如添加认证信息、统一处理错误、请求/响应日志记录等场景。

添加请求拦截器

请求拦截器允许我们在发送请求前对其进行修改或者添加额外信息,例如请求头部的设置。

import axios from 'axios';// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 可以在此处添加认证信息,例如 tokenconfig.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});

添加响应拦截器

响应拦截器允许我们在接收到响应后进行处理,例如统一处理错误、日志记录等操作。

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么// 可以在此处处理 HTTP 错误状态码,例如 401 Unauthorizedreturn Promise.reject(error);
});

在上面的例子中,axios.interceptors.response.use 中的第一个函数用于处理正常的响应,第二个函数用于处理响应时的错误。你可以根据需要对错误进行处理,例如弹出错误提示或者重新跳转到登录页面。

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

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

相关文章

【JavaScript】函数的动态传参

Javacript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言&…

Linux 常用命令之文件处理

Linux 文件处理命令指南 文件查看命令 cat (Concatenate and display files) # 显示文件内容 cat file.txt# 显示多个文件的内容 cat file1.txt file2.txt# 将文件内容合并并输出到新文件 cat file1.txt file2.txt > combined.txt# 以行号显示文件内容 cat -n file.txtta…

写代码对人的影响

1 代码是需要跑起来的,不能你写了一段代码运行不了 2 代码过程中有大量的bug,经常异常报错,你需要花费时间去解决 对人的影响就是解决问题的态度得到强化,解决问题要比坚持正确困难,坚持正确只是需要自然而然的努力&…

淘宝NPM镜像地址已经改了,2022年以前发布的相关内容的博文已经没参考价值

http://npm.taobao.org和 http://registry.npm.taobao.org 已于2022.06.30正式下线和停止DNS解析 淘宝NPM镜像站的新域名为 http://npmmirror.com http://registry.npm.taobao.org > https://registry.npmmirror.com windows系统在命令行窗口下执行如下命令即可&#xff1a…

C++ primer plus 第16章string 类和标准模板库, 算法的通用特征

C primer plus 第16章string 类和标准模板库, 算法的通用特征 C primer plus 第16章string 类和标准模板库, 算法的通用特征 文章目录 C primer plus 第16章string 类和标准模板库, 算法的通用特征16.6.2 算法的通用特征 16.6.2 算法的通用特征 正如您多次看到的,…

掌握SQL Server的PowerShell魔法:自动化数据库管理的艺术

掌握SQL Server的PowerShell魔法:自动化数据库管理的艺术 SQL Server与PowerShell的结合为数据库管理员(DBA)提供了一种强大的自动化数据库管理工具。通过PowerShell,可以执行复杂的数据库任务,从简单的查询到复杂的数据迁移和备份策略的实现…

Python接口自动化测试框架(实战篇)-- 数据库操作MySQL

文章目录 一、前言二、数据库什么是数据验证为什么需要操作数据库做数据验证?现在回到怎样做数据验证的问题上来 三、[PyMSQL](https://pypi.org/project/pymssql/)pymysql如何操作数据库实际应用 四、总结 一、前言 说起数据库的操作,咱们应该保持一颗敬畏的心&a…

Ubuntu安装terminator教程

Terminator 是一个高级的终端仿真器,专为 Linux 和 Unix 系统设计。它的主要特点是提供了丰富的多窗口和多标签功能,使用户能够在一个窗口中管理多个终端会话。这对于系统管理员、开发人员以及需要同时运行多个命令行任务的用户来说,极为方便。 一、安装 1、更新包 sudo a…

【Python】计算游戏得分

一、题目 Kevin and Stuart want to play the The Minion Game. Game Rules Both players are given the san string S.Both players have to make substrings using the letters of the string S.Stuart has to make words starting with consonants.Kevin has to make wor…

Could not find a package configuration file provided by “catkin_simple“ 的参考解决方法

文章目录 写在前面一、问题描述二、解决方法参考链接 写在前面 自己的测试环境: Ubuntu20.04 ROS-Noetic 一、问题描述 CMake Error at /***/CMakeLists.txt:4 (find_package):By not providing "Findcatkin_simple.cmake" in CMAKE_MODULE_PATH thisp…

vue项目启动报错 vue与vue-template-compiler版本不一致

出现错误 Vue packages version mismatch: vue2.6.12 (/Users/work_ws/project/my/astar-education/astar-education-ui/node_modules/vue/dist/vue.runtime.common.js)vue-template-compiler2.6.13 (/Users/work_ws/project/my/astar-education/astar-education-ui/node_mod…

图中的最短环

2608. 图中的最短环 现有一个含 n 个顶点的 双向 图,每个顶点按从 0 到 n - 1 标记。图中的边由二维整数数组 edges 表示,其中 edges[i] [ui, vi] 表示顶点 ui 和 vi 之间存在一条边。每对顶点最多通过一条边连接,并且不存在与自身相连的顶…

Hive——UDF函数:高德地图API逆地理编码,实现离线解析经纬度转换省市区(离线地址库,非调用高德API)

文章目录 1. 需求背景数据现状业务需求面临技术问题寻求其他方案 2. 运行环境软件版本Maven依赖 3. 获取离线地址库4. Hive UDF函数实现5. 创建Hive UDF函数6. 参考 1. 需求背景 数据现状 目前业务系统某数据库表中记录了约3亿条用户行为数据,其中两列记录了用户触…

Java1.2标准之重要特性及用法实例(十三)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列…

SciPy 与 MATLAB 数组

SciPy 与 MATLAB 数组 SciPy 是一个开源的 Python 库,广泛用于科学和工程计算。它构建在 NumPy 数组的基础之上,提供了许多高级科学计算功能。MATLAB 是一个高性能的数值计算环境,它也使用数组作为其基础数据结构。在这篇文章中,我们将探讨 SciPy 和 MATLAB 在数组操作上的…

征服 Docker 镜像访问限制:KubeSphere v3.4.1 成功部署全攻略

近期,KubeSphere 社区的讨论中频繁出现关于 Docker 官方镜像仓库访问受限的问题。 本文旨在为您提供一个详细的指南, 展示在 Docker 官方镜像访问受限的情况下,如何通过 KubeKey v3.1.2 一次性成功部署 KubeSphere v3.4.1 以及 Kubernetes …

深入剖析:GaussDB与MySQL在COUNT查询中的并行化技术

引言 数据库查询性能优化是数据库管理和开发中的一个重要议题。在处理大数据量的COUNT查询时,传统的单线程处理方式可能无法满足现代应用的性能需求。GaussDB(for MySQL)和MySQL作为流行的数据库系统,它们在并行查询优化方面有着各自的策略和技术。本文…

Python批量采集某东评论,实现可视化分析

女朋友没事就喜欢网购,买一大堆又不用,总说不合适,为了不让她花冤枉钱,于是我决定用Python写一个采集商品评论的脚本,然后对商品进行分析,这样就不怕踩到坑了! 让我们直接开始本次操作 准备工作…

Python及Jupyter-Notebook安装

来源: “码农不会写诗”公众号 链接:Python及Jupyter-Notebook安装 文章目录 01 Python安装1.1 下载安装包1.2 双击安装包,开始安装1.3 选择安装配置1.4 选择需要安装的Optional Feature,点击Next1.5 选择需要安装的Advanced Feat…