14、axios

最新推荐文章于 2024-07-11 20:55:36 发布
最新推荐文章于 2024-07-11 20:55:36 发布
阅读量65 收藏
点赞数
分类专栏： Vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s12345672/article/details/120969801
版权

1、axios

  • 前端专注于网络请求的库

2、axios的基本使用

  • 发起GET请求
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
    <!-- 2. 声明一个将要被vue控制的dom区域 -->
    <div id="app">
    </div>
    <!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
    <script src="lib/vue-2.6.12.js"></script>
    <script src="./jquery.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        // 调用的axios方法会返回一个Promise对象
        axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            // URL中的查询参数
            params: {
                id: 1
            }
        }).then(function (suc) {
            console.log(suc);
        })
    </script>
</body>

</html>
  • 发起POST请求
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
    <!-- 2. 声明一个将要被vue控制的dom区域 -->
    <div id="app">
    </div>
    <!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
    <script src="lib/vue-2.6.12.js"></script>
    <script src="./jquery.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        // 调用的axios方法会返回一个Promise对象
        axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: 20
            }
        }).then(function (suc) {
            console.log(suc);
        })
    </script>
</body>

</html>

3、结合async和await调用axios

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
    <!-- 2. 声明一个将要被vue控制的dom区域 -->
    <div id="app">
        <button @click="get">发送GET请求</button>
    </div>
    <!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
    <script src="lib/vue-2.6.12.js"></script>
    <script src="./jquery.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                async get() {
                    // 调用的axios方法会返回一个Promise对象,则前面可以添加await
                    // await只能用在被async修饰的方法中
                    const result = await axios({
                        method: 'GET',
                        url: 'http://www.liulongbin.top:3006/api/getbooks',
                        params: {
                            id: 1
                        }
                    })
                    console.log(result);
                }
            },
        })
    </script>
</body>

</html>

4、axios.get和axios.post发起的请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
    <!-- 2. 声明一个将要被vue控制的dom区域 -->
    <div id="app">
        <button @click="get">发送GET请求</button>
        <button @click="post">发送POST请求</button>
    </div>
    <!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
    <script src="lib/vue-2.6.12.js"></script>
    <script src="./jquery.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                async get() {
                    const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
                        params: {
                            id: 5
                        }
                    })
                    console.log(res);
                },
                async post() {
                    const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
                    console.log(res);
                }
            }
        })
    </script>
</body>

</html>
Sun Jiakai_凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022-02-14 axios的二次封装
GAARA
02-14 284
1.为什么要对axios进行二次封装？ 主要是要用到请求拦截器和响应拦截器; 请求拦截器：可以在发请求之前可以处理一些业务 响应拦截器：当服务器数据返回以后，可以处理一些事情 2.创建api/request.js用于书写axios二次封装的代码 import axios from "axios"//导入axios //1.利用axios对象的create方法创建一个axios实例 const requests=axios.create({ //配置对象 baseURL:"./api",//基础路径
vue系列教程-14axios的使用
qq_41689712的博客
06-23 264
本内容为系列内容，全部内容请看我的vue教程分类 我的个人博客 本节仓库地址 视频教程地址 什么是Axios 是一个基于promise（承诺）的HTTP网络请求库 可以用于浏览器和node.js项目 vue官方推荐的请求库，从以前的vue-resource到axios 通俗点说就是对JavaScript的http请求的二次封装，就类似jQuery的ajax 中文文档立即查看 原则上学习这一节需要mock数据相关的知识，但是鉴于大家都是初学者，所以不使用mock的方式，但是大家感兴趣的可以去搜索一.
14-axios的使用
PP_zi的博客
09-29 378
一、网络模块封装 经过Ajax，JQuery-Ajax和不再维护的vue-resource后，选择官方推荐的Ajax库–axios。 axios特点如下： 在浏览器中发送XMLHttpRequests请求 在node.js中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 等 二、axios基本使用 2.1 安装axios 使用如下命令： npm install axios --save 一个可以进行很多请求模拟的网站：httpbin.org 2.2 使用axios 在
2021-07-14 axios的简单使用
weixin_47020721的博客
07-14 146
axios的简单使用 1、axios先导入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2、基本模板 请求方法：get 请求参数：num 请求地址：https://autumnfish.cn/api/joke/list1234?num=6 响应内容：随机笑话 返回num条笑话 then方法中的回调函数在请求成功或失败时触发 通过回调函数的形参err/reponse可以获取响应内容或错误信息
Typescript封装axios
weixin_47450807的博客
03-06 7031
一、认识axios 目前在开发中会使用axios来发送ajax请求，其具有以下几个特点： 1、在浏览器中发送 XMLHttpRequests 请求 2、在浏览器中发送 XMLHttpRequests 请求 3、 支持 Promise API 4、拦截请求和响应 5、转换请求和响应数据 等等... 支持多种请求方式： axios(config) axios.request(config) axios.get(url[,config]) axios.delete(url[,config]) axios.hea
axios
catherine的博客
04-11 1028
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 浏览器兼容性   引入方式：...
Axios面试题
golove666的博客
04-06 913
Axios高频面试题。
axios 的用法
sweet_note的博客
04-23 5051
转载地址：https://blog.csdn.net/hsany330/article/details/71079745 参考地址：https://www.kancloud.cn/yunye/axios/234845 axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttp...
axios队列 vue_vue axios全攻略
weixin_34969621的博客
01-17 216
不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！如果您觉得本文对您有帮助，不妨点个赞或关注收藏...
14、vue中的axios全局安装.pdf
10-10
再Vue中应用Axios请求线上数据接口，如何在Vue中配置axios,以上就是配置Axios得详细简介
axios-model：具有axios js辅助功能的模型类
02-05
轴模型 具有用于 js的辅助函数的模型类。 介绍 ... 要求与假设 该库假定您的后端以json格式的数据响应。 类似于以下内容。... //single item (sample laravel backend response) ... "updated_at" : "2018-07-09 10:02:14
redact-axios-error:修剪并删除axios错误以进行日志记录，这样它们就不会泄漏敏感数据，并且在没有循环引用的情况下更加简洁
04-29
编辑轴错误 字符串化时，Axios错误非常冗长，并泄漏URL和标头授权。 该库将它们精简为基本信息，以除去循环引用。 它编辑URL和标头授权。 可以选择将其配置为编辑请求，响应和... 节点14+ 入门 npm i -S redact-axi
14ajax课程.zip
10-30
随着React、Vue、Angular等前端框架的流行，它们提供了内置的Ajax工具，如Vue的axios插件、React的fetch API等，进一步简化了Ajax的使用。 总之，“前端Ajax从入门到精通”涵盖了从基础到高级的Ajax技术，旨在帮助...
dumont-labe-commerce14
02-12
3. **前端开发**：除了React，项目可能还涉及HTML、CSS和JavaScript的其他库或框架，如Bootstrap或Material-UI，用于页面布局和美化，以及jQuery或Axios处理异步请求。 4. **Node.js和npm**：React是用JavaScript...
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
小丁的博客
07-08 320
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 858
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 180
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
最新发布
huanghm88的专栏
07-11 592
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
​ ReferenceError: axios is not defined
06-13
这个错误提示意味着你的代码中使用了 `axios` 模块，但是该模块未被正确引入。在 JavaScript 中，只有当一个模块被正确引入之后，才能在代码中使用其中的函数或变量。 解决这个问题的方法是在代码中正确引入 `axios...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值