Vue的异步请求

Vue 异步操作

在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！

使用步骤

引入 axios 核心 js 文件。
调用 axios 对象的方法来发起异步请求。
调用 axios 对象的方法来处理响应的数据。

案列结构

前端代码(test.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>异步操作</title><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script>
</head>
<body><div id="div">{{name}}<button @click="send()">发起请求</button></div>
</body>
<script>new Vue({el:"#div",data:{name:"张三"},methods:{//上面绑定了点击事件,执行异步请求send(){// GET方式请求// axios.get("testServlet?name=" + this.name)//     .then(resp => {//         alert(resp.data);//     })//     .catch(error => {//         alert(error);//     })/* 在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！ 使用步骤1. 引入 axios 核心 js 文件。2. 调用 axios 对象的方法来发起异步请求。3. 调用 axios 对象的方法来处理响应的数据。*/// POST方式请求,链式编程axios.post("testServlet","name="+this.name)//请求后回调函数发起请求后,然后呢//请求成功后的回调函数，通过response获取响应的数据/*箭头函数:特点:它能够使用上下文的this*/.then(resp => {alert(resp.data);})//请求失败后的回调函数，通过error获取错误信息.catch(error => {alert(error);})//第二种模拟详细流程使用的饿了么ui//说明表单校验通过,发生异步请求//对响应的结果,axios对后端返回的结果进行了封装,res.data,这个data就是返回的json数据,,,也可以从res中获取响应码等数据axios.post("/checkItem/edit.do",this.formData).then((res)=>{//提交后关闭编辑窗口this.dialogFormVisible4Edit=false;//对返回的数据进行判断是否成功if(res.data.flag){//说明成功this.$message({message:res.data.message,type:"success"})}else {//说明失败this.$message.error(res.data.message);return false;}}).finally(()=>{//finally()方法,表示异步提交后,无论成功还是失败,都会执行的方法//无论成功还是失败,都调用表单查询方法this.findPage();}).catch((res)=>{//异步请求失败,会走到catch这个方法this.$message.error("异步请求失败~~~");})  //链式编程// axios.get("testServlet?name="+this.name).then(resp =>{alert(resp.data)}).catch(error=>{alert(error)});}}});
</script>
</html>

后端代码(Servlet)

package com.fs;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的编码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//获取请求参数String name = req.getParameter("name");System.out.println(name);//响应客户端resp.getWriter().write("请求成功");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req,resp);}
}

图解异步代码

简单了解Vue的异步请求,axios-0.18.0.js插件实现异步相关推荐

http请求与响应，同步异步请求以及异步请求axios的配置
文章目录 http http简介,协议 http请求 http响应接收请求行请求头数据同步异步请求异步请求axios的配置配置文件 http http简介,协议 http是超文本传输协议 (H ...
EO.Web浏览器 v2023.0.18.0 for .NET -- EO.WebBrowser
.NET PDF 和 Web 浏览器从未如此简单使用 PDF 文件生成/处理能力快速扩展您的 .NET 应用程序,或者将流行的 Chromium 浏览器引擎与广泛的自定义选项(如自定义资源加载器和 ...
简单几步，正确使用Parallel Desktop 18.0.2
话不多说,先上图,最新版支持M1,M2芯片: 许可证是有效的命令操作记录心路历程笔者近日刚更换了新版MacBook,正美滋滋的时候发现以前最爱的Parallel Desktop不能用了,这款软 ...
在vue移动端项目中，配合clipboard.js插件，复制一段密令（类似淘宝支付宝口令）的文本到剪切板...
需求开发过程中遇到的需求需要复制请求过来的一段密令(类似支付宝淘宝口令)到剪切板. pc端的文本复制到剪切板如果是在pc端的话,可以直接使用原生js进行编写,代码如下: <textarea ...
Abp 0.18.0 正式发布! -ABP CLI,新模板和其他功能
ABP CLI, v0.18版本新模板和其他功能 ABP v0.18已发布, 包含解决的80+个issue, 550+次提交. 网站更改 abp.io网站完全更新以突出ABP框架的目标和重要功能.文档 ...
0.18/0.13um的逻辑相关step function 讲解
ZEROOXIDE 的作用是什么? 第一是为后序的ZERO PHOTO时做PR的隔离,防止PR直接与Si接触,造成污染. PR中所含的有机物很难清洗. 第二,WAFTER MARK是用激光来打的,在S ...
vue-1.0-4.0/promis4.3异步请求/父子组件1.0/动态路由3.4/懒加载3.5/导航守卫3.7/-修改文件路径的引用问题......
1--------------------父子组件传递关系子组件:props:{ banners:{type:Array,default(){return[]}}} 父组件: 视口模式 npm in ...
【vue页面数据请求进度条--页面爱心--借助插件实现页面防抖-echarts实现自适应】
1.页面爱心点击出现随机颜色小爱心它是一个js文件实现的我们首先创建一个love.js文件,然后把下面代码拿过去并导出 export function love() {;(function (w ...
同步请求和异步请求(利用axios)
文章目录同步请求和异步请求客户端如何发出异步请求? GET和POST 选择利用GET方式异步请求Get 运行环境环境:springboot+SpringMVC+Mybatis+vue 前端后 ...

简单了解Vue的异步请求,axios-0.18.0.js插件实现异步

Vue的异步请求

Vue 异步操作

使用步骤

案列结构

前端代码(test.html)

后端代码(Servlet)

图解异步代码

简单了解Vue的异步请求,axios-0.18.0.js插件实现异步相关推荐

最新文章

热门文章