Asynchronous 异步，ajax

Posted 2020-12-11 zzr666

 

1. ajax：asynchronous javascript and XML

   • 核心：异步通信，局部刷新

   • 实现：

     //1
     const xhr = new (window.XMLHttpRequest||window.ActiveXObject)("Microsoft.XMLHTTP");
     //2
     xhr.open(type:string,url:string);
     //3
     xhr.send(data:string|object|any);
     //4
     xhr.addEventListener("readystatechange",function(){
       if(xhr.readyState === 4 && ((xhr.status >=200 && xhr < 300)|| xhr.status ===304) ){
          xhr.responseXXX(responseText)
       }
     })

      

2. mock

   • 随机数据：

     1. 7大规则

     2. Random函数

     3. 正则

        基本格式:

        let data = `Mock.mock({
                    "list|30": [{
                        "id|+1": 100,
                        firstName: "@cfirst",
                        lastName: "@clast",
                        "gender|1":["男","女"],
                        phone:/1[3-9]d{9}/,
                        fullName:function(){
                            return this.firstName+this.lastName;
                        }
                    }]
                }).list`;

         

   • 拦截ajax：

     Mock.mock(/getStudents/, "get", function ({ url }) {
       //studentmanagesystem/getStudents?username=zs&password=123
       const user = toObj(url.split("?")[1]);
       if (user.username === "zs" && user.password === "123") {
         return true;
       }
       return false;
     });

      

3. 异步-asynchronous

   • 区别：

     • 同步：按顺序排队执行任务

     • 异步：js采用事件驱动机制，在单线程的模式下，使用异步回调的方式来实现非阻塞的io操作。具体实现原理就是：事件循环+异步队列

     • 异步有序：回调嵌套（回调地狱）

4. promise

   • 状态：pending、fulfilled、rejected

   • 修改状态的方式：调用构造函数中的resolve函数和reject函数

   • 与状态对应的监听器：通过then方法注册的onfulfilled和onrejected

   • then方法的返回值是一个promise实例：（其状态变化规则如下）

5. 函数有一个普通的返回值,函数执行完成，promise实例会变成完成状态，并且返回值就是promiseValue。

6. 返回值是promise实例，该promise实例与then的promise实例保持同步。

7. 返回一个thenable对象，（使用太少，不做介绍）。

8. 如果报错，promise实例变成拒绝状态

9. generator

   1. iterator：遍历的统一方案（"for...of" , "..."）

   2. generator：分段函数(“*” ， “yield”)

10. ES7：promise+generator

11. async 和 await

    • 异步函数的返回值是一个promise实例，其状态变化规则参见then方法

    • await用于异步函数内部，用来等待异步操作的结果(promiseValue)，其规则参见then方法

12. 宏任务和微任务

    1. 执行机制

13. 其他方法

    1. all

    2. race

    3. resolve

14. 实践

    1. 多个方法之间的顺序调用（异步）