前端学习(三十六)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
...
------------------------------
前端学习(三十六)promise(笔记)的更多相关文章
- Java开发学习(三十六)----SpringBoot三种配置文件解析
一. 配置文件格式 我们现在启动服务器默认的端口号是 8080,访问路径可以书写为 http://localhost:8080/books/1 在线上环境我们还是希望将端口号改为 80,这样在访问的时 ...
- 前端学习(十六):JavaScript运算
进击のpython ***** 前端学习--JavaScript运算 在这一节之前,应该做到的是对上一节的数据类型的相关方法都敲一遍,加深印象 这部分的知识的特点就是碎而且杂,所以一定要多练~练习起来 ...
- 前端学习(三十九)移动端app(笔记)
移动端App 开发App的三种方式 Native App 原生 底层语言 java Android oc ...
- 前端学习(三十八)vue(笔记)
Angular+Vue+React Vue性能最好,Vue最轻=======================================================Angular ...
- 前端学习(三十五)模块化es6(笔记)
RequireJs:一.安装.下载 官网: requirejs.org Npm: npm i requirejs二.使用 以前的开发方式的问题: 1).js 是阻塞加 ...
- 前端学习(三十四)对象&模块化(笔记)
人,工人 //类的定义 function Person(name,age){ //构造函数 //工厂模式 //1.原料 //var obj = new ...
- 前端学习(三十)es6的一些问题(笔记)
赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐 逗号表 ...
- 前端学习(二十六)移动端s(笔记)
===================================================弹性布局rem布局---------------------------------------- ...
- Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了
本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_act ...
随机推荐
- vue大文件分片上传插件
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- Test 6.24 T3 水题
问题描述 秋之国首都下了一场暴雨,由于秋之国地势高低起伏,不少地方出现了积水. 秋之国的首都可以看成一个 n 行 m 列的矩阵,第 i 行第 j 列的位置高度为 ai,j,首都以外的地方的高度可以都看 ...
- pyhive连接hive(失败)
一.安装pyhive pip install sasl(需要来下载至本地安装:https://download.lfd.uci.edu/pythonlibs/q4hpdf1k/sasl-0.2.1-c ...
- 记录一下LEETheme库主题切换的使用
LEETheme库的位置:https://github.com/lixiang1994/LEETheme 从https://github.com/gsdios的SDAutolayoutDemo 中的白 ...
- JS中的继承(原型链、构造函数、组合式、class类)
1.继承 应注意区分继承和实例化,实例化是生成一个对象,这个对象具有构造函数的属性和方法:继承指的应该是利用父类生成一个新的子类构造函数,通过这个子类构造函数实例化的对象,具有子类的属性和方法,同时也 ...
- PHPcms编辑器如何粘贴带格式的word文档
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- linux如何查看端口被哪个进程占用的方法
linux如何查看端口被哪个进程占用的方法: 1.lsof -i:端口号2.netstat -tunlp|grep 端口号 都可以查看指定端口被哪个进程占用的情况[步骤一]lsof -ilsof -i ...
- 攻防世界 | string
#encoding=utf-8 #!usr/bin/python from pwn import * io = remote('111.198.29.45',42643) io.recvuntil(& ...
- 奖项-MVP:MVP(微软最有价值专家)百科
ylbtech-奖项-MVP:MVP(微软最有价值专家)百科 微软最有价值专家(MVP) 是指具备一种或多种微软技术专业知识,并且积极参与在线或离线的社群活动,经常与其他专业人士分享知识和专业技能,受 ...
- 校内模拟赛 : Rima —— 字典树+树形DP
首先说一下,对一个刚学Trie树的蒟蒻来说(就是我),这道题是一道好题.Trie树比较简单,所以就不详细写了. Rima 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传 ...