day20JS-axios数据通信

于 2024-09-12 17:14:11 发布
阅读量595 收藏 20
点赞数 17
分类专栏： JavaScript 文章标签： javascript 信息与通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kwj258036/article/details/142149562
版权

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;

傻虎贼头贼脑
关注
  • 17
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】前后端数据交互-axios的配置和使用
hanne_lovegood的博客
03-18 1396
1.下载axios依赖：在package.json中的dependencies节点加“axios”: “^0.20.0”, 2.配置跨域代理：config/index.js中的proxyTable里加后端地址、配置跨域和通配 3.配置axios的baseUrl 4.请求后端接口 5.问题：（1）Error in render: "TypeError: Cannot read properties of undefined (reading 'map')"接口未提供对应数据（2）调用接口失败404，重启项目
Day4 前端技术 - axios element-ui等
weixin_39505091的博客
05-31 196
文章目录一. axios 一. axios axios经常与Vue一起使用，实现 ajax 操作（异步请求）
day40-43-Vue2.js-路由VueRouter-Vuex状态管理-Axios异步
沐沐
12-11 1202
vue2基础语法,vue-cli工程化,vue组件开发,VueRouter路由技术,Vuex状态管理技术以及Axios异步请求技术
Vue ElementUI Axios 前后端案例(day03) 之 Axios
lpblog的博客
04-20 557
我们是否可以这么理解，发送url请求就是服务器之间建立连接，tcp三次握手之后 其中与服务器进行数据交换：通过AJAX可以给服务器发送请求 就是连接建立以后 我们发送我们的浏览器数据 就是所谓的发送url请求。那也就是说ajax 只帮助我们收集了客户端的数据并发送到客户端的通信组件，至于服务器通信组件和客户端通信组件如何建立连接和传输数据的过程，我们程序员并不需要关心是吗？在 AJAX 技术中，我们不仅可以发送 URL 请求，还可以发送其他类型的请求，比如 JSON、XML 等格式的数据。
day 74 vue 2 axios数据请求 以及组件的学习
weixin_30436891的博客
04-24 78
前情提要:　 　　 vue 学习二: 　　　　 　　　　一:　　通过axios实现数据请求 　　　　　　1:json数据语法 　　　　　　　　 json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。 // json数据的对象格式：{ "name":"tom"...
echart动态显示+axios异步获取后台数据+element-ui+watch+父子组件通信
reason125132的博客
04-07 1976
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录echart+axios+element-ui+父子组件通信一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 echart+axios+element-ui+父子组件通信 实现一个用echart动态显示后台数据，并且用户可以通过日期控件来改变所显示的数据 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）：.
20230407----重返学习-axios-fetch-pm2-url的组成
seetoyou的博客
04-07 123
axios是ajax封装的，基于Promise+XMLHttpRequest来进行的封装。
Vue基础学习笔记Day05_生命周期_axios
Li9527999qq的博客
05-03 271
今日目标: 能够说出vue组件生命周期 能够掌握axios的使用 能够了解refs, nextTick使用和name使用 能够完成购物车案例开发 学习内容： 学习目录: Vue生命周期 axios nextTick和refs知识 今日总结 面试题 知识点自测 知道window.onload的作用 ajax是什么, XMLHttpRequest的使用步骤 jQ的 $.ajax底层是什么? Promise的作用 async和await的作用-如何和Promise配合 同步异步的概念, 代码执行顺序
Day03_AJAX原理
一只小老虎
04-15 404
ajax原理学习
Day26:“ Axios GetPostPutDelete”
04-03
在JavaScript的世界里，Axios是一个非常流行的库，用于在浏览器和Node.js环境中发起HTTP请求。在今天的主题"Day26: Axios GetPostPutDelete"中，我们将深入探讨如何使用Axios进行GET、POST、PUT和DELETE这四种基本的...
day06-开发GraphQL服务以及前台系统搭建.zip
01-29
在本课程"某马程序员-JavaEE 57期-day06-开发GraphQL服务以及前台系统搭建"中，我们将深入探讨如何使用GraphQL构建强大的后端服务，并与前端系统进行高效集成。GraphQL是一种由Facebook推出的查询语言，用于API，...
ajax-day01.rar_达内开发学习笔记
09-20
除了jQuery，还有许多现代库和框架提供了更高级别的抽象，如axios、Fetch API、Vue.js的axios插件、React的fetch或axios集成等，它们使得Ajax开发更加便捷。 综上所述，“ajax-day01”的学习笔记应该涵盖了Ajax的...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2040
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 535
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 285
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 326
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 578
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
最新发布
haodanzj的博客
09-11 180
动态在本地引入图片
javascript注册页面
07-03
JavaScript 在注册页面中的应用主要涉及到前端交互和数据验证。以下是创建一个基本的 JavaScript 注册页面的一般步骤： 1. **HTML 结构**: ```html <form id="registerForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <label for="confirmPassword">确认密码:</label> <input type="password" id="confirmPassword" name="confirmPassword"><br> <button type="submit">注册</button> </form> ``` 2. **JavaScript 验证**: ```javascript document.getElementById("registerForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交 const username = document.getElementById("username").value; const email = document.getElementById("email").value; const password = document.getElementById("password").value; const confirmPassword = document.getElementById("confirmPassword").value; if (password !== confirmPassword) { alert("密码不匹配，请重新输入"); return; } // 进行更复杂的客户端或服务器验证（例如，检查用户名是否已存在） }); ``` 3. **异步处理**: 如果需要，可以通过 AJAX 或 Fetch API 发送到后端服务器进行进一步的身份验证和数据存储。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值