Vue异步请求（axios）

最新推荐文章于 2024-07-23 16:26:53 发布
最新推荐文章于 2024-07-23 16:26:53 发布
阅读量241 收藏 2
点赞数
文章标签： vue ajax java js python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42822489/article/details/113685350
版权

一、说明

　　1、vue里定义的Router是前端路由，而axios属于ajax是请求后端接口用的。故，axios无法用来请求页面，而可以用来请求后端接口。

　　详情参考 axios文档，http://www.axios-js.com/zh-cn/docs/

二、实现

　　1、引入vue以及axios

 　　<!-- 引入vue.js -->
    <script src="js/vue.js"></script>
    <!-- 引入axios.js -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

　　2、实现脚本控制按钮　　

<script>

    new Vue({
        el:'#app',
        template:`
                <div>
                    <button @click="login">发送</button>
                </div>
            `,
        data(){
            return{

            }
        },
        methods:{

            login:function() {
                axios.post('/login', {  //get|post可选，用对象{ }传递数据，如果不传递数据，可缺省{ }。get方式参数也可以拼接在url中
                    username: 'chy',   //通常是获取表单数据，$('#xxx').val
                    password: 'abcd'
                }).then(function (response) {  //处理后台返回的数据。
                    console.log("test:::::");
                    console.log(response);  //response是后台返回的整个响应
                    console.log("test!!!");
                    console.log(response.data);  //.data才是后台返回的数据
                }).catch(function (error) {  //发生错误时的处理
                    console.log(error);
                });
            }

        }

    })
</script>

　　3、后端接受请求　　

@RequestMapping("/login")
    public void login() throws IOException {
        String command = "cmd.exe /c cd"
                + " E:\\projects\\python\\smarthome\\venv\\Include "
                + "&& start python main.py";
        Process p = Runtime.getRuntime().exec(command);
    }

附：完整代码

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入vue.js -->
    <script src="js/vue.js"></script>
    <!-- 引入axios.js -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app"></div>

<script>

    new Vue({
        el:'#app',
        template:`
                <div>
                    <button @click="login">发送</button>
                </div>
            `,
        data(){
            return{

            }
        },
        methods:{

            login:function() {
                axios.post('/login', {  //get|post可选，用对象{ }传递数据，如果不传递数据，可缺省{ }。get方式参数也可以拼接在url中
                    username: 'chy',   //通常是获取表单数据，$('#xxx').val
                    password: 'abcd'
                }).then(function (response) {  //处理后台返回的数据。
                    console.log("test:::::");
                    console.log(response);  //response是后台返回的整个响应
                    console.log("test!!!");
                    console.log(response.data);  //.data才是后台返回的数据
                }).catch(function (error) {  //发生错误时的处理
                    console.log(error);
                });
            }

        }

    })
</script>
</body>
</html>
让我试试哈
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
详解vue中多个有顺序要求的异步操作处理
10-16
主要介绍了vue中多个有顺序要求的异步操作处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue中通过axios异步使用echarts的方法
08-28
在 Vue 中通过 Axios 异步使用 Echarts 的方法 本篇文章主要介绍了在 Vue 中通过 Axios 异步使用 Echarts 的方法。在实际的工作中，数据不可能是像之前的 demo 演示的那样把数据写死的。所有的数据都应该通过发送...
Vue 异步请求
qq_41775769的博客
03-13 7286
Vue 异步请求 Vue 中使用 axios 进行网络请求，使用起来和 jQuery 中的 $.get 和 $.post 功能类似。 安装依赖：cnpm install --save axios 1. get 请求方式 给定服务器控制器代码，可以接收 name 和 age 参数，设置到 Map 中并返回。 注意：控制器上有跨域注解。前后端分离都是跨域请求。且端口不能设置 8080 端口，避免端口冲突。 <template> <div id="app"> &
【Vue实战教程】之Vue项目中的异步请求
最新发布
柯晓楠
07-23 1188
Axios的拦截器分为请求拦截器和响应拦截器，两种拦截器在不同的时机对axios发起的请求进行处理。DELETE是请求服务器删除指定的页面。当axios要请求多个不同的后端接口地址，并且一些axios配置项都相同时，可以先创建axios实例，然后使用axios实例发起请求。Axios是一个基于promise的HTTP库，主要用来向服务端发起请求，可以在请求中做更多可控的操作，例如拦截请求等。Axios主要的作用是向服务端发起HTTP请求，根据 HTTP 标准，HTTP 请求可以使用多种请求方法。
Vue-异步请求
qq_36008278的博客
03-15 2646
什么是异步请求(AJAX)？ 异步是(Asnychronous Javascript and XML)的简称，表示一个线程在发起一个请求后，在空闲等待的时间里去执行其它的任务，请求完成后通知线程再次进行后续结果的处理。 同步是一个线程必须要等待上一次请求完成后再执行后续的操作。 异步请求的哪些方式? 原生js方式创建XMLHttpRequest对象 jQuery Axios Fetch 什么是Axios及特点? 中文官网：http://www.axios-js.com/zh-cn/docs/ axios
Vue中进行异步请求
热门推荐
起风了
09-06 3万+
前端的数据均是通过接口请求拿到的，而Vue本身不支持ajax请求，那么该怎么解决Vue中的异步请求呢？这儿提供了几种方法，希望对大家有所帮组。 一、axios实现异步请求 1.项目中安装axiox npm install –save axios...
Vue（路由）2.异步请求
qq_42809433的博客
08-17 363
vue-router 文章目录vue-router异步请求axios请求跨域vue.config.js跨域请求代理配置 异步请求 在实际的应用开发中，与后端交互，进行异步请求是很常见的需求 axios npm i axios 请求 // home.vue <template> <div class="home"> Home </div> </template> <script> import axios from 'axios'
vue异步axios获取的数据渲染到页面的方法
10-18
综上所述，通过结合Vue的生命周期钩子、Axios的异步请求处理、VueX的状态管理以及计算属性的响应式渲染，我们可以高效且稳定地在Vue项目中使用Axios异步获取数据，并渲染到页面中。希望上述内容能够帮助大家在开发...
Vue使用axios出现options请求方法
10-16
在本例中，Vue应用中的axios.post()方法触发了这个OPTIONS请求。这是因为POST请求在CORS策略下被认为是不安全的，所以浏览器会先发送OPTIONS请求来确保服务器允许这种类型的请求。以下是相关知识点的详细说明： 1. ...
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
VUE项目axios请求头更改Content-Type操作
10-15
在Vue项目中，使用axios库进行HTTP请求时，经常需要对请求头（Request Headers）进行配置。对于特定请求类型，如POST请求，更改Content-Type字段是一个常见的操作，它用于指定客户端发送数据的格式。Content-Type...
vue基础之异步请求
weixin_45762767的博客
07-18 4942
vue基础
Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）
CYK_byte的博客
10-16 1万+
axios 用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新局部.1.为什么不使用 ajax 呢？官方：在 jQuery 中推荐使用 ajax 技术， Vue 里面不推荐使用 jQuery 框架，因此 Vue 更推荐使用 axiox 异步请求库（axios并不是 vue 官方库）.2.axios 特性可以从浏览器中创建 XMLHttpRequests可以从 node.js 中创建 http 请求.支持 Promise API.支持拦截请求和响应.转换请求数据和响应数据.
Vue基础入门讲义（五）-异步请求axios
专业的计算机毕业设计指南
03-05 632
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue中如何进行异步请求？
有我更精彩的博客
04-02 994
在使用Vue进行web开发过程中，经常会遇到需要进行异步请求的情况，比如向后端服务器请求数据、加载远程资源等。Vue提供了多种方法来处理异步请求，本文将主要介绍Vue中如何进行异步请求的方法。
vue-axios异步请求
SqlloveSyn的博客
02-12 327
发送异步请求获取数据。
深入解析与实践：基于VUE的axios异步请求应用指南
CAUC_lin的博客
01-24 1253
axios是VUE中结合网络数据进行应用的开发，是目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便。axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.axios 使用get或者post方法,就可以发送请求then方法中的回调函数,会在请求成功或者请求失败的时候触发通过回调函数的形参可以获取响应的内容,或者错误信息。
Vue 之 Axios 异步请求
沉在水底的鱼的博客
02-13 681
Axios 文档地址:https://www.kancloud.cn/yunye/axios/234845 1.安装 Axios     npm install axios 2.执行get请求  // 为给定 ID 的 user 创建请求   axios.get('/user?ID=12345')     .then(function (response) {      console.l...
vue-axios实现异步请求
09-27
Vue-axios是一种用于在Vue中进行异步请求的插件。它是在axios基础上封装的，可以方便地在Vue项目中使用。要使用vue-axios，你需要先安装axios和vue-axios两个包。然后，在你的Vue项目中，你可以通过在组件中导入vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

让我试试哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值