1.Generator
是ES6提供的一种异步编程解决方案,语法不同于普通函数;简单的把Generator 理解为一个状态机,封装了多个内部状态。执行Generator 函数会返回一个迭代器对象,可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。
Generator函数有两个特征:
1.function关键字与函数名之间有个星号;
2.函数内部使用yield表达式
function* helloWorldGenerator(){
yield '1';
yield '2';
return '3';
}
如上代码有三个状态, '1'、'2'、'3',一个yield就是一个状态,一个yield就是一个代码运行节点,执行一次迭代器next方法,到第一个yield,再执行一次,到下一个yield。yeild后面是每一种状态的描述。通过迭代器对象的next方法控制的代码的向下执行。
function* test(){
//想要Generato函数有返回值
3行代码
return 1
3行代码
return 2
3行代码
return 3
3行代码
return 4
}
### //因为return会阻止后面的代码运行,所以 Generator提供了yield,yiled也是返回值,但是执行一次状态停在了第一个yield ,依次执行next方法,执行下一个yield状态。代码分段执行,一个yield分一段。上一个yield结束是下个状态的开始,下一个状态的结束再执行下一个yield。yield后面的是返回值。最后一个yield可以return返回。
。function* test(){
//想要Generato函数有返回值
//Generator状态机管理
3行代码
yield 1
3行代码
yield 2
3行代码
yield 3
3行代码
yield 4
}
### 1.如何创建Generator函数 每个状态之间都是独立的
function* test(){
// 每一个yield之间状态是独立的
log();
yield 1;
log();
yield 2;
log();
yield 3;
log();
yield 4;
log();
}
let result=test();
console.log(result);//返回的是一个Generator对象,也是一个迭代器对象
console.log(result.next());//接收第一个状态的返回结果 Object { value: 1, done: false } value是yield返回值
console.log(result.next());//Object { value: 2, done: false }
function log(){
for(i=1;i<=10;i++){
console.log(i)
}
}
### 2.模拟发起异步请求 拿到第一个状态的返回结果再执行第二个状态,状态之间数据传递通过next
function* test(){
// 每一个yield之间状态是独立的
log();
let res=yield 1; //拿res接收yield 1的返回结果 res-->1
log();
// 处理res 上一个状态拿到res当前状态想用res通过调用next()是拿不到的,因为它是异步的,只有在下一次状态调用的时候传递参数进去才行
console.log(res)
yield 2;
log();
yield 3;
log();
yield 4;
log();
}
let result=test();
console.log(result);//返回的是一个Generator对象,也是一个迭代器对象
console.log(result.next());//接收第一个状态的返回结果 Object { value: 1, done: false } value是yield返回值
console.log(result.next());//Object { value: 2, done: false };//undefined
// 如果想要在第二个状态调用第一个状态的数据 需要传递数据 传什么 第二个状态的res就是什么 他会作为上一个状态的结果传递给下一个状态
//
function log(){
for(i=1;i<=10;i++){
console.log(i)
}
}
function* test(){
let res=yield getData();
// 上一个状态声明变量 下一个状态使用
console.log(res);
yield '结束了'
}
let result=test();
result.next();
function getData(){
$.get('http://47.93.206.13:8888/index/article/findCategoryArticles',{},(response)=> {
//response参数是上一个状态的返回值
// 如果想要实现数据传递 发起第二段程序的执行 拿上一个状态的response作为下一个状态的入口
result.next(response);
// 在上一个状态结果出来之后作为下一个状态的入口
});
}
总结Generator函数
// 异步编程解决方案 异步代码 同步编写
function* test(){
let res=yield 1;
console.log(res);//100 是下方next的参数
yield 2;
}
let result=test();//拿到的是迭代器对象
result.next();
result.next(100);//拿到的不是yield后面的状态描述
Async
异步函数同步编程
async function test(){
let res=await $.get();
console.log(res)
}
2.async函数
是一个函数,是一个异步编程解决方案,内部封装了generator函数,是一个语法糖,内部自带执行器,与await配合使用;异步编程,同步处理;
async function test(){
let res1=await $.get('http://47.93.206.13:8888/index/carousel/findAll');
console.log(res1);
let res2=await $.get('http://47.93.206.13:8888/index/article/findCategoryArticles');
console.log(res2)
}
test()
3.Promise
是一种异步编程解决方案,Promise是一个容器,保存着将来才会执行的代码;从语法角度来说Promise是一个对象,可以用来获取异步操作的消息。异步操作,同步解决,避免了层层嵌套的回调函数
1.实例化
Promise构造函数接收一个函数作为参数,也就是回调函数;该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数,reject作为失败的回调函数。Promise对象代表一个异步操作有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。
2.实例方法
定义在Promise.prototype中的方法,通过Promise实例可以直接调用
then() 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
参数:回调函数,回调函数的参数为resolve函数传递过来的值
返回值:返回一个新的Promise实例对象,因此可以使用链式调用
catch() 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
参数:回调函数,回调函数的参数为reject函数传递过来的值
返回值:返回一个新的Promise实例对象,因此可以使用链式调用
finally()无论异步操作执行成功失败与否,都会执行该回调
参数:回调函数
返回值:返回一个新的Promise实例对象
// 1.创建promise对象
let p1=new Promise((resolve,reject)=>{
// resolve,reject是回调函数
// resolve函数是promise对象最终状态为成功状态
//reject函数是promise对象最终状态为失败状态
//非异步
//假设异步操作执行成功,修改promise对象状态为成功状态
if(3>2){
resolve('success')
}else{
//假设异步操作执行失败,修改promise对象状态为失败状态
reject('error')
}
})
//如何提供resolve和reject函数
//在promise原型里有then和catch
// 1.then方法表示的是成功之后的回调,对应resolve
// 2.catch方法表示的是失败之后的回调,对应reject
p1.then((res)=>{
console.log(res,'成功回调')
}).catch((error)=>{
console.log(error,'失败回调')
}).finally(()=>{
console.log('最终执行')
})
//如果then里面传了两个回调函数,第一个代表成功之后的回调,第二个代表失败之后的回调,分别代表resolve()和reject()
p1.then((res)=>{
console.log(res,'成功')
},(err)=>{
console.log(res,'失败')
});
let p1=new Promise((resolve,reject)=>{
//发起异步请求
$.ajax({
url:'http://47.93.206.13:8888/index/article/findCategoryArticles',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
});
p1.then((res)=>{
console.log(res);
// res做处理
}).catch((err)=>{
console.log(err)
})
静态方法
定义在Promise中的方法,通过Promise可以直接调用
Promise.all([p1,p2])
参数:数组,数组中的元素为Promise实例
返回值:Promise实例,当p1,p2状态都为fulfilled时候,该实例的状态才为fulfilled,此时p1,p2的返回值组成一个数组,传递给该实例的回调函数;只要p1,p2的返回值有一个变为rejected,该实例状态为rejected;
Promise.race([p1,p2]) 赛跑返回先请求成功的实例
参数:数组,数组中的元素为Promise实例
返回值:Promise实例,当p1,p2之中有一个实例率先改变状态,该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给该实例的回调函数。
Promise.any([p1,p2])
参数:数组,数组中的元素为Promise实例
返回值:Promise实例,只要p1,p2状态有一个变为fulfilled,该实例的状态为fulfilled;p1,p2状态都变为rejected,该实例状态才为rejected
考虑到可能有多个请求需要发送,需要创建多个承诺对象,所以采用工厂函数进行封装
function getPromise(url,method='get',data=null){
return new Promise((resolve,reject)=>{
$.ajax({
url:url,
method:method,
data:data,
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
}
let p1=getPromise('http://47.93.206.13:8888/index/article/findCategoryArticles');
let p2=getPromise('http://47.93.206.13:8888/index/carousel/findAll');
// p1.then((res)=>{
// console.log(res,'1111111')
// })
// p2.then((res)=>{
// console.log(res,'222222')
// })
// all 只有两个异步操作请求都成功才会返回成功的结果,否则返回失败对象
// race 谁的响应先拿到用谁的结果 无论成功与否
//any 有成功用成功的,都失败就失败
let p=Promise.any([p1,p2]);
p.then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(err)
})