• 前端学习(三十六)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
                ...
    ------------------------------

  • 相关阅读:
    Oracle数据库学习1--简介,基本了解
    数据导出excel表格和Word文档
    Ado.Net 数据库增删改查(联合版)
    Ado.Net 数据库增删改查
    Chapter 10. 设计模式--单例模式
    Chapter 10. 设计模式--工厂模式
    Chapter 9. 线程
    Chapter 8. 进程
    Chapter 7. 对话框控件
    Chapter 6. ListBox控件(双击播放图片)
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579514.html
Copyright © 2020-2023  润新知