简单来说promise
在异步操作上提供可读性。(原来es5的异步操作可读性实在太糟糕了,如下图)
瞬间眼前百万只奔腾的马,只不过这种马有个别名,羊驼。
一、创建形式
1. 使用的基本形式:
let promise = new Promise((resolve, reject) => {
// 设置异步执行的函数条件
let flag = true;
if (true) {
resove();
} else {
reject();
}
});
promise.then(() => {
//TODO
}, () => {
//TODO
}).catch(err => {
console.error(err);
});
Promise.propotype.then()
方法中的两个参数(函数)分别对应是Promise
中的resolve
和reject
。Promise.propotype.catch()
的方法是出现错误,执行的函数。
catch
和 reject
的区别?
catch
可以是系统的错误,也就是说catch
所报的错误不是认为控制的;而 reject
的错误是人为对参数设计条件的不满足的错误。
2. 传参的异步使用方式
function asyne(arg) {
let promise = new Promise((resolve, reject) => {
// 设置异步执行的函数条件
let flag = true;
if (flag) {
resolve(arg);
} else {
reject(new Error('This is a error!'));
}
});
return promise;
}
asyne(1).then(value => {
// TODO
console.log(1);
}, function(error) {
// TODO
}).catch(err => {
console.log(`Error: ${err})`);
});
3. 链式调用
let promise = new Promise((resolve, reject) => {
resove();
});
promise.then(() => {
return new Promise((resolve, reject) => {
resove();
});
}).then(() => {
// TODO
});
二、 应用
1. 图片加载
function loadImageAsync(url) {
return new Promise((resolve, reject) => {
var image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
let img_url = 'http://img2.niutuku.com/desk/1208/1404/ntk-1404-393.jpg';
loadImageAsync(img_url).then(img => {
document.body.appendChild(img);
});
2. Ajax上的应用
var getJSON = function(url) {
var promise = new Promise((resolve, reject) => {
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
});
return promise;
};
getJSON("/package.json").then(json => {
console.log(`Content: ${json}`);
},err => {
console.error(`Error: ${err}`);
});