这周看了阮一峰的ECMAScript 6入门的第14章《Promise对象》,同时也参考了廖雪峰官网的对于promise的讲解。
Promise 是异步编程的一种解决方案,从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。它有三种状态,分别是pending(进行中)、fulfilled(已成功)、reject(已失败)。Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject,其中resolve的作用是当对象状态从进行中到已成功时调用,并将结果作为参数传递出去。reject的作用是当对象状态从未完成变为失败时调用,并将报错信息传递出去。
创建一个promise,用setTimeout模拟调取接口数据, 返回一个随机数,如果小于1,则等待一段时间后返回成功,否则返回失败。
简单实例
init () {
return new Promise((resolve, reject) => {
let timeOut = Math.random() * 2
console.log(timeOut)
setTimeout(() => {
if (timeOut < 1) {
console.log('call resolve()...')
resolve('成功')
} else {
console.log('call reject()...')
reject('失败')
}
}, 3000)
})
}
调用
test1 () {
this.init().then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
返回结果
结果说明
当随机数是1.73的时候说明获取失败,走的reject(),调用时catch捕获异常,获取到reject返回的结果。
当随机数是0.98的时候说明获取成功,走的resolve(),通过.then()获取到成功的结果。
实际项目中的应用1
封装接口请求:
export function httpGet (url, params = {}) {
url = changeUrl(url)
return new Promise((resolve, reject) => {
axios.get(url, {params: params})
.then(res => res.data && res.data.code === 200 ? resolve(res.data) : reject(res.data))
.catch(err => reject(err))
})
}
调用
getRes () {
util.httpGet (provinceUrl, {provinceId: 0})
.then(res => {
this.provinceArr = res.list || []
})
},
说明:httpGet需要两个参数,接口的地址和请求参数。用promise对axios请求进行了封装,调用时返回一个promise对象,可以对获取的数据进行操作或是返回捕获的异常的内容。
应用2
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
说明:上面代码中,使用Promise包装了一个图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。