es6学习一 promise上

时间:2022-11-27 18:43:05

简单来说promise在异步操作上提供可读性。(原来es5的异步操作可读性实在太糟糕了,如下图)

es6学习一 promise上

瞬间眼前百万只奔腾的马,只不过这种马有个别名,羊驼。

一、创建形式

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中的resolvereject

  • Promise.propotype.catch() 的方法是出现错误,执行的函数。

catchreject 的区别?

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}`);
});