2024年9月19日---关于ES6（2）

五异步编程

5.1 回调函数

5.1.1 概念

回调函数(callback function) ，当一个函数作为参数 传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。你可以将其理解为 回头再调用的意思，其实回调函数就是普通函数，只不过名字起的特殊，根据应用场景而命名的而已。

回调函数通常用于事件处理 、异步编程 和处理各种操作系统和框架的API。

基本概念：

回调：指被传入到另一个函数的函数。
异步编程：指在代码执行时不会阻塞程序运行的方式。
事件驱动：指程序的执行是由外部事件触发而不是顺序执行的方式。

5.1.2 应用场景

回调函数是一种常见的编程技术，它可以在异步操作完成后调用一个预定义的函数来处理结果。回调函数通常用于处理事件、执行异步操作或响应用户输入等场景。

回调函数的作用是将代码逻辑分离出来，使得代码更加模块化和可维护。使用回调函数可以避免阻塞程序的运行，提高程序的性能和效率。另外，回调函数还可以实现代码的复用，因为它们可以被多个地方调用。

回调函数的使用场景包括：

事件处理：回调函数可以用于处理各种事件，例如鼠标点击、键盘输入、网络请求等。
异步操作：回调函数可以用于异步操作，例如读取文件、发送邮件、下载文件等。
数据处理：回调函数可以用于处理数据，例如对数组进行排序、过滤、映射等。
插件开发：回调函数可以用于开发插件，例如 WordPress 插件、jQuery 插件等。

回调函数是一种非常灵活和强大的编程技术，可以让我们更好地处理各种异步操作和事件。

复制代码

例子1:
let nums = [10, 20, 30, 40];
let f1 = (value, index) => console.log(value, index);
nums.forEach(f1)

例子2:
let f1 = () => { console.log("aaaaaa"); }
document.getElementById("btn").addEventListener("click", f1)

例子3： 定时器里的第一个参数：就是回调函数。  3秒后回头来调用该函数 
setTimeout(()=>{
   console.log("hello world")
},3000)

5.2 同步和异步

5.2.1 同步编程简介

所谓==同步==：就是程序按照代码的顺序执行，一次只执行一个任务，当前任务执行完毕，才能执行下一个任务。

1）同步编程的优点：

代码逻辑简单

复制代码

在同步编程中，代码的执行顺序与编写顺序一致。这意味着开发者在编写程序时，可以按照其自然逻辑去组织代码。这样的一对一映射关系大大降低了程序逻辑的复杂性，使得代码更易维护和扩展。

强顺序控制

复制代码

由于执行流程是按部就班的，同步编程确保了程序的严格顺序控制。某一任务必须完成后，才会执行下一个任务。这对于某些依赖于前一操作结果的任务特别有用。

易于理解和调试

复制代码

对于开发者来说，同步代码通常更容易理解。而且在调试过程中，由于操作顺序固定且有序，开发者可以更准确地预测错误发生的位置及原因。

资源利用和管理

复制代码

在同步编程模式下，资源管理相对简单。开发者不需要关注资源在不同线程或进程间的共享问题，可以避免多线程程序中的锁和同步机制，减少系统开销。

稳定性和一致性

复制代码

由于程序的执行是串行的，避免了多线程编程中常见的竞态条件和副作用。这使得同步程序在运行时更加稳定，输出结果也更加一致。

2）同步编程的缺点

性能问题

复制代码

同步编程会阻塞程序的执行，当某个操作耗时较长时，会导致程序的整体性能下降。特别是在处理大量的并发请求时，同步编程可能造成长时间的等待，无法充分利用系统资源。

处理并发问题的能力有限

复制代码

由于同步编程是按照代码的执行顺序依次执行，无法在多个线程之间进行快速切换。因此，同步编程在处理大量的并发请求时可能无法很好地发挥其优势，导致性能瓶颈

代码复杂度增加

复制代码

在同步编程中，由于每个操作都需要等待前一个操作完成，可能导致代码的嵌套层级较深，逻辑复杂。特别是在处理多个依赖性较强的操作时，代码的可读性和可维护性会受到一定的影响。

5.2.2 JavaScript的同步演示

JavaScript编程语言，默认是单线程机制，也就是同步。我们来演示一个同步案例： 注册页面的填写和验证功能

1、准备一个注册页面

2、给用户名添加失去焦点事件

3、绑定事件处理函数，先验证正则表达式，然后验证用户名是否已经被占用

4、用户名提交到服务端，然后使用伪代码来模拟验证时间花了30秒左右

案例总结：

复制代码

当校验用户名是否已经被占用时，我们会向服务端发送一个请求操作。服务器在收到请求后，一定会出现下面三种状态中某一种。
1. 验证成功：success
2. 验证失败：fail
3. 验证中：  pending   还没有得到具体的结果(成功，失败)

假设页面是同步行为，那么验证失败或者成功的这个时间段非常短，在一秒以内，那么对于用户的体验感是没有多大影响的，
如果因为网络波动或者其他原因，服务器要经过5秒甚至30秒以上的时间才给浏览器反馈，那么用户也得等待5秒甚至30秒以上的时间后，才能填写后续的文本框内容。这样的用户体验特别不好！

什么叫好的用户体验？
  当验证用户名时，用户依然可以往下填写内容。这样的体验较好。 用户行为和校验请求是异步的(同时进行的)。

还有一个问题待解决，就是页面总刷新的问题。

复制代码

在登录页面中，我们使用转发技术做用户名或者密码校验时，会涉及到一个页面重新刷新的动作。 因为服务器会将整个页面资源进行打包响应给浏览器，浏览器会重新加载整个完整的页面。 如果页面资源比较多，那么一定会占用过多的网络传输IO。

代码如下：
RequestDispatcher  rd =  request.getRequestDispatcher("login.jsp")
rd.forward(request,response)

JSP页面：index.jsp

复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
      <style>
          #wrap{
              width: 600px;
              margin: 0 auto;
          }
          #wrap legend{
              text-align: center;
          }
          #wrap input{
              margin-block: 10px;
          }
      </style>
  </head>
  <body>
      <form action="regist.lr" method="post" οnsubmit="return regist()">
        <fieldset id="wrap">
          <legend>注册页面</legend>
          用户名:   <br>
            <input type="text" οnblur="checkUsername()" id="username" placeholder="请注册用户名"> <span id="msg_uname"></span> <br>
          密码:<br>
            <input type="text" id="password" placeholder="请输入密码"> <br>
          手机:<br>
            <input type="text" id="repassword" placeholder="请输入手机号"> <br>
          性别:
            <input type="radio" name="gender" value="f" checked> 女
               <input type="radio" name="gender" value="m"> 男  <br>
              <button type="submit">注册</button>
        </fieldset>
      </form>
  </body>
  <script>
    function  checkUsername(){
        let username = $("username").value;
        let regex = /^[\w]{8,12}$/
        if(!regex.test(username)){
           alert("不符合正则表达式");
           return false;
        }
        let xhr = getXhr();
        xhr.open("get","http://localhost:8088/jsp_day03/checkUsername.lr?username="+username,false);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                $("msg_uname").innerText = xhr.responseText;
            }
        }
        xhr.send(null)
        return false;
    }
    function $(id){
      return document.getElementById(id);
    }
    function getXhr(){
        let xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }
  </script>
</html>

服务端代码：MyServlet.java

复制代码

package com.ajax;

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;
import java.io.PrintWriter;

@WebServlet("*.lr")
public class MyServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String username = req.getParameter("username");
        PrintWriter pw = resp.getWriter();
        System.out.println(username);
        try {
            Thread.sleep(30000);
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }

        if("zhangsan".equals(username)){
            pw.println("用户名已经存在，请重新输入");
        }else{
            pw.println("用户名可以使用");
        }
    }
}

5.2.3 异步编程简介

在传统的同步编程中，任务一般会逐一执行 ，导致后续任务必须等待前一个任务完成后才能开始。与之相对，异步编程允许程序在等待某些操作（如数据的读写或网络请求）完成时继续执行其他任务，从而有效减少等待时间和提高程序运行效率。

==异步==的任务，并不会像同步任务一样按照顺序执行，而是当一个异步任务被创建以后，他会被放入==任务队列==中进行等待，然后通过一定的机制，来让其回到主线程继续执行。

复制代码

console.log("任务1--同步");
console.log("任务2--同步");
setTimeout(function () { console.log("任务3--异步"); }, 0)
console.log("任务4--同步");

异步编程的两大核心优势

提升执行效率

异步编程通过并行处理多个操作或任务，有效地利用系统资源，尤其是在涉及到I/O操作（如文件读写、网络请求等）的场景中，能显著减少程序的闲置时间，从而加速程序的整体运行速度。
改善用户体验

尽管异步编程带来了诸多好处，但它也引入了一些挑战，主要包括代码复杂性增加和调试难度提升。由于异步代码的执行顺序不像同步代码那样直观，因此维护和理解异步代码可能会更加困难。

==不过，异步编程的优点远远大于缺点的。==

异步编程的两个关键概念

事件循环

事件循环是异步编程的核心，负责管理和执行所有的异步任务。它不断检查是否有任务完成并准备执行回调函数，是异步编程能够实现的基础。
回调函数

回调函数是异步操作完成后被调用的函数。通过回调，程序可以在适当的时候响应异步操作的完成，执行相应的任务。

在JavaScript中，可以完成异步编程的有==定时器==，==AJAX==，以及ES6中引入的==promise==。

5.3 AJAX(并非是ES6中提出的概念，2005年提出的)

5.3.1 ajax的简介

ajax是asynchronous javascript and xml(异步的js和xml)的简写。
是一种用来改善用户体验的技术
其实质是使用XMLHttpRequest对象异步的向服务器发送请求
服务器返回部分数据(减少网络传输)，而不是一个完整的页面。
以页面无刷新的效果，更改页面的局部内容。

原理：

复制代码

1. 当用户进行部分数据验证时，会调用ajax对象。
2. 通过ajax对象向服务器发送请求，同时绑定一个事件处理函数，
3. 当服务器处理完数据后，会返回部分数据，事件处理函数会接收到这一部分数据
4. 从而通过js来完成局部刷新。

总结：ajax，就是异步向服务器发送请求，以达到页面的局部刷新，而不是整个页面刷新的技术。大大改善了用户的体验度。

5.3.2 ajax对象

复制代码

function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){ //兼容 IE7+, Firefox, Chrome, Opera, Safari
      xhr = new XMLHttpRequest();
   }else{  // 兼容 IE6, IE5 
      xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
}

5.3.3 常用属性和方法

open(method,url)

复制代码

ajax创建请求，method是请求方式get/post,url是地址

send()

复制代码

ajax发送请求
    get请求时，参数和参数值写到url上，传入null。
   post请求，参数和参数值写到send()括号里

onreadystatechange

复制代码

发生任何状态变化时的事件控制对象。
    1）绑定一个事件处理函数，该函数用来处理readystatechange事件
    2）当ajax对象的readyState的值发生了改变，比如从0变成了1，就会产生readystatechange事件

readyState

复制代码

表示ajax对象与服务器通信的状态
   0: 尚未初始化
   1:正在发送请求
   2：请求完成
   3：请求完成，ajax正在接受数据
   4：ajax接收数据成功

responseText

复制代码

接收服务器返回的文本

responseHTML

复制代码

接收服务区返回的HTML

status

复制代码

服务器返回的HTTP响应的状态码
   200：  表示请求成功
   202：  请求被接收，但是处理未完成
   400：  错误的请求
   404：  资源未找到
   500：  服务器代码有问题

5.3.4 ajax编写步骤

1）获取ajax对象：获取XMLHttpRequest对象实例

复制代码

function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
   }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
}

2）绑定事件回调函数: 为ajax对象的onreadystatechange事件设置响应函数

复制代码

function fn(){
   if(xhr.readyState==4 && xhr.status==200){
      var txt = xhr.responseText;
      //DOM操作
   }
}

3）创建请求：调用XMLHttpRequest对象的open方法

复制代码

// get请求
xhr.open('get','xxx.do',true);

注意：true表示发送异步请求！   ajax发送异步请求时，用户仍然可以对当前页面做其他的操作


// post请求
xhr.open('post','xxx.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

注意：HTTP协议要求发送post请求时，必须有content-type消息头，但是默认情况下ajax对象不会添加消息头，所以要调用setRequestHeader方法，添加这个消息头。

4）发送请求：调用Ajax对象的send方法

get请求：
- send方法内传递null：
  
  xhr.send(null)
- 若要提交数据，则在open方法的"URL"后面追加
  
  比如xhr.open('get'，'xxx.do?name=value&&name=value'，true)
post请求：
- xhr.send(name=value&&name=value);

5.3.5 案例演示

ajax.jsp

复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        #wrap{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 2px 2px 1px #ccc;
        }
        #wrap > div{
            margin-top: 20px;
        }
        #wrap > div > label{
            width: 40px;
            display: inline-block;
        }
        #wrap > div > button:nth-child(2){
            margin-left: 20px;
        }
        #box1 {
            margin-top: 30px;
            border-top: 1px solid black;
            padding-top: 20px;
        }
    </style>

</head>
<body>
    <div id="wrap">
        <div>
            <label for="name">姓名</label>
            <input id="name" type="text">
        </div>
        <div>
            <label for="age">年龄</label>
            <input id="age" type="text">
        </div>
        <div>
            <button id="1" οnclick="sendGet()">get请求</button>
            <button id="2" οnclick="sendPost()">post请求</button>
        </div>
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
    <script>
        function getXhr(){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHttp")
            }
            return xhr;
        }
        function sendGet(){
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            //创建请求
            var xhr = getXhr();
            xhr.open('get','testGet?name='+name+'&&age='+age,true);
            //绑定事件函数,当状态发生改变时，就会执行函数中逻辑，比如0到1的变化
            xhr.onreadystatechange=function () {
                //4的时候，表示ajax接收到服务器返回的数据，200表示请求成功
                if(xhr.readyState==4&&xhr.status==200){
                    var txt = xhr.responseText;
                    document.getElementById("box1").innerText = txt;
                }
            };
            xhr.send(null);
        }
        function sendPost(){
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var xhr = getXhr();
            xhr.open('post','testPost',true);// true表示异步，false表示同步
            //post请求必须设置一个消息头
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4&&xhr.status==200){
                    var txt = xhr.responseText;
                    document.getElementById("box2").innerText = txt;
                }
            };
            xhr.send("name="+name+"&&age="+age);
        }
    </script>
</body>
</html>

AjaxServlet组件

复制代码

package com.shuilidianli.web;

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;
import java.io.PrintWriter;

@WebServlet("/testGet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf8");

        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(name+","+age);
        PrintWriter pw = resp.getWriter();
        pw.println("你好！祝你:\n 升官发财, 前途无量");
    }
}

AjaxServlet2组件

复制代码

package com.shuilidianli.web;

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;
import java.io.PrintWriter;

@WebServlet("/testPost")
public class AjaxServlet2 extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf8");

        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(name+","+age);
        PrintWriter pw = resp.getWriter();
        pw.println("你好,"+name+"!送"+age+"岁的你一句诗词:\r 云淡风轻近午天，傍花随柳过前川");
    }
}

5.4 JQuery对Ajax的支持

5.4.1 JQuery简介

原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率,

它提供的 API 易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

它也是一个过时的库

所有的库都是为了解决我们开发时的痛点而存在的操作。jQuery解决的问题主要有两个:简化DOM操作，解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angular这些大型框架的出现，在实际项目中使用jQuery的机会可以说是少之又少。

因此，在这里我们仅介绍一下，JQuery库里对Ajax支持的部分。

5.4.2 引入库

第一种方式：引用本地(服务器)的JS文件

第二种方式：使用CDN(内容分发网络，即公共服务器)

字节跳动CDN

复制代码

<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
</head>

百度CDN

复制代码

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

新浪CDN

复制代码

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

Google CDN

复制代码

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

使用CDN的优势：

复制代码

1.调用的库在公共服务器上，减少自身服务器的压力。因为我们服务不需要通过我们自身服务器去加载文件。
2.使用人数多，可能很多的网站都在使用这个东西，可以使用到浏览器的缓存，比如a网站使用这个库，b网站也使用，那么用户访问a网站的时候，他会去加装文件，当他去访问b网站的时候，就不用去加装这个文件了。那也可以进一步提示我们的加装速度。

不推荐国外的CDN，因为网络不稳定。

测试是否引用成功：

复制代码

<script>
   alert($)
   //console.log($)      $是Jquery对象，如果打印出来内容，就说明引用成功
</script>

5.4.3 常用函数

1）load()

复制代码

作用：向服务器发送请求，并将服务器返回的数据添加被选中的元素中。
语法：$(selecter).load(URL,Data [,callback] )
      URL:  向服务器发送的请求路径
        Data: 请求参数
                      可以是字符串形式：“username=zhangsan&age=22”
                         可以是对象形式：{"username":"zhangsan","age":23}
                            有请求参数时，发送post，否则发送get

2）get()/post()

复制代码

作用：get()和 post()方法分别用于通过HTTP GET 和POST 请求向服务器发送请求。
语法：
    $.post(URL，data，callback，dataType)
      URL：发送请求的 URL字符串。
      data：可选的，发送给服务器的字符串或 key/value 键值对。
      callback：可选的，请求成功后执行的回调函数。
      dataType：可选的，从服务器返回的数据类型。默认：智能推断（可以是html,text,xml, json, script）。 
      
注意：get()可能返回浏览器缓存数据，post()不会返回缓存数据

3）ajax()

复制代码

ajax()
    用法：$obj.ajax({});
        url：请求地址
        data:请求参数
        type:请求方式
        dataType:返回的数据类型
        success:正常时的回调函数
        error:错误时的回到函数
        async:true默认值，当值为false时，发送同步请求

5.5 回调地狱

回调地狱这个词听起来就非常的高大上，想要接触Promise之前，必须要懂得什么是回调地狱，以及为什么会产生回调地狱？

先来看看概念：当一个回调函数嵌套一个回调函数的时候就会出现一个嵌套结构，当嵌套的多了就会出现回调地狱的情况。

根据前面我们可以得出一个结论：存在异步任务的代码，不能保证能按照顺序执行，那如果我们非要代码顺序执行呢？

举个例子：让四个回调函数打印骆宾王的《咏鹅》，咱们必须要这样操作，才能保证顺序正确：

复制代码

setTimeout(function () {
   setTimeout(function () {
      setTimeout(function () {
         setTimeout(function () {
            console.log("红掌拨清波")
         }, 1000)
         console.log("白毛浮绿水")
      }, 2000)
      console.log("曲项向天歌")
   }, 3000)
   console.log("鹅鹅鹅")
}, 4000)

可以看到，代码中的回调函数套回调函数，居然套了4层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。

总结一下，回调地狱就是为实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

那该如何解决回调地狱呢？

复制代码

1. 使用ES6引入的promise
2. async/await

5.6 promise的应用

Promise是js中的一个原生对象（也可以理解为一个类或者一个构造函数），是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。

Promise是一种对异步操作的封装，表示一个操作现在可能还没有完成，但将来会完成，并提供了成功或失败时要执行的操作。

5.6.1 Promise的三种状态

复制代码

pending
fulfilled
rejected

5.6.2 Promise的参数

Promise构造函数的参数，需要我们传入一个函数，我们需要处理的异步任务就是书写在该函数体内。传入的这个函数，要求必须要有两个参数，第一个参数是异步任务执行成功时的回调函数，第二个参数是异步任务执行失败时的回调函数，正常来说，参数名叫什么都无所谓，但是咱们尽量做到见名知意嘛，所以规范中命名为resolve（解决的含义），reject（拒绝）。异步任务执行成功时调用resolve函数返回结果，反之调用reject。

复制代码

let p = new Promise((resolve, reject) => {
    //伪代码
    let t = Math.round(Math.random() * 10)
    console.log(t);
    if (t <= 7) {
        resolve("成功执行了")
    } else {
        reject("执行失败了")
    }
})

5.4.3 常用API

then()

复制代码

Promise对象的then方法用来接收处理成功时响应的数据，

catch()

复制代码

catch方法用来接收处理失败时相应的数据。

5.7 Async/Await

Async/await是建立在Promises之上的语法糖，使得异步代码的编写和理解更接近传统的同步代码风格。(使用同步的方式编写异步代码)

5.7.1 Async关键字

声明函数时，在前面添加Async关键字，表示该函数为一个异步任务，不会阻塞后面函数的执行。

复制代码

async function fn(){
   return '任务1';
}
console.log(fn());   // Promise{fulfilled: "任务1"}

打印可以看到async函数返回数据时自动封装为一个Promise对象。

和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用then方法来接收，失败时用catch方法来接收数据：

复制代码

async function fn() {
   var flag = true;
   if (flag) {
      return '任务1--成功';
   }
   else{
      throw '任务1-失败'
   }
}
fn()
   .then(data=>{
   console.log(data);
})
   .catch(data=>{
   console.log(data);
})

console.log('先执行我，表明async声明的函数是异步的');

5.7.2 Await关键字

await关键字只能在使用async定义的函数中使用
await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）
await函数不能单独使用
await可以直接拿到Promise中resolve中的数据。

复制代码

        //封装一个返回promise的异步任务
        function fn(str) {
            var p = new Promise(function (resolve, reject) {
                var flag = true;
                setTimeout(function () {
                    if (flag) {
                        resolve(str)
                    } else {
                        reject('处理失败')
                    }
                })
            })
            return p;
        }

        //封装一个执行上述异步任务的async函数
        async function test(){
            var res1=await fn('任务1');  //await直接拿到fn()返回的promise的数据，并且赋值给res
            var res2=await fn('任务2');
            var res3=await fn('任务3');
            console.log(res1,res2,res3);
        }
        //执行函数
        test();

5.8 Axios

5.8.1 Axios简介

Axios(中文谐音：爱克丝赛欧斯)

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官方网站：http://www.axios-js.com

源码：https://gitee.com/charlinchenlin/store-pos

特性:

1、从浏览器中创建 XMLHttpRequests

2、从 node.js 创建 http 请求

3、支持 Promise API

4、拦截请求和响应

5、转换请求数据和响应数据

6、取消请求

7、自动转换 JSON 数据

8、客户端支持防御 XSRF

5.8.2 安装方式

使用 npm:

复制代码

$ npm install axios

使用 bower:

复制代码

$ bower install axios

使用CDN

复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

5.8.3 案例演示

复制代码

<!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>
    <!-- 本地引入axios -->
    <script src="000/axios-master/lib/axios.js"</script>
    <!--  -->
</head>
<body>
    <button id="btn">axios使用get提交数据</button>
    <button id="btn1">axios使用post提交数据</button>
    <button id="btn2">直接使用axios发送get提交数据</button>
    <button id="btn3">直接使用axios发送post提交数据</button>
    <script>
        var btn = document.querySelector("#btn");
        btn.addEventListener("click",function (params) {
            var url = "http://www.liulongbin.top:3006/api/get";
            var paramsobj = {name:'zs',age:20};
            axios.get(url,{params:paramsobj}).then(function (res) {
                var data = res.data;
                console.log(data);
            });
        });
        document.querySelector("#btn1").addEventListener("click",function (params) {
            var url = "http://www.liulongbin.top:3006/api/post";
            var dataobj = {location:'zs',address:'zs'};
            axios.post(url,{params:dataobj}).then(function (res) {
                console.log(res.data);
            });
        })
        document.querySelector("#btn2").addEventListener("click",function (params) {
            var url = "http://www.liulongbin.top:3006/api/get";
            var paramsdata = {name:'zss',age:20};
            axios({
                url:url,
                method:'GET',
                params:paramsdata
            }).then(function (res) {
                console.log(res.data);
            });
        });
        document.querySelector("#btn3").addEventListener("click",function (params) {
            var url = "http://www.liulongbin.top:3006/api/post";
            var paramsdataa = {name:'钢铁侠',age:35};
            axios({
                url:url,
                method:'POST',
                data:paramsdataa
            }).then(function (res) {
                console.log(res.data);
            });
        });
    </script>
</body>
</html>

2024年9月19日---关于ES6（2）

五 异步编程

5.1 回调函数

5.1.1 概念

5.1.2 应用场景

5.2 同步和异步

5.2.1 同步编程简介

5.2.2 JavaScript的同步演示

5.2.3 异步编程简介

5.3 AJAX(并非是ES6中提出的概念，2005年提出的)

5.3.1 ajax的简介

5.3.2 ajax对象

5.3.3 常用属性和方法

5.3.4 ajax编写步骤

5.3.5 案例演示

5.4 JQuery对Ajax的支持

5.4.1 JQuery简介

5.4.2 引入库

5.4.3 常用函数

5.5 回调地狱

5.6 promise的应用

5.6.1 Promise的三种状态

5.6.2 Promise的参数

5.4.3 常用API

5.7 Async/Await

5.7.1 Async关键字

5.7.2 Await关键字

5.8 Axios

5.8.1 Axios简介

5.8.2 安装方式

5.8.3 案例演示

五异步编程