一个页面： 头部、用户信息、新闻列表
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（笔记）
猜你喜欢
转载自www.cnblogs.com/wxiaoyu/p/9579514.html
周排行