javascript中的箭头函数和Promise对象
Promise新建后就会⽴即执⾏
⼀、箭头函数
箭头函数 是在es6 中添加的⼀种规范。
x => x * x 相当于 function(x){return x*x}
x => x * x
//相当于
function(x)
{
return x*x
}
箭头函数相当于 匿名函数, 简化了函数的定义。 语⾔的发展都是倾向于简洁 对⼈类友好的, 减轻⼯作量的。
// 两个参数返回后⾯的值
(x, y) =>x*y + y*y
//没有参数
() => 999
// 可变参数
(x, y, ...rest) =>{
var i,sum = x+y;
for (i=0;i<rest.length;i++){
sum += rest[i];
}
return sum;
}
如果要返回⼀个单对象, 就要注意, 如果是单表达式,第⼀种会报错, 要使⽤第⼆种⽅式。
// 这样写会出错
x => {foo:x} // 这和函数体{}有冲突
// 写成这种
x => {{foo:x}}
使⽤案例:
var sum = (x,y)=>{
console.log("箭头函数内部");
return x+y;
}
console.log("sum res:"+sum(5,6));
⼆、Promise对象(承诺)
js语⾔的执⾏环境是“单线程”。所谓单线程,就是指⼀次只能完成⼀件任务。如果有多个任务,就必须排队,前⾯⼀个任务完成,再执⾏后⾯⼀个任务。
在实际的业务中,异步模式是⾮常重要的⾓⾊。我们可以有多种异步编程的⽅法,⽐如通过回调函数,但回调函数缺乏顺序性和可信任性。这个时候promise就很重要了。
1、Promise对象的两个特点
(1) 对象的状态不受外界影响。Promise 对象代表⼀个异步操作,有三种状态:
pending: 初始状态,进⾏中。
fulfilled: 已成功。
rejected: 已失败。
只有异步操作的结果,可以决定当前是哪⼀种状态,任何其他操作都⽆法改变这个状态。
(2)⼀旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为Resolved 和从 Pending 变为 Rejected。只要这两种情况发⽣,状态就凝固了,不会再变了,会⼀直保持这个结果。
每⼀个异步任务返回⼀个promise对象,该对象有⼀个then⽅法,允许指定回调函数。⽐如,f1的回调函数f2,可以写成: f1().then(f2);
1. 每个异步任务都将返回⼀个then对象。
2. 每个then对象都有⼀个then函数可以带两个参数,⼀个success处理程序和error处理程序。
3. then函数中的成功或错误处理程序将仅在之后调⽤⼀次异步任务完成。
2、Promise的优缺点
优点:
可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
Promise 对象提供统⼀的接⼝,使得控制异步操作更加容易。
缺点:
⽆法取消 Promise,⼀旦新建它就会⽴即执⾏,⽆法中途取消。
如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。
当处于 Pending 状态时,⽆法得知⽬前进展到哪⼀个阶段(刚刚开始还是即将完成)。
2、基本⽤法
(1)Promise构造函数接受⼀个函数作为参数。该函数的两个参数分别是resolve和reject,它们是两个函数,由JavaScript引擎提供,不⽤⾃⼰部署。
resolve函数的作⽤:将Promise对象的状态从“Pending未完成” 变为 "Resolved成功",在异步操作成功时调⽤,并将异步操作的结果作为参数传递出去;
reject函数的作⽤:将Promise对象的状态从“Pending未完成” 变为 "Rejectd失败",在异步操作失败时调⽤,并将异步操作报出的错误作为参数传递出去;
实例1:
var promise = new Promise(function(resolve,reject){
//释放资源,关闭窗⼝等操作
if(/*异步操作成功*/)
{
resolve('success');
}else{
reject('failed');
}
});
(2)Promise实例⽣成以后,可以⽤then⽅法分别指定Resolved状态和Rejected状态的回调函数。th
en⽅法接受两个回调函数作为参数。第⼀个回调函数是Promise对象的状态变为Resolved时调⽤,第⼆个回调函数是Promise对象的状态变为Rejected时调⽤。其中第⼆个函数是可选的,可以不提供。这两个函数都接受Promise对象传出的值作为参数。
实例2:
function main() {
let promise =new Promise((resolve,reject)=>{
for(var i=0;i<3;i++)
{
console.log("i:"+i);
}
if(i==3)
{
resolve(i);
}else{
reject(i);
}
});
promise.then((value)=>{
console.log("success:"+value);
},()=>{
console.log("failed:"+value);
pending});
console.log("test end");
}
实例2测试结果:
Promise新建后就会⽴即执⾏。所以⾸先输出的是1~3。then⽅法指定的回调函数将在当前脚本所有同步任务执⾏完成后才会执⾏,所
以“success:3”最后输出。
实例3:
//catch(failureCallback) 是 then(null, failureCallback) 的缩略形式。
//then() 函数会返回⼀个和原来不同的新的Promise2
var promise2 = promise.then(function(res){
console.log(res);
}).catch(err=>{
console.log(err);
})
3、链式调⽤
连续执⾏两个或者多个异步操作是⼀个常见的需求,在上⼀个操作执⾏成功之后,开始下⼀个的操作,并带着上⼀步操作所返回的结果。我们可以通过创造⼀个 Promise 链来实现这种需求。
new Promise((resolve, reject) => {
console.log('初始化');
resolve();
})
.then(() => {
throw new Error('有哪⾥不对了');
console.log('执⾏「这个」”');
})
.catch(() => {
console.log('执⾏「那个」');
})
.then(() => {
console.log('执⾏「这个」,⽆论前⾯发⽣了什么'); });
三、async和await关键字
案例⼀:
async function f1()
{
return "abc";
//相当于 return new Promise((resolve)=>{ resolve("abc")}); }
案例⼆:
function f1()
{
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve('success')},2000)
});
}
async function f5()
{
var c = await f1();
console.log(c);
console.log('aaa');//等待f1执⾏完之后再执⾏
}
f5();
案例三:
async function f1()
{
ject('sss');
}
async function f5()
{
try{
var c = await f1();
}catch(e){
console.log(e);
}
console.log(c);//上⾯reject后,这⾏及以后的语句不会执⾏ console.log('aaa');
}
f5();

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。