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

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
            ...
------------------------------

前端学习(三十六)promise(笔记)的更多相关文章

  1. Java开发学习(三十六)----SpringBoot三种配置文件解析

    一. 配置文件格式 我们现在启动服务器默认的端口号是 8080,访问路径可以书写为 http://localhost:8080/books/1 在线上环境我们还是希望将端口号改为 80,这样在访问的时 ...

  2. 前端学习(十六):JavaScript运算

    进击のpython ***** 前端学习--JavaScript运算 在这一节之前,应该做到的是对上一节的数据类型的相关方法都敲一遍,加深印象 这部分的知识的特点就是碎而且杂,所以一定要多练~练习起来 ...

  3. 前端学习(三十九)移动端app(笔记)

    移动端App    开发App的三种方式    Native App         原生        底层语言        java         Android        oc      ...

  4. 前端学习(三十八)vue(笔记)

    Angular+Vue+React    Vue性能最好,Vue最轻=======================================================Angular     ...

  5. 前端学习(三十五)模块化es6(笔记)

    RequireJs:一.安装.下载    官网: requirejs.org    Npm:  npm i requirejs二.使用    以前的开发方式的问题:        1).js 是阻塞加 ...

  6. 前端学习(三十四)对象&模块化(笔记)

    人,工人 //类的定义    function Person(name,age){ //构造函数        //工厂模式        //1.原料        //var obj = new ...

  7. 前端学习(三十)es6的一些问题(笔记)

    赋值表达式    document.onclick = document.onmouseover = fn;    var a = b = c = d = 5;             不推荐 逗号表 ...

  8. 前端学习(二十六)移动端s(笔记)

    ===================================================弹性布局rem布局---------------------------------------- ...

  9. Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_act ...

随机推荐

  1. [BZOJ] 地精部落

    问题描述 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H 可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi,其中 Hi ...

  2. Feign调用远程服务报错:Caused by: java.lang.IllegalStateException: Method getMemberInfo not annotated with HTTP method type (ex. GET, POST)

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'ord ...

  3. php stristr()函数 语法

    php stristr()函数 语法 作用:返回一个字符串在另一个字符串中开始位置到结束的字符串,不区分大小写.直线电机厂家怎么样? 语法:stristr(string,search,before_s ...

  4. [luogu]P1168 中位数[堆]

    [luogu]P1168 中位数 题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.即前1 ...

  5. Delphi实现获取磁盘空间大小的方法

    unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, ...

  6. Java并发指南14:JUC中常用的Unsafe和Locksupport

    本文转自网络,侵删 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutoria ...

  7. POJ 1753 Flip Game (状压+暴力)

    题目链接:http://poj.org/problem?id=1753 题意: 给你一个4*4的棋盘,上面有两种颜色的棋子(一种黑色,一种白色),你一次可以选择一个棋子翻转它(黑色变成白色,同理反之) ...

  8. php面试专题---8、会话控制考点

    php面试专题---8.会话控制考点 一.总结 一句话总结: 主要是cookie和session的区别,以及用户禁用cookie之后怎么使用session 1.为什么要使用会话控制技术? 因为http ...

  9. /usr/bin/ld: cannot find -lgcc_s 问题解决小记

    /usr/bin/ld: cannot find -lgcc_s 问题解决小记 博客分类: Linux/Ubuntu 由于之前用wubi装的ubuntu并且只给了它10G的硬盘空间,随着学习的深入这种 ...

  10. leetcode 122. 买卖股票的最佳时机 II (python)

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...