Promise简介

es6原生提供的Promise
Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息
简单来讲promise就是用于处理异步任务的
Promise也可以将异步任务队列化

promise的异步操作状态

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

Promise 对象的状态改变，只有两种可能：

从 Pending 变为 Resolved （异步任务成功）

从 Pending 变为 Rejected （异步任务失败）

而且状态发生后，是不会有改变的。

promise缺点

一旦开始执行就无法取消（一旦新建它就会立即执行，无法中途取消）

无法进度追踪（处于 Pending 状态时，无法得知目前进展到哪一个阶段）

promise使用

可以使用 new 来调用 Promise 的构造器来进行实例化。

let promise = new Promise(function(resolve, reject) {//promise的入参是一个回调函数，回调函数异步处理成功的回调和异步处理失败的  回调函数分别对应成功的resolve和失败的reject// 异步处理setTimeout(function(){resolve('do something')// 处理结束后、调用resolve 或 reject},1000)});//也可以采用链式调用的形式去触发他的回调函数promise.then(res=>{console.log(res);})

上述的截图仅仅是异步成功回调的案例，当然如果异步任务错误我们也可以去捕获到

写一个随机数1-10的数，大于5成功回调，反之失败回调

let promise = new Promise(function(resolve, reject) {// 异步处理setTimeout(function() {const num = Math.floor(Math.random() * 10);if (num > 5) {resolve('这个值＞5');return;}reject('这个值<5');}, 1000);
});
//也可以采用链式调用的形式去触发他的回调函数
promise.then(res => {console.log('reslove回调返回值',res);
});
promise.catch(res => {console.log('reject回调返回值',res);
});

Promise使用场景

图片依次加载

const imgUrl = ['img1', 'img2', 'img3'];const downloadImgs = async () => {let promise = url => {return new Promise((resolve, eject) => {setTimeout(() => {console.log(url);resolve('ok');}, 1000);});};for (let item of imgUrl) {await promise(item).then(res => console.log(res));}
};

promise all 所有异步任务执行完毕后，将结果以数组形式返回

promise race 哪个先异步任务先操作完，就返回哪个异步任务的结果

let checkNum = 1;
const asyncDownload = () => {return new Promise((reslove, reject) => {setTimeout(() => {checkNum++;reslove(checkNum);    }, 1000);});
};const asyncQueue = () => {//race的调用方法和all一样Promise.all([asyncDownload(), asyncDownload(), asyncDownload()]).then(res => {console.log('res', res);},);
};

promise简介以及使用方法相关推荐

Database之SQL：SQL之over partition by开窗函数的简介、使用方法(求各班级内各自排名/求各班级内第一名/求各班级内分数递增和等案例解析)之详细攻略
Database之SQL:SQL之over partition by开窗函数的简介.使用方法(求各班级内各自排名/求各班级内第一名/求各班级内分数递增和等案例解析)之详细攻略目录 over part ...
Python编程语言学习：包导入和模块搜索路径简介、使用方法之详细攻略
Python编程语言学习:包导入和模块搜索路径简介.使用方法之详细攻略目录包导入和模块搜索路径简介 1.Pyhon搜索模块路径的机制 2.自定义配置搜索路径
ML之ME/LF：机器学习之风控业务中常用模型评估指标PSI(人群偏移度指标)的的简介、使用方法、案例应用之详细攻略
ML之ME/LF:机器学习之风控业务中常用模型评估指标PSI(人群偏移度指标)的的简介.使用方法.案例应用之详细攻略目录 PSI(稳定度指标)的简介 1.如何计算PSI? (1).PSI计算过程
Python编程学习：让函数更加灵活的*args和**kwargs(设计不同数量参数的函数)的简介、使用方法、经典案例之详细攻略
Python编程学习:让函数更加灵活的*args和**kwargs(设计不同数量参数的函数)的简介.使用方法.经典案例之详细攻略目录 *args和**kwargs(设计不同数量的参数函数)的简介 1 ...
Python之 sklearn：sklearn.preprocessing中的StandardScaler函数的简介及使用方法之详细攻略
Python之 sklearn:sklearn.preprocessing中的StandardScaler函数的简介及使用方法之详细攻略目录 sklearn.preprocessing中的Stand ...
Py之seaborn：数据可视化seaborn库(二)的组合图可视化之密度图/核密度图分布可视化、箱型图/散点图、小提琴图/散点图组合可视化的简介、使用方法之最强攻略(建议收藏)
Py之seaborn:数据可视化seaborn库(二)的组合图可视化之密度图/核密度图分布可视化.箱型图/散点图.小提琴图/散点图组合可视化的简介.使用方法之最强攻略(建议收藏) 目录二.组合图可视 ...
Py之matplotlib.pyplot：matplotlib.pyplot的plt.legend函数的简介、使用方法之详细攻略
Py之matplotlib.pyplot:matplotlib.pyplot的plt.legend函数的简介.使用方法之详细攻略目录 matplotlib.pyplot的plt.legend函数的简 ...
Python编程语言学习：sklearn.manifold的TSNE函数的简介、使用方法、代码实现之详细攻略
Python编程语言学习:sklearn.manifold的TSNE函数的简介.使用方法.代码实现之详细攻略目录 Manifold简介 TSNE简介-数据降维且可视化 TSNE使用方法 TSNE代码 ...
Python语言学习之lambda：lambda函数的简介、使用方法、案例大全之详细攻略
Python语言学习之lambda:lambda函数的简介.使用方法.案例大全之详细攻略目录 lambda函数的简介 1.lambda匿名函数的格式 2.lambda函数特点 3.lambda函数与 ...

promise简介以及使用方法