Promise精简总结

来源：cnblogs　　作者：竹林取剑　　时间：2021/2/18 15:32:41　　对本文有异议

前言 : 个人总结，不是教程，如有错误，欢迎各位批评指正。

主要作用:

　　解决回调地狱

简单使用

// 创建Promise
let p = new Promise((resolve, reject) => {
    let i = Math.random();
    if (i < 0.5) resolve("a");
    else reject("b");
});
// resolve传递的参数进入第一个回调函数，reject传递的进入第二个回调函数
p.then((arg) => console.log("resolve === ",arg), (arg) => console.log("reject === ",arg));
 
// 与上面代码等价
p.then((arg) => console.log("resolve === ",arg)).catch((arg) => console.log("reject === ",arg))

Promise属性

　　PromiseState:

　　　　1.padding : 未决定

　　　　2.resolved / fullfilled : 成功

　　　　3.rejected 失败

　　　　resolve/reject调用前状态为pending, 调用后分别对应状态 2 , 3　　

　　　 promise中抛出错误会将promise状态改变为rejected

　　PromiseResult

　　　　保存着 resolve/reject调用时传递的结果

工作流程

方法

　　Promise.resolve(value)

　　作用:用于快速创建Promise,如果传入的参数为非promise，则返回一个fullfilled类型的,值为value的promise。若传入值为promise，则返还的promise状态与值与传入的promise相同

let p1 = Promise.resolve(123);
p1.then(console.log)
// 123
let p1 = Promise.resolve(new Promise((resolve,reject) => {
    resolve(456);
}));
p1.then(console.log);
// 456
let p1 = Promise.resolve(new Promise((resolve,reject) => {
    reject(789);
}));
p1.catch(console.log)
// 789

Promise.reject(value)

　　作用:用于快速创建Promise,如果传入的参数为非promise，则返回一个rejected类型的,值为value的promise。若传入值为promise，则返还类型为rejected，值为传入的promise的promise对象

let p1 = Promise.reject(new Promise((resolve,reject) => {
    resolve(123);
}));
p1.catch(console.log)
// Promise { 123 }

　Promise.all(promises)

　　作用:传入promises数组，若promises全为fullfilled类型，返回类型为fullfilled，值为promises结果组成的数组。若有一个失败，则返回类型为rejected，值为按数组传入顺序第一个失败的promise的值

let p1 = Promise.resolve("hello");
let p2 = Promise.resolve("a");
let p3 = Promise.resolve("b");
Promise.all([p1,p2,p3]).then(console.log);
// [ 'hello', 'a', 'b' ]
p1 = Promise.resolve("hello");
p2 = Promise.reject("a");
p3 = Promise.reject("b");
Promise.all([p1,p2,p3]).catch(console.log);
// a

Promise.race(promises)

　　作用:传入promises数组，返还第一个改变状态的promise的状态与值

let p1 = new Promise((resolve, reject) => {
    resolve("ok");
})
let p2 = Promise.resolve("a");
let p3 = Promise.resolve("b");
Promise.race([p1, p2, p3]).then(console.log);
// ok
p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("ok");
    }, 1000);
})
p2 = Promise.resolve("a");
p3 = Promise.resolve("b");
Promise.race([p1, p2, p3]).then(console.log);
// a

then 方法:

let p = Promise.resolve("ok");
let p1 = p.then(value => {
    console.log(value);
})
console.log(p1);
/**
    Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: undefined
*/
let p = Promise.resolve("ok");
let p1 = p.then(value => {
    throw("wrong")
})
console.log(p1)
/**
    Promise {<rejected>: "wrong"}
    __proto__: Promise
    [[PromiseState]]: "rejected"
    [[PromiseResult]]: "wrong"
*/
let p = Promise.resolve("ok");
let p1 = p.then(value => {
   return "ok"
})
console.log(p1)
/**
    Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: "ok"
*/
 
// 返回promise 则p1即为返回的promise 代码略

注意：

　　1.利用then方法返回新的promise可以进行then的链式调用，链式调用中存在异常穿透，即只需在最后直接catch，即可捕获所有then中可能出现的异常

　　2.中断promise.then的链式调用，在其中一个then中返还一个pending状态的promise即可， new Promise(() => {});

async & await:

　　async: 修饰一个函数，根据返回值构建出一个Promise，规则同then

　　 await:只能在async修饰的函数中调用

　　　　1.右侧值为fullfilled的promise对象，获得其值

　　　　2.右侧值为rejected的promise对象，抛出错误

　　　　3.右侧为值，直接返回该值

注意:

　　1.promise中的方法在被创建时会被同步执行

new Promise((resolve, reject) => {
    console.log(1);
});
console.log(2);
// 输出: 1 2

2.如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

new Promise((resolve,reject) => {
    throw "出错了"
}).catch(console.log)
// 出错了

原文链接：http://www.cnblogs.com/Mkkk/p/14395521.html

友情链接：直通硅谷　点职佳　北美留学生论坛

JavaScript热门文章

echarts 饼图 + 全屏显示

js正则匹配以{开头,以}结尾的表达式怎么写？-附源码

echarts 实现数据(tooltip)自动轮播插件

Js设置博客园主题色(theme-color)

elementUI 设置input的只读或禁用的方法

超级好用的流程图js框架值得收藏

layui table+复杂表头+合并单元格

获取地理位置

如何使用JavaScript导入和导出Excel文件

WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

JavaScript推荐文章

一些八股：1.fetch 的理解。2.let、const、var

电子表格转身购物车：三步轻松实现

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder

可视化—gojs 超多超实用经验分享(三)

PixiJS源码分析系列：第一章从最简单的例子入手

WebRTC入门

前端 Array.sort() 源码学习

【技巧】JS代码这么写，前端小姐姐都会爱上你

【JS】await异常捕获，这样做才完美