异步做远程接口的四个阶段

 

【单线程同步】
                         例如：
                                 来了一个顾客(一个请求)，就分配一个服务员（内存空间），服务员将顾客点的菜交给后厨（后台），后厨开始做菜，厨房得把这个顾客点的菜做好了，交给服务员，服务员端给这个顾客，完成后才会招待下一位顾客。
                           注:
                                 一个时间只有一个事情在做，完成后才可进入下一个事情

【单线程异步】
                        例如：
                                 来了一个顾客(一个请求)，就分配一个服务员（内存空间），服务员将顾客点的菜交给后厨（后台），后厨开始做菜，此时服务员空闲了，可以招待下一位顾客，把下一个才告诉后厨

注: 异步就可以做很多事情。

【单线程异步】
                        我只管把我的需求交给系统，我告诉他你要帮我做这个事情，但是告诉他之后我， 还能做其他事情，系统处理完我的需求后主动调用我刚刚的方法。

【进程】
              启动一个程序 计算机里面就是启动了一个进程。(即:分配了一段内存空间,这个空间交给这一个程序进行执行。)

【线程】
                  在进程里面又可以把这个内存分成一块一块的，每一块来运行一个线程。
           注:  
                   没有进程，就不可能有线程。

【任务池】
                  放任务的(即异步的函数)     浏览器端的异步函数  。1、setTimeou 2、 setInterval 3、ajax的回调

setTimeout（（）=>{
           console.log(1)
  },0）
         这里的0并不是立即执行,  假如同步代码有很多,第一行就有setTimeout0，得先把其他代码
        代码执行完成, 主线程空闲下来的时候,才会去查看任务宠有没有任务，才会去执行setTimeout0

                                                                                                                               异步做远程接口
【第一阶段】
                                    “回调地狱”回调代码的表现形式:嵌套:不方便阅读
const callback = () => {
    // result 结果,将1-16的数字放进来
    let result = [];
    //发送请求
    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);
                            request({
                                type: "post",
                                url: "/users/four",
                                success(data) {
                                    console.log(data);
                                }
                            });
                        }
                    });
                }
            });
        }
    });
};

【 第二阶段】
                      依赖了一个promise的函数，将异步的函数封装在promise的内。  .then方法接收成功之后的返回值，第一次是resolve扔出来的值,之后每次接收的是上一次.then方法的返回值
                      第二阶段  Promiseto , 通过 Promise将异步函数封装
const _Promise = () => {
    // Promise构造函数 接收两个参数 resolve  reject
    // resolve是异步成功之后执行的函数
    // reject 当有异常的时候执行的函数  例如:网络中断
    // new Promise((resolve,reject) 同步，所以先执行1，在执行2  最后在执行异步3
    new Promise((resolve, reject) => {
        // console.log(1);
        // request 返回才执行  异步
        request({
            type: "post",
            url: "/users/one",
            // success表示异步成功,所以就调用resolve方法
            success(data) {
                // 通过resolve将data扔出去,then方法接收
                resolve(data);
                // console.log(3);
            }
        });
        // console.log(2); 
    })//.then方法接收成功之后的返回值，第一次是resolve扔出来的值,之后每次接收的是上一次then方法的返回值
        .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);
            return new Promise((resolve, reject) => {
                request({
                    type: "post",
                    url: "/users/four",
                    success(data) {
                        resolve(data);
                    }
                });
            })
        }).then((data) => {
            console.log(data);
        })
}

注： 第二阶段在代码上的表现形式看着舒服很多 也存在很多.then。
   

【第三阶段】
                      generator 函数,专门处理异步函数 ,声明方法与普通函数一样,但是在funtion后面加*      ，yield关键字
 掌握:
      1、怎么去定义generator函数(funtion*)
      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方法
            success: resolve
        });
    });
    console.log(data1);
    const data2 = yield new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/two",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data2);
    const data3 = yield new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/three",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data3);
    const data4 = yield new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/four",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data4);
}      

【第四阶段】
// 异步做远程接口统一用async/await
// 第四阶段 async/await 
// 第三阶段有一个run的辅助函数,第四阶段就将其处理掉
// async/await 的用法
async function _asyncFn(){
    const data1 = await new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/one",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data1);
    const data2 = await new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/two",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data2);
    const data3 = await new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/three",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data3);
    const data4 = await new Promise((resolve, reject) => {
        request({
            type: "post",
            url: "/users/four",
            // success表示异步成功,所以就调用resolve方法
            success: resolve
        });
    });
    console.log(data4);
}