day20JS-axios数据通信

news2025/1/11 2:50:46

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: "被访问服务器地址",
            // 默认请求方式为get
            method: "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.coloradmin.cn/o/2131582.html

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

相关文章

零宽字符应用场景及前端解决方案

零宽字符应用场景及前端解决方案

零宽字符&#xff08;Zero Width Characters&#xff09;是一类在文本中不可见但具有特定功能的特殊字符。称为零宽字符&#xff0c;也叫幽灵字符。它们在显示时不占据任何空间&#xff0c;但在文本处理和显示中发挥着重要作用。这些字符主要包括零宽度空格、零宽度非连接符、零…
阅读更多...
【C++ 高频面试题】STL 你了解多少呢？vector 的底层实现原理

【C++ 高频面试题】STL 你了解多少呢？vector 的底层实现原理

文章目录 1. 常见的 STL 容器2.vector 和 list 的区别3. vector 的底层原理4. push_back() 和 emplace_back() 区别 1. 常见的 STL 容器 &#x1f34e;①序列容器 vector&#xff08;向量&#xff09;&#xff1a;是一个动态数组实现&#xff0c;提供高效的随机访问和在尾部进行…
阅读更多...
基于R语言结构方程模型分析与实践技术应用

基于R语言结构方程模型分析与实践技术应用

结构方程模型&#xff08;Sructural Equation Model&#xff09;是一种建立、估计和检验研究系统中多变量间因果关系的模型方法&#xff0c;它可以替代多元回归、因子分析、协方差分析等方法&#xff0c;利用图形化模型方式清晰展示研究系统中变量间的因果网络关系&#xff0c;…
阅读更多...
信息安全数学基础（9）素数的算数基本定理

信息安全数学基础（9）素数的算数基本定理

前言 在信息安全数学基础中&#xff0c;素数的算数基本定理&#xff08;也称为唯一分解定理或算术基本定理&#xff09;是一个极其重要的定理&#xff0c;它描述了正整数如何唯一地分解为素数的乘积。这个定理不仅是数论的基础&#xff0c;也是许多密码学算法&#xff08;如RSA…
阅读更多...
【算法专场】分治（上）

【算法专场】分治（上）

目录 前言 什么是分治&#xff1f; 75. 颜色分类 算法分析 算法步骤 算法代码 912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 算法分析 算法步骤 算法代码 215. 数组中的第K个最大元素 - 力扣&#xff08;LeetCode&#xff09; 算法分析 算法步骤 ​编辑…
阅读更多...
【Redis入门到精通一】什么是Redis？

【Redis入门到精通一】什么是Redis？

目录 Redis 1. Redis的背景知识 2.Redis特性 3.Redis的使用场景 4.Ubuntu上安装配置Redis Redis Redis在当今编程技术中的地位可以说非常重要&#xff0c;大多数互联网公司内部都在使用这个技术&#xff0c;熟练使用Redis已经成为开发人员的一个必备技能。本章将带领读者…
阅读更多...
yolov5实战全部流程

yolov5实战全部流程

本科生阶段除了在中等以上的985和某些特定的CS强项院校&#xff0c;无意愿研究生学习的本科生是不建议学习人工智能这一专业的&#xff0c;保研学生也许可以在实验室打工推荐信学习接触到此类事件&#xff0c;此项blog主要是对yolov5的实践性项目&#xff0c;yolov5作为最具有代…
阅读更多...
python 函数 封装

python 函数 封装

封装 函数的参数是&#xff1a;变量 def 函数(参数):print(参数)if __name__ __main__:函数(参数)函数(参数2)函数的参数是&#xff1a; 字典 import requests# 定义一个字典 data {} 地址 "https://webdriveruniversity.com/" 请求方法 getdata["url"…
阅读更多...
【数据结构】选择题错题集

【数据结构】选择题错题集

这里注意原本p后面也是有节点的。 这里只有遍历前面的链表找到尾节点连接即可。 快排是交换排序。 不要想象只有这两个节点&#xff0c;还有其他节点省略了。 筛选法就是向下调整算法。用向下调整建堆从最后一个节点的父亲开始。 这里错位相减法是乘4&#xff0c;所以最后要除三…
阅读更多...
超详细！外婆都能看懂的Stable Diffusion入门教程，AI绘画SD零基础入门到精通教程！

超详细！外婆都能看懂的Stable Diffusion入门教程，AI绘画SD零基础入门到精通教程！

一、前言 如今的AI绘画界有两大最强工具&#xff0c;一个是Midjourney &#xff0c;一个是StableDiffusion。Midjourney生成图片的质量非常高&#xff0c;可问题就是 Midjourney 的图片怎么精准的控制&#xff0c;或者是不改变某个物体的情况下更换背景等等&#xff0c;实在是…
阅读更多...
虚拟化数据恢复—断电导致虚拟机目录项被破坏的数据恢复案例

虚拟化数据恢复—断电导致虚拟机目录项被破坏的数据恢复案例

虚拟化数据恢复环境&#xff1a; 某品牌服务器&#xff08;部署VMware EXSI虚拟机&#xff09;同品牌存储&#xff08;存放虚拟机文件&#xff09;。 虚拟化故障&#xff1a; 意外断电导致服务器上某台虚拟机无法正常启动。查看虚拟机配置文件发现这台故障虚拟机除了磁盘文件以…
阅读更多...
视频监控平台是如何运作的？EasyCVR视频汇聚平台的高效策略与实践

视频监控平台是如何运作的？EasyCVR视频汇聚平台的高效策略与实践

随着科技的飞速发展&#xff0c;视频监控平台在社会安全、企业管理、智慧城市构建等领域发挥着越来越重要的作用。一个高效的视频监控平台&#xff0c;不仅依赖于先进的硬件设备&#xff0c;更离不开强大的视频处理技术作为支撑。这些平台集成了多种先进的视频技术&#xff0c;…
阅读更多...
长短期记忆网络和UKF的结合|Python代码例程

长短期记忆网络和UKF的结合|Python代码例程

结合长短期记忆网络（LSTM）和无迹卡尔曼滤波器（UKF）的技术在机器人导航和状态估计中具有广泛的应用前景。 文章目录 结合LSTM和UKF的背景结合LSTM和UKF的优势应用实例研究现状Python代码示例结合LSTM和UKF的背景 长短期记忆网络（LSTM）是一种特殊的递归神经网络（RNN），…
阅读更多...
51单片机-IIC实验1-AT24C02数据存储（实战1）

51单片机-IIC实验1-AT24C02数据存储（实战1）

本实验主要是针对IIC的具体案例进行实战&#xff0c;主要利用支持IIC通信的芯片AT24C02进行与51单片机构成通信。51&#xff08;AT89C52&#xff09;本身不带有IIC通信&#xff0c;所以&#xff0c;我们需要给51写一个IIC时序&#xff0c;以便与支持IIC协议的AT24C02数据存储芯…
阅读更多...
逆向学习系列（三）Charles配合Drony的使用（真机）

逆向学习系列（三）Charles配合Drony的使用（真机）

在抓包中&#xff0c;有时可能出现无法抓包的情况&#xff0c;这时&#xff0c;可以尝试使用Drony转发抓包。 一、安装Drony 将电脑上的Drony_1.3.154_APKPure.apk复制粘贴进真机的Download文件夹中。在真机上找到这个apk&#xff0c;点击安装。 二、在VMOS中安装Drony 在真…
阅读更多...
【Petri网导论学习笔记】Petri网导论入门学习（四）

【Petri网导论学习笔记】Petri网导论入门学习（四）

Petri网导论入门学习&#xff08;四&#xff09; Petri 网导论学习笔记&#xff08;4&#xff09;1.2 标识网与网系统定义 1.8定义 1.9例 1.4存在空标识网的几种情况1.2 小结1.2学习完应达到的要求 Petri 网导论学习笔记&#xff08;4&#xff09; 如需学习转载请注明原作者并附…
阅读更多...
55页可编辑PPT | 集团制造企业数字化转型顶层设计方案

55页可编辑PPT | 集团制造企业数字化转型顶层设计方案

这份PPT文档是一份关于集团制造企业数字化转型的顶层业务设计方案。文档详细介绍了企业在后ERP时代面临的挑战&#xff0c;以及如何通过Oracle解决方案来实现数字化转型。 数字化转型的三大要点集中在满足利益相关者的期望&#xff0c;以企业价值为核心引领业务模式的创新&…
阅读更多...
DHCP协议原理大全与全局地址、接口地址池、中继代理三种方式配置

DHCP协议原理大全与全局地址、接口地址池、中继代理三种方式配置

DHCP协议原理与配置 1.DHCP动态主机配置协议 原理：通过配置DHCP服务器给主机自动分配IP地址； 优点;1)可以动态学习或者获取IP地址及网络参数； 2）减少人工配置数量 3）减少ip抵制冲突； 4)采用客户端/服务器通信模式，报文基于UDP,服务器端端口号67。客户端端口号68…
阅读更多...
AS608指纹识别模块（上位机操作）

AS608指纹识别模块（上位机操作）

目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 3.工作原理&#xff1a;模块指令格式 4.工作原理&#xff1a;模块应答格式 5.工作原理步骤 三、程序设计 四、实验效果 五、资料获取 项目分享 一、介绍 AS608模块采用了国内著名指纹识别芯片公司杭州晟元芯片技…
阅读更多...
灵活连接，无限可能—探索EtherCAT的拓扑艺术

灵活连接，无限可能—探索EtherCAT的拓扑艺术

EtherCAT技术具备快速响应和高效率的特点&#xff0c;在工业自动化领域显得至关重要&#xff0c;其灵活的拓扑结构是其核心优势&#xff0c;支持多样化的网络布局&#xff0c;无需交换机或集线器&#xff0c;简化布线&#xff0c;降低成本&#xff0c;提高系统可靠性和灵活性。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023