Asynchronous

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)
      }
    })

    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:

      4. 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;
        });
        1. 异步-asynchronous

          • 区别:

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

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

            • 异步有序:回调嵌套(回调地狱)

        2. promise

          • 状态:pending、fulfilled、rejected

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

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

          • then方法的返回值是一个promise实例:(其状态变化规则如下)

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

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

        5. 返回一个thenable对象,(使用太少,不做介绍)。

        6. 如果报错,promise实例变成拒绝状态

        7. generator

          1. iterator:遍历的统一方案("for...of" , "...")

          2. generator:分段函数(“*” , “yield”)

        8. ES7:promise+generator

        9. async 和 await

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

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

        10. 宏任务和微任务

          1. 执行机制

        11. 其他方法

          1. all

          2. race

          3. resolve

        12. 实践

          1. 多个方法之间的顺序调用(异步)

posted @ 2020-07-02 15:08  昨夜小楼又东风。  阅读(207)  评论(0编辑  收藏  举报