ES 6 系列 - Promise

时间:2021-07-26 21:14:03

一、含义

  是异步编程的一种解决方案,es 6 将其变成了标准。

  简单的说是一个容器,里面保存了某个未来才会结束的事件(通常是一个异步操作)的结果。语法上, Promise 是一个对象,从它可以获取异步操作的消息。

  Promise 对象有两个特点:

    1.状态,Promise 对象的状态不受外界影响。一个 Promise 对象代表一个异步操作,只会有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。这三种状态只会受到异步操作的结果影响,其他都不能影响状态。

    2.一旦状态改变,则就无法再变,任何时候都可以得到这个结果。状态改变后,会一直保持这个结果,称之为 resolved(已定型)。且在改变发生之后,再对 Promise 对象添加回调函数,也会立即得到这个结果(然而这句没理解)。

二、基本用法

const promise = new Promise((resolve, reject) => {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

  目前项目中常用的写法:

new Promise((resolve, reject) => {
login(username, userInfo.password).then(response => {
const data = response.data
setToken(data.token)
commit('SET_TOKEN', data.token)
resolve()
}).catch(error => {
reject(error)
})

  resolve 和 reject 函数由 js 引擎提供,不用自己部署;

  resolve 的作用是,将 Promise 对象的状态从 pending 变成 fulfilled ,在异步操作成功时候调用,并将操作的结果,作为参数传递出去;

  reject 的作用是,将 Promise 对象的状态从 pending 变成 rejected,在异步操作失败时候调用,并将操作报出的错误,作为参数传递出去;

  

  Promise 实例生成后,可以用 then 分别指定 fulfilled 状态和 rejected 状态的回调函数:

promise.then(function(value) {
// success
}, function(error) {
// failure
});

  一般而言,Promise 在新建后就会立即执行,然后执行脚本中接下来的同步任务,所有的同步任务执行完成后,才会执行 then 方法指定的回调函数。

三、用途

  1.加载图片

const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};

  2.ajax请求