day20JS-axios数据通信

1. 什么是axios

        axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，简单的理解就是ajax的封装，只不过它是Promise的实现版本。

特性：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据

2. 怎么导入axios

1. 安装：在vscode的集成终端中输入 npm i axios 的命令下载axios模块。

2. 在html文件中引入

方法一：外部引入

<script src="./node_modules/axios/dist/axios.js"></script>

方法二：内部引入

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js"</script>
</body>

3. 简单的get请求

写法一：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";axios({url: "http://localhost:4003/users"}).then(function (result) {console.log(result);console.log(result.data);})</script>
</body>

写法二：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios({url: "http://localhost:4003/users"})console.log(result);console.log(result.data);}</script>
</body>

4. axios可配置的属性

axios可配置的属性：

  • url ：服务器的地址。
  • method ：请求方法的类型。
  • params(用于get) / data(用于post)：传的参数。是key-value键值对。
  • headers ：请求头部信息。是key-value键值对。
  • responseType：服务器响应的数据类型。是什么数据类型，响应的数据就会转化为什么数据类型。

      例如： responseType: "json" -->服务器响应的数据是json数据

  • then((response)=>{...}) ：请求成功执行的函数。
  • catch((error)=>{...})：请求失败执行的函数。

5. axios的get配置 

5.1 配置方法一

配置模板：

        axios({url: "被访问服务器地址",// 默认请求方式为getmethod: "get",// 传递参数params: {key: value},// 设置请求头信息headers: {key: value},// 服务器响应的数据是json数据responseType: "json"}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch((error) => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios({url: "http://localhost:4003/users",method: "get",params: { user: "kwj", password: "kwj123456" },headers: { "X-Token": "kwj123456" },responseType: "json"})console.log(result);console.log(result.data);}</script>
</body>

5.2 配置方法二

配置模板：

        axios.get("url", {// 传递参数params: {key: value},// 设置请求头信息，可以传递空值headers: {key: value}}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch(error => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios.get("http://localhost:4003/users", {params: { user: "kwj", password: "kwj123456" },headers: { "X-Token": "kwj123456" },responseType: "json"});console.log(result);console.log(result.data);}</script>
</body>

6. axios的post配置 

6.1 配置方法一

配置模板：

        axios({url: "被访问服务器地址",method: "post",// 传递参数data: {key: value},// 设置请求头信息headers: {key: value},responseType: 'json'}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch(error => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios({url: "http://localhost:4003/postusers",method: "post",data: { user: "kwj", password: "kwj123456" },headers: { "X-Token": "kwj123456" },responseType: "json"})console.log(result);console.log(result.data);}</script>
</body>

6.2 配置方法二

配置模板：

        let data = {key: value},headers = {USERID: "",TOKEN: ""};// 若无headers信息时，可传空对象占用参数位置axios.post("url", data, {headers}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch((error) => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" });console.log(result);console.log(result.data);}</script>
</body>

7. axios并发处理

并发方法：

axios.all([ ]) ：同时发送多个请求。注意该方法的参数是数组。

axios.spread()：在then方法中执行了 axios.spread 方法。接收axios.all方法中每个请求返回的响应。

 案列1：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let resultList = await axios.all([axios.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}),axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })])console.log(resultList);}</script>
</body>

案列2：把案列1改为解构 ，下面有两种解决方法，推荐使用写法一。

<body><script type="module">// 引入方法import axios from "./node_modules/axios/dist/esm/axios.js";//写法一：解构方法init();async function init() {let [result1, result2] = await axios.all([axios.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}),axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })])console.log(result1, result2);}
----------------------------------------------------------------------------------------//写法二：在then方法中执行了 axios.spread 方法axios.all([axios.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}),axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })]).then(axios.spread((res1, res2) => {console.log(res1, res2);}))</script>
</body>

8. axios的全局配置 

8.1 简单的全局配置 

1. 在js文件夹下创建一个request.js.js文件，并编写js文件。

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 默认导出axios接口
export default axios;

2. 在html文件中使用它

<body><script type="module">// 引入编写的文件import request from "./js/request.js";request.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

8.2 axios全局配置的基础配置

axios的全局配置的好处 ：可以设置一下基础的配置，例如默认路劲，超时时间等。

request.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2. 配置默认路劲
axios.defaults.baseURL = "http://localhost:4003";
// 3. 配置超时时间
axios.defaults.timeout = 3000;//4.默认导出axios接口
export default axios;

 html文件:

<body><script type="module">// 引入编写的文件import request from "./js/request.js";request.get("/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

8.3 创建 axios实例

        通过创建 axios实例可以访问不同的服务器路劲，用于不同的请求访问。想要访问哪些路劲可以单独创建不同的axios实例。

1. 创建一个request1.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4003",timeout: 3000
})//3.默认导出axios接口
export default instance;

2. 创建一个request2.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4004",timeout: 3000
})//3.默认导出axios接口
export default instance;

3. 创建一个html文件，引入request1.js文件和request2.js文件。

<body><script type="module">// 引入编写axios实例的文件import request1 from "./js/request1.js";import request2 from "./js/request2.js";//通过axios实例可以访问到不同的服务器的路劲request1.get("/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

9. axios拦截器

9.1 拦截器的分类

  • 请求拦截器（成功回调函数，失败回调函数）
  • 响应拦截器（成功回调函数，失败回调函数）

9.2 请求拦截器使用方法

1. 请求拦截器

写法一：

axios.interceptors.request.use(成功回调函数，失败回调函数）

写法二：

axios实例对象名.interceptors.request.use(成功回调函数，失败回调函数）

请求拦截器中有两个回调函数，一个是请求成功时的拦截器，一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。

2. 请求拦截器的作用：一般用于发送请求时加入Cookie或者LocalStorage中的部分数据，让指定的路由请求都携带这些数据。例如：可以根据所给定的路由在请求拦截器中给特定请求添加统一的请求头部信息，例如token。

案列：

1. 创建一个request1.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4003",timeout: 3000
})//3.请求拦截器
instance.interceptors.request.use((request) => {// 请求成功，判断是否是注册页面的路由或者是登录页面的路由if (!/register|login/.test(request.url)) {//添加请求头部信息request.headers.user = localStorage.user;request.headers.token = localStorage.token;}return request;
}, (error) => {//请求失败return error;
})//4.默认导出axios接口
export default instance;

2. 创建一个html文件，引入request1.js文件。

<body><script type="module">// 引入编写axios实例的文件import request1 from "./js/request1.js";import request2 from "./js/request2.js";//通过axios实例可以访问到不同的服务器的路劲request1.get("/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

9.3 响应拦截器使用方法

1. 响应拦截器：

写法一：

axios.interceptors.response.use(成功回调函数，失败回调函数）

写法二：

axios实例对象名.interceptors.response.use(成功回调函数，失败回调函数）

请求拦截器中有两个回调函数，一个是请求成功时的拦截器，一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。

2. 响应拦截器的作用：

  • 预先解析处理部分接口相同的数据。
  • 接收服务器返回的数据时，可以得到服务器设置的部分头部信息、Cookie或者LocalStorage中数据直接进行存储。
  • 当响应的结果有问题时，可以使用响应拦截器进行处理，控制路由的跳转。比如发信息时没有携带token,这时候返回的信息中提示没有携带token就可以跳转到登录页面。

案列：

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4003",timeout: 3000
})//3.请求拦截器
instance.interceptors.request.use((request) => {// 请求成功，判断是否是注册页面的路由或者是登录页面的路由if (!/register|login/.test(request.url)) {//添加请求头部信息request.headers.user = localStorage.user;request.headers.token = localStorage.token;}return request;
}, (error) => {//请求失败return error;
})//4.响应拦截器
instance.interceptors.response.use((response) => {if (!/register/.test(response.url)) {//获取请求头部信息localStorage.user = response.headers.user;localStorage.token = response.headers.token;// boll为false时,err为true时if (!response.data.result.boll || response.data.err) {// 跳转到登录页面}}return response;
}, (error) => {//请求失败return error;
})//5.默认导出axios接口
export default instance;

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

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

相关文章

Linux下进程间的通信--共享内存

Linux下进程间的通信--共享内存

共享内存概述&#xff1a; 共享内存是进程间通信的一种方式&#xff0c;它允许两个或多个进程共享一个给定的存储区。共享内存是最快的一种IPC形式&#xff0c;因为它允许进程直接对内存进行读写操作&#xff0c;而不需要数据在进程之间复制。 共享内存是进程间通信&#xff…
阅读更多...
Linux 中的 Screen 命令详解

Linux 中的 Screen 命令详解

目录 前言1. 什么是 Screen 命令2. Screen 命令的主要功能3. Screen 命令的安装4. Screen 的基础使用4.1 启动一个新的 Screen 会话4.2 恢复一个断开的 Screen 会话4.3 退出一个 Screen 会话 5. Screen 命令的常用参数5.1 -S&#xff1a;指定会话名称5.2 -r&#xff1a;恢复会话…
阅读更多...
使用SpringCloud构建可伸缩的微服务架构

使用SpringCloud构建可伸缩的微服务架构

Spring Cloud是一个用于构建分布式系统的开源框架。它基于Spring Boot构建&#xff0c;并提供了一系列的工具和组件&#xff0c;用于简化开发分布式系统的难度。Spring Cloud可以帮助开发人员快速构建可伸缩的微服务架构。 要使用Spring Cloud构建可伸缩的微服务架构&#xff0…
阅读更多...
PCIe进阶之TL：Request Handling Rules

PCIe进阶之TL：Request Handling Rules

1 Handling of Received TLPs 本节介绍接收到的 TLP 在数据链路层经过完整性验证之后，这些 TLP 在事务处理层时的处理方式。这些规则如下图所示： 接收侧会忽略保留字段。如果 Fmt 字段显示存在至少一个 TLP Prefix ： （1）通过检查后续 DWORD 的第一个字节中的 Fmt 字段，…
阅读更多...
HTML中直接创建一个“onoff”图形开关包括css+script

HTML中直接创建一个“onoff”图形开关包括css+script

1. HTML中直接创建一个“onoff”图形开关 下面是一个完整的HTML文档示例 在HTML中直接创建一个“onoff”图形开关&#xff08;通常指的是一个类似于物理开关的UI组件&#xff0c;可以切换开或关的状态&#xff09;&#xff0c;并不直接支持&#xff0c;因为HTML主要用于内容的…
阅读更多...
研究生存指南：必备Zotero插件，让你的文献管理更轻松

研究生存指南：必备Zotero插件，让你的文献管理更轻松

在读研阶段&#xff0c;我经常面临大量文献阅读和项目研究的任务。忽略文献整理会导致后续使用时非常不便&#xff0c;查找困难且混乱。导师向我们推荐了 Zotero&#xff0c;经过亲身试用&#xff0c;我发现它非常好用&#xff01;zotero有非常多的插件&#xff0c;能够一个就满…
阅读更多...
web学习——VUE

web学习——VUE

VUE&Element 今日目标&#xff1a; 能够使用VUE中常用指令和插值表达式能够使用VUE生命周期函数 mounted能够进行简单的 Element 页面修改能够完成查询所有功能能够完成添加功能 1&#xff0c;VUE 1.1 概述 接下来我们学习一款前端的框架&#xff0c;就是 VUE。 Vue 是…
阅读更多...
kubernetes调度2

kubernetes调度2

1、各种缩写的应用 [rootk8s-master test]# kubectl get rsNAME DESIRED CURRENT READY AGEtest001-64c7957b5c 2 2 2 8m59stest001-698b98bb8f 0 0 0 12m[rootk8s-master test]# kubectl get replicas…
阅读更多...
昂科烧录器支持Senasic琻捷电子的蓝牙低功耗芯片SNP746

昂科烧录器支持Senasic琻捷电子的蓝牙低功耗芯片SNP746

芯片烧录行业领导者-昂科技术近日发布最新的烧录软件更新及新增支持的芯片型号列表&#xff0c;其中Senasic琻捷电子的蓝牙低功耗芯片SNP746已经被昂科的通用烧录平台AP8000所支持。 SNP746是一款蓝牙低功耗芯片&#xff0c;集成了压力传感器和加速度传感器的测量电路。它是为…
阅读更多...
git报错：无法读取远程分支 ‘origin‘ does not appear to be a git repository

git报错：无法读取远程分支 ‘origin‘ does not appear to be a git repository

问题分析 push上传的时候本地分支和远程分支断开连接 所以重新链接即可 排查问题 1. 查看是否有分支&#xff0c;检查分支是否正确 git branch -v 2. 查看连接是否断开&#xff0c;断开无内容展示 查看远程仓库详细信息&#xff0c;可看到仓库地址 git remote -v 解决…
阅读更多...
Linux 信号的产生

Linux 信号的产生

1. 概念 在Linux系统中&#xff0c;信号是一种进程间通信的机制&#xff0c;它允许操作系统或其他进程向特定进程发送异步通知。我们可以通过命令 kill -l来查看信号的种类&#xff1a; Linux系统中的信号可以分为两大类&#xff1a;传统信号和实时信号。从上图可以看出它们分…
阅读更多...
htop(1) command

htop(1) command

文章目录 1.简介2.格式3.选项4.交互式命令5.示例6.小结参考文献 1.简介 htop 是一种交互式、跨平台的基于 ncurses 的进程查看器。 类似于 top&#xff0c;但 htop 允许您垂直和水平滚动&#xff0c;并使用指向设备(鼠标)进行交互。您可以观察系统上运行的所有进程&#xff0…
阅读更多...
24年蓝桥杯及攻防世界赛题-MISC-2

24年蓝桥杯及攻防世界赛题-MISC-2

11 Railfence fliglifcpooaae_hgggrnee_o{cr} 随波逐流编码工具 分为5栏时，解密结果为:flag{railfence_cipher_gogogo} 12 Caesar rxms{kag_tmhq_xqmdzqp_omqemd_qzodkbfuaz} mode1 #12: flag{you_have_learned_caesar_encryption} 随波逐流编码工具 13 base64 base64解…
阅读更多...
iOS17找不到developer mode

iOS17找不到developer mode

iOS17找不到开发者模式 developer mode 下载过app之后、弹窗Developer Mode Required之后&#xff0c;这个菜单就出现了&#xff08;之前死活找不到&#xff09;。 背景&#xff1a;用蒲公英分发测试app&#xff0c;有个同事买了新机(iphone 15 pro max)&#xff0c;添加了白名…
阅读更多...
ppt一键生成免费版软件有哪些？如何高效生成论文答辩？

ppt一键生成免费版软件有哪些？如何高效生成论文答辩？

答辩经验丰富的人都知道&#xff0c;制作论文答辩ppt是一项既繁琐又耗时的工作。 我们需要从数万字的论文中提炼关键点&#xff0c;梳理内容的逻辑关系&#xff0c;然后进行细致的排版和美化&#xff0c;最后还要进行反复的检查和试讲。整个过程不仅耗费时间&#xff0c;而且需…
阅读更多...
硬件工程师笔试面试——变压器

硬件工程师笔试面试——变压器

目录 9、变压器 9.1 基础 变压器原理图 变压器实物图 9.1.1 概念 9.1.2 变压器组成结构 9.1.3 变压器原理 9.1.4 变压器的类型 9.1.5 应用领域 9.2 相关问题 9.2.1 变压器的工作原理是什么? 9.2.2 如何选择合适的变压器类型? 9.2.3 变压器在实际应用中，如何进行…
阅读更多...
8.1差分边缘检测

8.1差分边缘检测

基本概念 差分边缘检测是一种图像处理技术&#xff0c;用于检测图像中的边缘。边缘是指图像中灰度值发生显著变化的区域。差分边缘检测通常通过计算图像的梯度来实现&#xff0c;梯度反映了灰度值的变化率。在OpenCV中&#xff0c;可以使用不同的算子来检测不同方向的边缘&…
阅读更多...
[docker]入门

[docker]入门

本文章主要讲述的是&#xff0c;docker基本实现原理&#xff0c;docker概念的解释&#xff0c;docker的使用场景以及docker打包与部署的应用。 文章中docker所运行的系统&#xff1a;CentOS Linux release 7.9.2009 (Core) 目录 docker是什么&#xff0c;什么时候需要去使用 …
阅读更多...
【Git原理与使用】版本管理与分支管理（1）

【Git原理与使用】版本管理与分支管理（1）

目录 一、基本操作 1、初识Git 2、Git安装[Linux-centos] 3、Git安装[ Linnx-ubuntu] 4、创建git本地仓库 5、配置Git 6、认识工作区、暂存区、版本库 7、添加文件 8、查看历史提交记录 9、查看.git文件目录结构 10、查看版本库对象的内容 11、小结&#xff08;在本地的.git仓库…
阅读更多...
回归预测|基于饥饿游戏搜索优化随机森林的数据回归预测Matlab程序HGS-RF 多特征输入单输出 高引用先用先创新

回归预测|基于饥饿游戏搜索优化随机森林的数据回归预测Matlab程序HGS-RF 多特征输入单输出 高引用先用先创新

回归预测|基于饥饿游戏搜索优化随机森林的数据回归预测Matlab程序HGS-RF 多特征输入单输出 高引用先用先创新 文章目录 一、基本原理1. 饥饿游戏搜索优化算法&#xff08;HGS&#xff09;简介2. 随机森林&#xff08;RF&#xff09;简介3. HGS-RF回归预测流程1. 初始化2. 随机森…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023