first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/ajax/ajax封装练习/ajax promise.html

@@ -0,0 +1,142 @@
+<!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>promise</title>
+</head>
+<body>
+    <!-- promise是es6的时候才更新出来的:promise本身是同步的，但调用promise的过程是异步的（then通过回调拿结果） -->
+         <!-- Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。
+     它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。
+
+         JS执行——Promise：   Pending状态（进行中）
+                            Fulfilled状态（已成功）
+                            Rejected状态（已失败）
+         
+         一旦状态改变就不会再变 （两种状态改变：成功或失败）
+         Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
+
+resolve:将Promise对象状态由“未完成”变为“成功”，即Pending -> Fulfilled，在异步操作成功时调用，并将异步操作的结果作为参数传递出去                       
+reject：将Promise对象状态由“未完成”变为“失败”，即Pending -> Rejected，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。
+
+  Promise实例生成后，可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数：
+在Promise新建后会立即执行，然后，then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行。
+then在Promise对象状态改为Resolved时调用 （必选）；Promise对象状态改为Rejected时调用 （可选）
+
+
+            拓展 async/await
+async：异步——————————async 函数必定返回 Promise，我们把所有返回 Promise 的函数都可以认为是异步函数。
+特点体现在以下四点：    内置执行器
+                      更好的语义
+                      更广的适用性
+                      返回值是 Promise
+
+await：等待——————————await命令后面一般是一个 Promise 对象，返回该对象的结果（利用await来等待一个Promise。）如果不是 Promise 对象，就直接返回对应的值。
+           另一种情况是，await命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象。
+            
+            
+Promise优缺点：
+              优点         	    缺点
+              解决回调	        无法监测进行状态
+              链式调用	        新建立即执行且无法取消
+              减少嵌套	        内部错误无法抛出 -->
+
+
+
+<!-- 链式调用：当一个方法执行结束以后直接把返回值用于下一个方法
+例：
+   num = 0;
+   test(){
+    this.num += 1
+    return this.num
+   }
+   test2(){
+    this.num += 100
+    return this.num
+   }
+按理说test() 和 test2() 分别调用两次 ,console.log(ajax.test2())即1+100=101;
+
+   num = 0;
+   test(){
+   this.num += 1
+   return this   (返回了一个this指向)
+  }
+   test2(){
+   this.num += 100
+   return this.num
+  }
+链式调用写法：var result = ajax.test().test2()   console.log(result)即可
+因此，一定要确认this指向的正确性！！！ -->
+</body>
+
+
+
+<script src="./ajax promise.js"></script>
+<!-- promise异步方案 -->
+<!-- <script>
+     console.log(1);
+        ajax.get({
+        url:"http://localhost",
+        data:{
+            id:1,
+            page:2
+        },
+        header:{
+            'Content-Type':'application/json;charset=UTF-8'
+        }
+    }).then(res => {
+            console.log("2",res);
+    }).catch(err => {
+            console.log(err);
+    })
+    console.log(3);
+</script> -->
+
+<!-- promise同步方案：将promise的异步调用转为同步调用 -->
+<script>
+    // console.log(1);
+       ajax.get({
+       url:"http://localhost",
+       data:{
+           id:1,
+           page:2
+       },
+       header:{
+           'Content-Type':'application/json;charset=UTF-8'
+       }
+   }).then(res => {
+           console.log("2",res);
+   }).catch(err => {
+           console.log(err);
+   })
+//    console.log(3);
+
+
+//    async写在最近的方法名前面，和await配套使用
+   var a = async () => {
+    console.log(1);
+    var res = await ajax.get({
+       url:"http://localhost",
+       data:{
+           id:1,
+           page:2
+       },
+       header:{
+           'Content-Type':'application/json;charset=UTF-8'
+       }
+    })
+    console.log("2",res);
+    console.log(3);
+}
+
+console.log(4);
+// a外部方法调用是异步的,a内部是同步的,先跑完异步再来跑同步
+a();
+console.log(5);
+
+// 结果:4 1 5 23
+// 原因如下:首先从上往下同步执行4,到a(),执行了1,发现await内部等待,外部就跑去执行5,最后等待得到2和3
+</script>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/ajax/ajax封装练习/ajax promise.js

@@ -0,0 +1,38 @@
+class Ajax{
+    constructor() {
+        this.ajax = new XMLHttpRequest();
+    }
+
+    get(params){         //(success,error)
+        return new Promise((resolve,reject) => {
+            var str = ""
+            for (const key in params.data) {
+                str += `&${key}=${params.data[key]}`
+            }
+
+            str = str.replace("&", "?")
+            this.ajax.open("GET", `${params.url}${str}`)
+            this.ajax.send()
+            this.readystatechange(resolve, reject)
+        })
+    }
+
+    post() { }
+
+
+    readystatechange(resolve, reject) {
+        this.ajax.onreadystatechange = () => {
+            if (this.ajax.readyState == 4) {
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    // console.log(data);
+                    resolve(data)
+                } else {
+                    reject(this.ajax)
+                }
+            }
+        }
+    }
+}
+
+var ajax = new Ajax();

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/ajax/ajax封装练习/ajax回调函数.html

@@ -0,0 +1,31 @@
+<!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>
+</head>
+<body>
+    <!-- ajax请求代码的封装一般分为三层:  config 配置层  serve 请求中间层  ajax 封装层 -->
+    顺序：   配置 ————> 工具函数 ————>ajax ————> sever ————> page
+</body>
+<script src="./ajax回调函数.js"></script>
+<script>
+    // 异步转同步  回调函数callback微信小程序常使用
+    ajax.get({
+        url:"http://localhost",
+        data:{
+            id:1,
+            page:2
+        },
+        header:{
+            'Content-Type':'application/json;charset=UTF-8'
+        },
+        success:(res)=>{
+            console.log(res);
+        },
+        error:(err)=>{},
+    })
+</script>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/ajax/ajax封装练习/ajax回调函数.js

@@ -0,0 +1,75 @@
+class Ajax {
+    constructor() {
+        this.ajax = new XMLHttpRequest();
+        // 请求监听全局只运行一次，是异步的，有需要（先send再监听）就运行，不需要就待机
+        // 监听放这里参数很难回调出去，原因是get和readystate是相互独立（局部）的
+        // this.readystatechange();
+        // 局部变全局
+        this.success = null 
+
+    }
+
+    // java中“@”大多代表注解的意思。那么@param是用来在DAO层中声明参数的注解方式。
+    // @ param标签可以归档方法或构造器的某个单一参数，或者归档类、接口以及泛型方法的类型参数。
+    // 在使用@ param标签时，我们应该针对方法的每一个参数都使用一个该标签。
+    // 每个段落的第一个词会被当作参数名，而余下的部分则会被当作是对它的描述。
+    /**
+     * 接收多个参数，所以封装一个对象直接接收对象
+     * 
+     * @param{*}params
+     * {
+     *   请求的网址  url:"",
+     *   
+     *   请求的参数  data:{
+     *     (对象)      id:1,
+     *                 page:2
+     *              },
+     *   
+     *   请求头      header:{
+     *   (对象)        'Content-Type':'application/json;charset=UTF-8'
+     *              },
+     * 
+     *   请求成功的回调   success:(res)=>{},
+     *      (方法)
+     * 
+     *   请求失败的回调   error:(err)=>{不同地方的错误提示也不一样，可以不用但必须要有},
+     * }
+     */
+
+
+    get(params) {
+        this.success = params.success
+        var str = ""
+        // get的传参形式是url+?key=value,但我们的参数是对象，所以要转换(字符串拼接和符号替换)
+        // 对对象遍历，拿到值
+        // this.ajax.open("GET","http://localhost")
+        for (const key in params.data) {
+            // console.log("key",key);
+            str += `&${key}=${params.data[key]}`
+        }
+        str = str.replace("&", "?")
+        this.ajax.open("GET", `${params.url}${str}`)
+        // console.log(`${params.url}${str}`);
+        this.ajax.send();//send必须要有状态监听，多个共用一个状态监听即可
+        // 监听放在这里用可以直接把后端的参数回调出去
+        this.readystatechange(params.success, params.error)
+    }
+    post() { }
+    readystatechange(success,error) {
+        this.ajax.onreadystatechange = () => {
+            // console.log(this.ajax.readyState);
+            if (this.ajax.readyState == 4) {
+                // 后端给我们的数据保存在response和responseText里
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    // console.log(date);
+                    success(data)
+                    this.success(data)
+                } else {
+                    error(this.ajax)
+                }
+            }
+        }
+    }
+}
+var ajax = new Ajax();