1.Promise兼容性
2.IE8中的Promise polyfill
在ECMAScript 3中保留字是不能作为对象的属性名使用的。 而IE8及以下版本都是基于ECMAScript 3实现的,因此不能将 catch 作为属性来使用,也就不能编写类似 promise.catch() 的代码。而现在的浏览器都是基于ECMAScript 5的,而在ECMAScript 5中保留字都属于 IdentifierName ,也可以作为属性名使用了。
点标记法(dot notation) 要求对象的属性必须是有效的标识符(在ECMAScript 3中则不能使用保留字),
但是使用 中括号标记法(bracket notation)的话,则可以将非合法标识符作为对象的属性名使用。
也就是说,上面的代码如果像下面这样重写的话,就能在IE8及以下版本的浏览器中运行了(当然还需要polyfill)。
var promise = Promise.reject(new Error("message"));
promise["catch"](function (error) {
console.error(error);
});
3.xhr-promise.js
function getURL(URL) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', URL, true);
req.onload = function () {
if (req.status === 200) {
resolve(req.responseText);
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function () {
reject(new Error(req.statusText));
};
req.send();
});
}
// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
console.log(value);
}).catch(console.error.bind(console));
var abort = function () {
// 如果request还没有结束的话就执行abort取消XHR请求
if (req.readyState !== XMLHttpRequest.UNSENT) {
req.abort();
}
};
4.Promise.resolve()相当于下面js的语法糖
new Promise(function(resolve){
resolve(42);
});
5.Promise#catch
promise.catch(onRejected)相当于promise.then(undefined, onRejected) 的语法糖。
6.Promise.resolve()可以将Thenable对象转换为新的Promise对象。
Thenable对象是一个包含then属性的对象
function test(){
return {
then : function(resolve,reject){
if(false){
reject(false)
}else{
resove(true)
}
}
}
}
Promise.resolve(test())返回一个新的Promise对象,这样就可以使用链式then调用了
7.Promise只能进行异步操作
var promise = new Promise(function (resolve){
console.log("inner promise"); // 1
resolve(42);
});
promise.then(function(value){
console.log(value); // 3
});
console.log("outer promise"); // 2
8.使用Promise进行顺序处理
function sequenceTasks(tasks){
var result=[];
tasks.reduce(function(promise,task){
return promise.then(task).then(function(value){
result.push(value);
return result;
})
},Promise.resolve())
}
function getURL(URL){
return new Promise((resolve,reject)=>{
var req=new XMLHttpRequest();
req.open('GET',URL,true);
req.onload=function(){
if(req.status===200){
resolve(req.responseText);
}else{
reject(new Error(req.statusText))
}
}
req.onerror=function(){
reject(new Error(req.statusText))
}
req.send();
})
}
var request={
comment(){
return getURL('http://liubin.org/promises-book/Ch4_AdvancedPromises/img/notification-dialog.png');
},
people(){
return getURL('https://fonts.googleapis.com/css?family=Open+Sans:300,700');
}
}
function main(){
return sequenceTasks([request.comment,request.people]);
}
main().then(function(value){
console.log(value);
}).catch(function(error){
console.log(error);
})