前端学习(三十六）promise（笔记）

一个页面：  头部、用户信息、新闻列表

jquery ajax:  
1、
$.ajax({
    url:'',
    dataType:'json',

}).then(res=>{
    //res :  成功后的返回
},err=>{
    //err: 失败的对象
});

2、
let url = '';
$.ajax({
    url,
    data:
    dataType:
    ...
    success:function(res){
        //res 成功后的数据
    },
    error(err){
        //err 失败的对象信息
    }
});

实现 ：  头部，用户，新闻  三块功能
方法一：
    $.ajax({url:'头部数据接口地址',success(res){用res来渲染头部页面}});
    $.ajax({url:'用户数据接口地址',success(res){用res来渲染用户部分页面}});
    $.ajax({url:'新闻数据接口地址',success(res){用res来渲染新闻部分页面}});
要求：等三部分数据都返回后，做点事情，打印三次请求的结果。
    $.ajax({
        url:'头部',
        success(res){
            //res
            $.ajax({
                url:'用户',
                success(res){
                    //头部和用户都成功
                    $.ajax({
                        url:'新闻'
                        success(){
                            //三次都成功

}
                    });
                }
            });
        }
    });

==========================
以上，程序员 回调函数  —— 恶梦

直到 2015 年，ES6 出来了 —— Promise

Promise: —— 承诺、保证
    多个异步请求全部完成后，要做的事情 —— 通过 Promise 来解决。

一、基本用法
    let p1 = new Promise(function(resolve,reject){
        $.ajax({
            url:'',
            data:
            dataType:
            ...
            success(res){
                以前在这里直接处理res
                现在不直接处理，要如下
                resolve(res);
            },
            error(err){
                reject(err);
            }
        });
    });

p1.then(res=>{
        //在这里处理成功的结果
    },err=>{});

二、真正用法
    Promise.all([Promise对象1，Promise对象2，...]).then(function(arr){
        //说明，所有的请求都成功了

//arr[0] ——> 请求1的结果
        //arr[1] ——> 请求2的结果
        ...
    },function(err){
        //只要有一个失败
    });
三、封装
    function creactPromise(url){
        return new Promise(function(resolve,reject){
            $.ajax....
        });
    }
四、jquery 的 ajax

let r =$.ajax({
        .....
    });
    // r ——> 就是一个 Promise对象

$.ajax({}).then(res=>{},err=>{});

Promse.all([
        $.ajax({}),
        $.ajax({}),
        $.ajax({})
        ...
    ]).then(arr=>{
        //arr  对应多个请求的结果
    },err=>{});

五、Promise.race
    Promise.race([p1,p2....]).then(res=>{
        //成功
        res —— >  最先返回结果的那个请求
    },err=>{});

//应用，对于同一个数据，多个数据接口提供请求，可以多个接口同时访问，哪个快就用哪个结果—— 保证用户能使用最快的数据

==========================

要求：当头部请求完成后，做点事，再去请求用户，用户请求完成后，做点事，再去请求新闻 ....
    
Generator: 生成器 —— 函数
    1. 把一个函数切分成若干个小函数
    2. 把异步请求同步化
    3. 可以暂停的函数

语法：
    function* show(){
        alert(1);
        alert(2);
    }

let ge = show(); // ge --  Generator 对象
    ge.next(); //下一个 ， 触发 Generator 函数的执行
    
暂停：  在函数里面 ， 使用   
    yield —— 只用于 Generator 函数里。

generator:
    1) function*
    2) 返回 Generator 对象
    3) 可以暂停
        yield
    4) obj.next()
yield:
    1）暂停函数
    2）可以返回中间结果
    3）可以接收中间参数

* yield 相当于把函数切分为若干段 ，yield 属于下半段
==========================
返回值：
    
    obj.next(); —— 返回值：
        {
            done: false
            value:  yield 返回结果
        }

* yield 返回值 属于上一部分
* 每一个next 对应的是切分后的一部分（不是对应一个 yield）

* 中间过程返回值 通过  yield ，最后的结果返回，通过 return

中间过程：  done : false
整体结束：  done: true

==========================
回顾：
    function* show(){
        alert('a');
        yield x;
        alert('b');
        yield y;

return z;
    }
    //以上函数被分为3块，
        第一块：  alert('a');   x
        第二块：  yield     alert('b');  y
        第三块：  yield  return z;
    //以下的next 对应的是每一块
    let obj = show();
    let r1 = obj.next(); //r1:{value:x,done:false}
    let r2 = obj.next(); //r2:{value:y,done:false}
    let r3 = obj.next(); //r3:{value:z,done:true}

==========================
接收中间参数：
    obj.next(传入的参数);

使用 Generator 的意义：
    1、什么时候停止，停止多久，什么时候再开始，  是可以通过程序控制；
    2、在函数每次停止和下一次开始之间，可以做一些其它的操作；

==========================
题：
    function* show(){
        let a = 12;
        let b = yield 5;
        let c = 99;
        let d = yield;
        alert(a+b-c*d);
    }
    要求：把 5 接出来，乘以2，再传回去，程序如何写，结果是什么？

==========================
回顾场景：
    三次请求：　　头，用户，新闻　
    要求：  头
            用户
                新闻
    实现：
        一：回调嵌套
        二：Generator
            function* show(){
                yield $.ajax({请求头部});

yield $.ajax({请求用户信息});
                yield $.ajax({请求新闻信息});
            }
            let obj = show();
            let r1 = obj.next(); //r1 : 头部的返回结果
            ....
            obj.next();
            ....
            obj.next();
            ..
            obj.next();

==========================
ES6总结：
    let
    const
    块作用域
    ()=>
        1、 this 指向父级作用域
        2、arguments 不能用
        3、简写
            如果 参数只有一个，可以省略小括号
            如果 函数体只有一句话，并且是 return， 可以省略 大括号 和 return
    ...
        应用：
            1、扩展函数参数
                function show(a,b,...args){}
            2、复制数组
                let arr2 = [...arr1];
                方法：
                    a) 循环复制
                    b) ...
                    c) let arr2 = Array.from(arr1)

Map
        let map = new Map();
        map.set('key',value);
        map.get('key');
        map.delete('key');
    for..of:
        for(let item of map)
        for(let item of map.entries())
        for(let key of map.keys())
        for(let val of map.values())
    模块化：
        定义/导出：
            let a = 12;
            let b = '';
            export default {
                a,b
            }
        使用：
            import modA from 'a.js'
    JSON简写：
        1、 变量
            let a= 12;
            {
                //a:a
                a
            }
        2、函数：
            {
                show:function(){},
                show2(){
                    
                }
            }
    解构赋值：
        左边和右边结构一致;
    数组方法：
        let arr2 = arr.map(item=>{
            return item + 1;
        });

arr.forEach((val,index)=>{
            
        });

let arr2 = arr.filter(item=>{
            return item>10;
        });

arr.reduce((pre,cur,index,self)=>{
            return x; // x 做为下一次的前一个
        });
        arr.reduce((pre,cur,index,self)=>{},pre2);
        应用：
            1）数组求和
            2）二维数组扁平化
    面向对象：
        class Person{
            constructor(x){
                this.x = x;
            }
            show(){}
            show2(){}
        }
        class Worker extends Person{
            construnctor(){
                super();
                this.x = x;
                ....
            }
            show(){}
        }
    
    ``    字符串板
        `fdsafd${x}safdas`
    
    startsWith
    endsWith

Promise:
    Generator:
==========================
Bootstrap:
    前端布局的框架。主要应用于响应式的页面。
    官网：http://www.bootcss.com/

组成：
    基本样式
    组件
    Javascript 插件

* 强依赖于 jquery

原则：
1.引入库文件
    bootstrap.css

jquery.js
    bootstrap.js

下载：
    npm:
        npm i bootstrap
            不会下载 jquery
        npm i jquery
    bower:(安装 git )
        bower i bootstrap

2.基本结构
    div.container   —— 容器
        div.row —— 行
            div.col-
            内容
        
3.栅格
    整个页面分成12列
        
4. 列偏移
    col-sm-offset-4
5.列排序
    col-sm-push-*
    col-sm-pull-*
6.响应式工具
    .visible-sm
    .hidden-sm

------------------------------
基本样式：
    浮动：
        pull-left
        pull-right
    清除浮动：
        .clearfix
    文本居中：
        text-center
    文本颜色：
        text-primary
        text-danger
    按钮：
        基本样式：  btn
        不同样式：
            btn-primary
            btn-danger
            ...
------------------------------