day20JS-axios数据通信

devtools/2024/11/14 13:01:17/

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请求

写法一：

javascript"><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 配置方法一

配置模板：

javascript">        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);});

案列：

javascript"><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 配置方法二

配置模板：

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

案列：

javascript"><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 配置方法一

配置模板：

javascript">        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);});

案列：

javascript"><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 配置方法二

配置模板：

javascript">        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);});

案列：

javascript"><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：

javascript"><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改为解构 ，下面有两种解决方法，推荐使用写法一。

javascript"><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文件。

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

2. 在html文件中使用它

javascript"><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文件:

javascript">// 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文件:

javascript"><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文件:

javascript">// 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文件:

javascript">// 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文件。

javascript"><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文件:

javascript">// 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就可以跳转到登录页面。

案列：

javascript">// 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.ppmy.cn/devtools/113136.html

相关文章

初学Linux（学习笔记）

初学Linux（学习笔记）

初学Linux&#xff08;学习笔记&#xff09; 前言 本文跳过了Linux前期的环境准备&#xff0c;直接从知识点和指令开始。 知识点&#xff1a; 1.目录文件夹&#xff08;Windows&#xff09; 2.文件内容属性 3.在Windows当中区分文件类型是通过后缀&#xff0c;而Linux是通过…
阅读更多...
Java项目: 基于SpringBoot+mybatis+maven校园资料分享平台(含源码+数据库+答辩PPT+毕业论文)

Java项目: 基于SpringBoot+mybatis+maven校园资料分享平台(含源码+数据库+答辩PPT+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven校园资料分享平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简…
阅读更多...
Unity程序基础框架

Unity程序基础框架

概述 单例模式基类 没有继承 MonoBehaviour 继承了 MonoBehaviour 的两种单例模式的写法 缓存池模块 &#xff08;确实挺有用&#xff09; using System.Collections; using System.Collections.Generic; using UnityEngine;/// <summary> /// 缓存池模块 /// 知识点 //…
阅读更多...
Qt 基础按钮布局管理

Qt 基础按钮布局管理

cpp public: Content(QWidget *parent0); ~Content(); QStackedWidget *stack; QPushButton *AmendBtn; QPushButton *CloseBtn; Baseinfo *baseInfo; Contact *contact; Detail *detail; // 打开 "Content.cpp" 文件&#xff0c;添加如下代码&#xff1a; Content:…
阅读更多...
RabbitMQ（高阶使用）死信队列

RabbitMQ（高阶使用）死信队列

文章内容是学习过程中的知识总结&#xff0c;如有纰漏&#xff0c;欢迎指正 文章目录 一、什么是死信队列&#xff1f; 二、死信队列使用场景 三、死信队列如何使用 四、打车超时处理 1.打车超时实现 以下是本篇文章正文内容 一、什么是死信队列&#xff1f; 先从概念解释上搞…
阅读更多...
python教程（二）：python数据结构大全（附代码）

python教程（二）：python数据结构大全（附代码）

Python 中数据结构的重要性不言而喻&#xff0c;它们是构建高效、可维护代码的基础。数据结构决定了如何存储、组织和操作数据。理解和使用合适的数据结构能够极大地提升程序的性能、简洁性以及代码的可读性。 Python 的基础数据结构有 4 种&#xff0c;分别是 列表 (list)、元…
阅读更多...
Gateway学习笔记

Gateway学习笔记

目录 介绍&#xff1a; 核心概念 依赖 路由 断言 基本的断言工厂 自定义断言 过滤器 路由过滤器 过滤器工厂 自定义路由过滤器 全局过滤器 其他 过滤器执行顺序 前置后置&#xff08;&#xff1f;&#xff09; 跨域问题 yaml 解决 配置类解决 介绍&#x…
阅读更多...
tcp线程进程多并发

tcp线程进程多并发

tcp线程多并发 #include<myhead.h> #define SERPORT 8888 #define SERIP "192.168.0.118" #define BACKLOG 20 typedef struct { int newfd; struct sockaddr_in cin; }BMH; void *fun1(void *sss) { int newfdaccept((BMH *)sss)->newfd; …
阅读更多...
最新文章

Copyright @ 2022~2023