Javascript中内置的延迟对象Promise资料.docx
- 文档编号:12826440
- 上传时间:2023-06-08
- 格式:DOCX
- 页数:16
- 大小:18KB
Javascript中内置的延迟对象Promise资料.docx
《Javascript中内置的延迟对象Promise资料.docx》由会员分享,可在线阅读,更多相关《Javascript中内置的延迟对象Promise资料.docx(16页珍藏版)》请在冰点文库上搜索。
Javascript中内置的延迟对象Promise资料
Javascript中内置的延迟对象Promise
阅读目录
Promise的基本使用:
Promise实例的三种状态:
then方法:
catch方法:
构造函数Promise的四个方法:
官方的例子:
其他:
浏览器支持情况:
Promise的基本使用:
利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题,更简洁地控制函数执行流程;
通过new实例化Promise,构造函数需要两个参数,第一个参数为函数执行成功以后执行的函数resolve,第二个函数为函数执行失败以后执行的函数reject:
运行下面代码
newPromise(function(resolve,reject){
});
通过Promise,我们把回调函数用线性的方式写出来,而不是一层套一层,这个函数有四层回调;
运行下面代码
复制代码
fn("args",function(a){
fn1("foo",function(b){
fn2("bar",function(c){
fn3("baz",function(d){
alert("回调成功,获知的内容为:
"+a+b+c+d)
})
})
})
})
复制代码
以上的Demo只有包含成功的回调,如果失败的回调也算的话,也就更麻烦了;
如果使用Promise的方式,我们可以改装成线性的代码,更加符合阅读的习惯,只要在then函数下写逻辑即可;
运行下面代码
复制代码
newPromise(function(resolve,reject){
resolve
(1);
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve
(2);
});
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve(3);
});
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve(4);
});
}).then(function(val){
console.log(val);
});
复制代码
这是一个ajax异步获取数据的例子,我们使用了回调函数;
运行下面代码
复制代码
varcallback=function(res){
console.log(res);
};
varajax=function(url,callback){
varr=newXMLHttpRequest();
r.open("GET",url,true);
r.onreadystatechange=function(){
if(r.readyState!
=4||r.status!
=200)return;
vardata=JSON.parse(r.responseText);
callback(data);
};
r.send();
};
//执行请求:
ajax("?
rows=10&f={firstName}",callback);
//再做别的事情;
复制代码
因为ES6内置了Promise,我们可以把以上的callback改写成promise的方式,首先ajax函数返回一个Promise对象;
运行下面代码
复制代码
varcallback=function(res){
console.log(res);
};
varajax=function(url){
returnnewPromise(function(resolve,reject){
varr=newXMLHttpRequest();
r.open("GET",url,true);
r.onreadystatechange=function(){
if(r.readyState!
=4||r.status!
=200)return;
vardata=JSON.parse(r.responseText);
resolve(data);
};
r.send();
})
};
//执行请求:
ajax("?
rows=10&f={firstName}").then(function(data){
callback(data);
});
//再做别的事情;
复制代码
回到顶部
Promise实例的三种状态:
每一个实例化的Promise都有三个状态;pending(等待)rejected(拒绝)resolved(解决),默认的状态为pending,如果执行了resolve(),那么这个promise的状态会变为resolve,如果执行了reject(),那么这个promise的状态就会变成rejected,而且这些状态是不可撤销的,一经更改,不会再变了;
回到顶部
then方法:
promise有一个then方法,then方法接收两个参数,第一个为函数的成功回调,第二个为函数的失败回调:
运行下面代码
复制代码
varpromise=newPromise(function(resolve,reject){
resolve();//执行成功回调;
});
console.log(0);
promise.then(function(val){
console.log
(1);
},function(){
console.log("失败");
});
console.log("2");
复制代码
运行下面代码
复制代码
varpromise=newPromise(function(resolve,reject){
reject();
});
console.log(0);
promise.then(function(val){
console.log
(1);
},function(){
console.log("失败");
});
console.log("2");
复制代码
then方法每一次都是返回不同的Promise实例,then的第一个参数是成功回调,这个成功回调的参数为:
上一个Promise实例执行resolve方法的参数;
一般来说,then方法会返回当前的promise,如果在then方法里面return一个新的Promise实例,那么此时的then返回的就是新的Promise实例,利用这个特性,就可以实现多层回调;
运行下面代码
复制代码
newPromise(function(resolve,reject){
resolve
(1);
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve
(2);
});
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve(3);
});
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve(4);
});
}).then(function(val){
console.log(val);
});
复制代码
不管代码是异步还是同步的,都可以用Promise的then方法,同步的代码直接写在then方法第一个参数,把需要参数通过resolve传给下一个then方法,
如果是异步的代码,就直接return一个Promise实例:
运行下面代码
复制代码
newPromise(function(resolve,reject){
resolve
(1);
}).then(function(val){
console.log(val);
return2;
}).then(function(val){
console.log(val);
return3;
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
//异步操作些这里
resolve(4);
});
}).then(function(val){
console.log(val);
return5;
}).then(function(val){
console.log(val);
});
复制代码
回到顶部
catch方法:
catch方法和失败回调时一样的,如果上一个异步函数抛出了错误了,错误会被捕获,并执行catch方法或者失败回调;
运行下面代码
复制代码
varpromise=newPromise(function(resolve,reject){
resolve();//执行成功回调;
});
console.log(0);
promise.then(function(val){
console.log("成功");
thrownewError("heheda");
}).catch(function(e){
console.log(e);
}).then(function(){
console.log("继续执行");
});
复制代码
Promise中的错误是会一层层传递的,如果错误没有没有被捕获,会一直传递给下一个promise对象,直到被捕获为止,然后继续往下执行:
运行下面代码
复制代码
newPromise(function(resolve,reject){
resolve
(1);
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
thrownewError("err");
});
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve(3);
});
}).then(function(val){
console.log(val);
returnnewPromise(function(resolve,reject){
resolve(4);
});
}).then(function(val){
console.log(val);
}).catch(function(err){
console.log(err);
}).then(function(){
console.log("继续执行")
})
复制代码
回到顶部
构造函数Promise的四个方法:
构造函数Promise有四个方法,Promise.all,Promise.race,Promise.reject,Promise.resolve:
Promise.all(iterable)
返回一个promise对象,当iterable参数里所有的promise都被解决后,该promise也会被解决
要注意all方法是Promise函数的方法,不是实例的方法,参数是一个数组,数组里面全是Promise的实例:
运行下面代码
复制代码
varp0=newPromise(function(resolve){
setTimeout(function(){
resolve(0)
},1000);
})
varp1=newPromise(function(resolve){
setTimeout(function(){
resolve
(1)
},2000);
})
varp2=newPromise(function(resolve){
setTimeout(function(){
resolve
(2)
},3000);
})
Promise.all([p0,p1,p2]).then(function(arr){
console.log(arr)
})
复制代码
Promise.race(iterable)
当iterable参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。
Promise.reject(reason)
调用Promise的rejected句柄,并返回这个Promise对象。
Promise.resolve(value)
用成功值value解决一个Promise对象。
如果该value为可继续的(thenable,即带有then方法),返回的Promise对象会“跟随”这个value,采用这个value的最终状态;否则的话返回值会用这个value满足(fullfil)返回的Promise对象。
回到顶部
官方的例子:
运行下面代码
复制代码
'usestrict';
varpromiseCount=0;
functiontestPromise(){
varthisPromiseCount=++promiseCount;
varlog=document.getElementById('log');
log.insertAdjacentHTML('beforeend',thisPromiseCount+')开始(同步代码开始)
');
//我们创建一个新的promise:
然后用'result'字符串解决这个promise(3秒后)
varp1=newPromise(function(resolve,reject){
//解决函数带着解决(resolve)或拒绝(reject)promise的能力被执行
log.insertAdjacentHTML('beforeend',thisPromiseCount+')Promise开始(异步代码开始)
');
//这只是个创建异步解决的示例
window.setTimeout(function(){
//我们满足(fullfil)了这个promise!
resolve(thisPromiseCount)
},Math.random()*2000+1000);
});
//定义当promise被满足时应做什么
p1.then(function(val){
//输出一段信息和一个值
log.insertAdjacentHTML('beforeend',val+')Promise被满足了(异步代码结束)
');
});
log.insertAdjacentHTML('beforeend',thisPromiseCount+')建立了Promise(同步代码结束)
');
}
testPromise();
复制代码
既然有了Promise,我们就可以把封装XMLHttpRequest封装成GET方法,方便使用:
运行下面代码
复制代码
functionget(url){
//Returnanewpromise.
returnnewPromise(function(resolve,reject){
//DotheusualXHRstuff
varreq=newXMLHttpRequest();
req.open('GET',url);
req.onload=function(){
//Thisiscalledevenon404etc
//socheckthestatus
if(req.status==200){
//Resolvethepromisewiththeresponsetext
resolve(req.response);
}
else{
//Otherwiserejectwiththestatustext
//whichwillhopefullybeameaningfulerror
reject(Error(req.statusText));
}
};
//Handlenetworkerrors
req.onerror=function(){
reject(Error("NetworkError"));
};
//Maketherequest
req.send();
});
}
复制代码
然后使用:
运行下面代码
get('story.json').then(function(response){
console.log("Success!
",response);
},function(error){
console.error("Failed!
",error);
});
假数据的地址可以自己设置,可以通过控制台请求,注意跨域的问题;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Javascript 内置 延迟 对象 Promise 资料