Ajax与异步编程

集合类型

对象 数组(前两种ES5) Map Set(后两种ES6)
相同点与不同点
相同点:都是以键值对表现
不同点:1、对象键值对无序2、数组是有序 索引保存数组的有序3、对象的KEY只能是Sting 数组的KEY只能是number
4、任意类型5、Set的KEY等于value KEY=value。
对象迭代用 for in   对象不能用for of迭代 若想通过for of 迭代要用迭代器。
数组迭代用 for of 

同步与异步

         GET与POST区别
         GET更简单更快，并且在大部分情况下都能用
         以下情况必须用POST
         1、无法使用缓存文件(更新服务器上的文件或数据库)
         2、向服务器发送大量数据(POST没有数据量限制)
         3、发送包含未知字符的用户输入时，POST比GET更加稳定也可靠

        同步与异步区别:
        同步:提交请求->等待服务器处理->处理完毕后返回 这个期间客户端浏览器不能干任何事情。
        异步:请求通过事件触发->服务器处理(这时候浏览器依然可以做其它事情)->处理完毕。
       
       

Ajax用法

ajax 翻译成中文叫做“异步无刷新”技术。

ajax请求过程
 1、创建XMLHttpRequest 对象
let xhr; // 这个变量拿来装 xhr 对象
if(window.XMLHttpRequest){
  // firefox，chrome，opera，safari 等这些浏览器
  xhr = new XMLHttpRequest();
} else {
  // 说明是 IE6，IE5 及其以下版本
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2、打开请求 open 
发送请求到服务器
首先需要调用 xhr 的 open 方法，建立客户端与服务器之间的连接：
创建HTTP请求 语法 open(method,url,async) 功能:创建HTTP请求 规定请求类型 URL及是否异步处理请求 url是方法中必须要指定的参数
参数说明  method 请求 GET或POST(默认get) url:文件在服务器上的位置 async:true(异步)false(同步
xhr.open(method,url,async)
method请求类型:
2-1、GET 在创建连接时需要将参数放在URL?后。
xhr.open("GET","/users/isUser?name=xiejie&age=18",true);
xhr.send(null);
注:在路由端 GET请求参数const {name,age}=req.query
2-2、POST 
POST在创建连接时不需要将参数放在URL后 参数可放在请求体中
xhr.open("POST","/users/isUser",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencodeed;charset=UTF-8");
xhr.send("name=xiejie&age=18");
另一种方式JSON
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({name,age}));

3、发送send()
当我们发送了请求之后，从请求发送到响应回来，其实有一系列的状态值

请求未初始化（0）：还没有调用 send 方法的时候

服务器建立连接（1）：已经调用 send 方法，正在发送请求

请求已接收（2）：send 执行完成

请求处理中（3）：正在解析响应内容

请求已完成（4）：响应内容解析完毕，可以在客户端使用了

一般来讲，我们只需要关心最后一个值为 4 的状态，当状态值为 4 的时候，我们就可以将取回来的数据做出一定的操作。
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    // 做出具体的操作
  }
}

ajax 流程 1、创建XMLHttpRequest对象 2、通过open设置请求方式 3、响应XMLHttpRequest对象状态变化的函数onreadystatechange属性发送变化时触发(调用回调函数) 4、发送请求 

异步编程

同步任务的特点在于，一次执行一个任务，后面的任务只能排队，只有等待前面的任务结束之后，才能执行下一个同步任务。
所谓异步，有两种解决方案：1. 多线程 2. 单线程非阻塞

所谓单线程非阻塞，就是指将耗时间的任务（异步任务）交给其他模块来进行处理，处理完成之后，再由js的单线程进行处理。

整个js引擎的同步异步任务执行顺序如下：

执行同步任务
如果遇到异步任务，交给异步模块
如果异步处理模块已经处理异步任务，扔到任务队列里面排队，因为必须要等到所有的同步任务执行完之后，才会执行异步任务的结果
所有的同步任务执行完成，从任务队列里面获取异步的执行结果
常见的异步任务有：
setTimeout / setInterval、文件的读写（I/O 操作），网络请求

1、异步的第一个阶段 回调的代码的表现形式：嵌套 不易于阅读

export const callback = () => {
    request({
        type: "POST",
        url: "/users/one",
        success(data) {
            console.log(data);
            request({
                type: "POST",
                url: "/users/two",
                success(data) {
                    console.log(data);
                    request({
                        type: "POST",
                        url: "/users/three",
                        success(data) {
                            console.log(data);
                        }
                    });
                }
            });
        }
    });
}

2、第二阶段：Promise，通过 promise 将异步函数封装
resolve 异步成功之后执行的函数、 reject 是当有异常的时候执行的函数

 export const _promise = () => {
     new Promise((resolve, reject) => {
         request({
             type: "POST",
             url: "/users/one",
             success(data) {
                 resolve(data);
             }
         });
     }).then(
         data => {
             console.log(data);
            return new Promise((resolve, reject) => {
                 request({
                     type: "POST",
                     url: "/users/two",
                     success(data) {
                         resolve(data);
                     }
                 });
             }).then(
                 data => {
                     console.log(data);
                     return new Promise((resolve, reject) => {
                         request({
                             type: "POST",
                             url: "/users/three",
                             success(data) {
                                 resolve(data);
                             }
                         });
                     })

                 }).then(
                     data => {
                         console.log(data);
                     }
                 )
                          }
     )
 }

3、 第三阶段：generator 函数， 专门用来处理异步

3-1.如何定义generator函数：在 function*

3-2. yield: next() 会把 yield 后面的值给返回出去，value

3-3. next 的参数可以传递到 gen 函数的内部

//    第三阶段 generator 函数 专门处理异步的
/* 
1、 如何定义 generator函数:在 function*
2、yield:next() 会把yield后边的值返回出去:value
3、next参数可以传递到gen的函数内部
*/

     function *gen(){
        const data1=yield new Promise((resolve, reject) => {
           request({
             type: "POST",
             url: "/users/one",
             success:resolve
           });
         });
           console.log(data1);

           const data2=yield new Promise((resolve, reject) => {
             request({
               type: "POST",
               url: "/users/two",
               success:resolve
             });
           });
             console.log(data2);


             const data3=yield new Promise((resolve, reject) => {
               request({
                 type: "POST",
                 url: "/users/three",
                 success:resolve
               });
             });
               console.log(data3);
        } 
     function run(gen)
     {
       const it=gen();
       function next(data){
         const {done,value}=it.next(data);
         if(done)return;
         value.then(data=>next(data));
       }
       next();
     }
export default()=>{
      run(gen);
  }   

// 第四阶段： async/await
async function _asyncFn() {

    const data1 = await new Promise((resolve, reject) => {
        request({
            type: "POST",
            url: "/users/one",
            // success: resolve 
        });
        resolve();
    });
    // console.log(data1);
  
    const data2 = await new Promise((resolve, reject) => {
        request({
            type: "POST",
            url: "/users/two",
            success: resolve
        });
        resolve();
    });
    // console.log(data2);

    const data3 = await new Promise((resolve, reject) => {
        request({
            type: "POST",
            url: "/users/three",
            success: resolve
        });
    });
    // console.log(data3);

}

export default () => {
    _asyncFn();
};