markRatio() .then((item) => { this.browseMarkRatioList = item.data; if (document.querySelector("#myfwxssrChart0")) { this.drawfwxssr0(); } if (document.querySelector("#myfwxssrChart1")) { this.drawfwxssr1(); } if (document.querySelector("#myfwxssrChart2")) { this.drawfwxssr2(); } if (document.querySelector("#myfwxssrChart3")) { this.drawfwxssr3(); } }) .catch(() => {});
时间: 2024-02-10 11:18:27 浏览: 17
这段代码看起来像是一个异步函数调用,其中使用了Promise对象。当函数markRatio()被调用时,它会返回一个Promise对象,然后使用.then()方法来获取异步操作的结果。在这个例子中,当异步操作成功时,将会设置一个变量this.browseMarkRatioList为返回结果的data属性,然后根据页面上特定的元素是否存在来分别调用不同的绘图函数(drawfwxssr0、drawfwxssr1、drawfwxssr2、drawfwxssr3)。如果异步操作失败,则会忽略错误并不做任何处理。
相关问题
class Vue{ constructor( options ){ this.$data = options.data; options.created.bind(this)(); this.$el = document.querySelector(options.el); options.mounted.bind(this)(); } $nextTick( callback ){ return Promise.resolve().then(()=>{ callback(); }) } }
根据你提供的代码,这是一个简化的Vue类的构造函数。让我们逐行解释它的功能:
```javascript
class Vue {
constructor(options) {
this.$data = options.data;
// 调用created钩子函数,并将this绑定到Vue实例上
options.created.bind(this)();
this.$el = document.querySelector(options.el);
// 调用mounted钩子函数,并将this绑定到Vue实例上
options.mounted.bind(this)();
}
// $nextTick方法用于在下一次DOM更新循环结束后执行回调函数
$nextTick(callback) {
return Promise.resolve().then(() => {
callback();
});
}
}
```
在构造函数中,它接收一个`options`对象作为参数,其中`options.data`是Vue实例的数据对象。然后它绑定了`created`和`mounted`钩子函数,并在对应的时机调用它们。
这个简化的Vue类还提供了一个`$nextTick`方法,它返回一个Promise对象,用于在下一次DOM更新循环结束后执行传入的回调函数。
需要注意的是,这只是一个简化版的Vue类,没有实现完整的Vue功能,例如响应式数据、模板编译等。它只展示了Vue类中的一些基本功能。实际上,Vue.js是一个功能强大且复杂的框架,提供了更多丰富的功能和特性。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="/day08/js/axios.min.js"></script> </head> <body> 用户名:<input type="text" id="username"><br> 密码:<input type="password" id="password"> <span id="msg"></span> <button id="login">登录</button> <script> //获取元素 let loginBtn = document.querySelector("#login"); let usernameInput =document.querySelector("#username"); //先拿框,.value再获取框里的值,定义在函数外axios拿不到值,需放在函数里 // let username = document.querySelector("#username").value; // let password = document.querySelector("#password").value; //注册点击事件 loginBtn.onclick = function () { let username = usernameInput.value; let password = document.querySelector("#password").value; let msg = document.querySelector("#msg"); axios.get("/day08/login?username="+username+"&password="+password) //成功之和响应的值放在response中,自动调用函数 .then(response=>{ // 成功之后要执行的内容,js对象 msg.innerText =response.data; },error=>{ //因为网络等原因,传输失败执行这里的代码(404等不属于) }) } //当用户名在用户名失去焦点时,获取用户名 usernameInput.onblur = function () { let username =usernameInput.value; let msg = document.querySelector("#msg"); //独立功能,判断用户名是否重复 axios.get("/day08/usernameCheck?username="+username) .then(response=>{ console.log(response.data); if(response.data==200){ //通过js控制样式(颜色等) msg.style.color ="green"; msg.innerText ="可以正常注册"; }else{ msg.style.color ="red"; msg.innerText ="用户名太受欢迎,请重新输入"; } }) } </script> </body> </html>
这段代码是一个基本的前端登录页面,其中包括输入用户名和密码的输入框以及登录按钮。在点击登录按钮时,页面会向后端发送用户名和密码,如果验证成功,则会在页面上显示登录成功的信息,否则会显示登录失败的信息。
另外,代码中还包括一个用户名输入框的失去焦点事件,当用户输入完用户名并离开输入框时,页面会向后端发送用户名,后端会返回一个状态码,根据状态码来判断用户名是否可用,并在页面上显示相应的提示信息。
需要注意的是,这段代码中使用了Axios库来进行网络请求,所以需要在页面中引入Axios库的js文件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)