promise
//使用同步的写法，解决异步操作，。（异步-性能高，用户体验更好；同步-更简单，更方便）
//使用方法：
let pro = new Promise（(reslove,reject)=>{
$.ajax({
url:'1.txt',//1.txt文件中返回json {"a":12,"b":5}
dataType:'json',
success(json){
reslove(json)//成功会调用reslove函数
},
error(err){
reject(err) //失败调用reject函数
}
})
}）
//调用方法：（当pro内部函数执行完成之后，就会调用then方法。then方法取代了AJAX中原本的成功与失败方法。）
pro.then((json)=>{
alert("成功")
},
(err)=>{
alert("失败")
})
//使用then()方法调用promise，参数为两个函数，第一个函数为成功，第二个函数为失败
//调用方法（多次调用）：
Promise.all([pro,pro1,pro2]).then((arr)=>{
alert("成功");
let[a,a1,a2]=arr;
},
(err)=>{
alert("失败")
})//pro\pro1\pro2是三个Promise对象。
//使用all()之后 需要参数对象内部函数全部执行完毕之后，才执行then,成功后返回一个数组，可以用解构赋值来接收为独立的数据。
//当多个pro对象，有逻辑关系的情况下。需要使用async、await解决。
//Promise.race()与Promise.all()的区别是，race()是 参数中ajax只要有一个完成即算完成。all()需要参数所有的ajax全部完成才执行成功
//注：JQ中ajax的返回值就是一个Promise对象。所以ajax也有then方法，用来执行成功与失败。所以Promise.all()中的参数，可以直接放ajax。
//Promise.all([$.ajax(xxx),$.ajax(xxx),$.ajax(xxx)]).then()//正常执行成功失败的方法。arr为三个ajax的返回数据。
generator 函数 （生成器函数）;
普通函数
function show(){}
生成器函数
function *show(){ xxx;yield;xxxx;yield}
生成器函数体中使用 yield实现暂停。
使用生成器函数的对象执行 next()方法 运行生成器函数.
let s = show(); s.next(); 每次调用next都会执行对应次数的yield前的代码。
关于yield
- yield 可以传参（只能传一个）。
- yield 也可以返回值（可以返回多个，使用数组返回）。
//使用next()方法传参 对应次数减一的yield 会接收到这个参数。
function *show(){
console.log(1);
let a = yield;
console.log(a);
}
let s = show();
s.next(); //执行输出1
s.next(2);//第二次调用next 第一个yield接受参数。a=2
//使用yield 返回数值 第一个yield返回值，第一个next方法接受。
function *show(){
console.log(1);
yield 55;
console.log(1);
return 89
}
let s = show();
let a = s.next(); // a = 55;
let aa = s.next();// aa= 89;
//使用yield 返回数组：
function *show(){
console.log(55);
yield [1,2,3];
console.log(89);
return 89;
};
let s = show();
let a = s.next();
let[q,w,e] = a.value;//a不是iterator;a.value是iterator （迭代器）compiler(编译器)
alert(q)//1
alert(w)//2
alert(e)//3
//结论，因为generator 需要外来的runner.js来配合使用，因为runner.js不统一 不标准，并且generator函数不能写成箭头函数，所以，这货被取代了；
async与await（取代了generator的东西）
//只要在函数前加上async即可 表明这是一个async函数。函数体中使用await代替yield。//调用直接运行函数名即可;
async function show(){}
//await 会判断返回的数据对象，如果不是一个异步操作他就不会停止，例如 await 12；就会直接运行不会出现暂停。
//await 后可以放promise、generator函数，或者另外一个async函数
//async 后的function可以省略,匿名函数 async ()=>{}
async function show(){
let data = await $ajax(xxx);
let data1 = await $ajax(xxx);
let data2 = await $ajax(xxx);
console.log(data,data1,data2)
}
show()//data,data1,data2 的数据
//含有逻辑关系的异步
async function show(){
let data = await $ajax(xxx);
if(dataxxxx){//如果满足条件走data1
let data1 = await $ajax(xxx);
console.log(data1)
}else{//否则走data2
let data2 = await $ajax(xxx);
console.log(data2)
}
}
show()//输出对应逻辑的数据
//以上是async函数中 ajax返回正常的情况；当ajax返回出错时情况处理，直接在async函数中使用try{}catch(){}包含所有的await的ajax;
//loading层 的使用 直接在async函数中所有await之前开启loading层，之后关闭即可。
关于ES6到ES5的编译，babel的使用.
babel是es next翻译器 也是polyfill工具（对浏览器功能进行填补）
安装流程：
1. 首先安装node.js→node会顺便下载一个npm(包管理器)在本地→使用npm安装babel-cli
ps:因为npm下载速度太慢，所以使用国内的淘宝镜像cnpm http://npm.taobao.org/
安装完cnpm之后即可使用cnpm命令代替npm命令安装babel-cli
cli=>command line interface,安装cli之后才可以使命令行支持babel
2.cmd跳转到想要安装babel的文件夹下(初始化项目)；
运行cmd输入命令符 cnpm -init后
根据提示依次输入：包名→版本→描述→入口文件→测试命令→git仓库→关键字→作者→遵循license
以上选项不填即为空或者默认，完成后在文件夹中会自动创建一个package.json的文件
3.输入命令符cnpm install --save-dev babel-cli 或者 cnpm install babel-cli -D
即可开始安装babel-cli
安装成功后在package.json文件中多出一行
"devDependencies": {
"babel-cli": "^6.26.0"
}
同路径下多出一个node_modules文件夹，这个文件夹不可以复制移动，否则会失效
如果包被误删之后，直接在cmd中跳转到package.json所在路径，
使用命令符cnpm i 即可在package.json中"devDependencies"下记录的包 全部自动下载
4.在package.json文件中 scripts下添加 "build": "babel src -d lib"
作用：可以在命令框中直接使用cnpm run build 来运行cnpm run babel src -d lib
babel src -d lib命令分析:src为源码所在的包，-d 为输出 lib为编译后文件存放的包
翻译：使用babel 将src文件夹下的文件编译到lib 文件夹下。
ps:此时注意，如果这个文件夹中原本有与要被编译的文档重名的文档，就会被覆盖掉。
5.在package.json同路径下创建.babelrc文件 内容为
{
"presets": ["env"]
}
之后在cmd输入命令符cnpm install babel-preset-env -D进行安装
6.安装成功之后package.json下 "devDependencies"中就多出一个 "babel-preset-env": "^1.6.1"
此时babel才可以真正完成ES6到ES5的编译工作。
网友评论