本文主要和大家分享promise的基本使用方法教程，个人理解就是使用同步编程的写法完成异步编程操作。希望能帮助到大家。
const promise = new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000);});
登录后复制
Promise 接收一个函数作为参数，函数有两个参数，resolve 和 reject 分别表示异步操作执行后成功的回调函数和失败的回调函数。
Promise 实例后马上执行。所以通常采用一个函数包含它
function runAsync() { return new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); });}runAsync().then((data) => { console.log(data);//可以使用异步操作中的数据})
登录后复制
runAsync() 执行完调用 then 方法，then() 就相当于我们之前写的回调函数。
resolve 和 reject
function paramTest(){ return new Promise((resolve, reject) => { let number = Math.ceil(Math.random() * 10); if (number { console.log('resolved'); console.log(number);},(reason) => { console.log('rejected'); console.log(reason);})
登录后复制
Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）
paramTest() 例子有两种情况：
当 number
当 number >= 5 时，我们认为是失败情况，将状态从 pending 变为 rejected
fulfilled rejected所以paramTest() 的执行结果：
resolvedrejectednumberout of range
catch的用法
我们继续调用 paramTest 方法举例
paramTest().then((number) => { console.log('resolved'); console.log(number); console.log(data); //data为未定义},(reason) => { console.log('rejected'); console.log(reason);}).catch((err) => { console.log(err);})
登录后复制
catch 方法其实就是 .then(null, rejection) 的别名，也是用来处理失败失败的回调函数，但是还有一个作用：当 resolve 回调中如果出现错误了，不会堵塞，会执行 catch 中的回调。
all的用法
const p = Promise.all([p1, p2, p3]);p.then(result => { console.log(result);})
登录后复制
all 方法接收一个数组参数，数组中每一项返回的都是 Promise 对象，只有当 p1, p2, p3 都执行完才会进入 then 回调。p1, p2, p3 返回的数据会以一个数组的形式传到 then 回调中。
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000);}).then(result => result).catch(e => e);const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000);}).then(result => result).catch(e => e);Promise.all([p1, p2]).then(result => console.log(result)).catch(e => console.log(e));//3秒后输出['p1', 'p2']
登录后复制
race的用法
const p = Promise.race([p1, p2, p3]);p.then(result => { console.log(result);})
登录后复制
race 的用法与 all 如出一辙，不同的是 all 方法需要参数的每一项都返回成功了才会执行 then;而 race 则是只要参数中的某一项返回成功就执行 then 回调。
以下是 race 的例子，和 all 方法对比，可以看到返回值有很明显的区别。
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000);}).then(result => result).catch(e => e);const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000);}).then(result => result).catch(e => e);Promise.race([p1, p2]).then(result => console.log(result)).catch(e => console.log(e));//1秒后输出 'p1'
登录后复制
点击这里查看本文中实例源代码
resloader是基于Promise实现的一个图片预加载并展示加载进度的插件，猛戳这里了解详情。如果感觉还可以的话，欢迎star
相关推荐：
使用Promise简化回调
微信小程序Promise简化回调实例分享
jQuery的Promise如何正确使用
以上就是Promise的基本使用方法教程的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2785560.html
