Promis及其应用

KKHW

已于 2023-04-08 17:34:15 修改

阅读量78

点赞数

文章标签： javascript 前端开发语言

于 2023-04-08 16:53:53 首次发布

本文链接：https://blog.csdn.net/K2356/article/details/130030923

版权

Promise及其应用

异步编程与Promise的关系

Promise是异步编程的一种解决方案
异步任务有两个结果时（成功或者失败）使用
规范回调的名字和顺序
方便捕获错误
避免出现回调地狱

Promise的作用与用法

作用

promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
容易理解，便于维护

用法

Promise有三种状态：

pending:进行中

fulfilled:已成功

rejected:已失败

一旦状态改变（pending->fulfilled或者pending->rejected)，就会触发then()中的响应函数。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

resolve函数改变状态pending->fulfilled

reject函数改变状态pending->rejected

Promise应用

.then()

接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
.then()返回一个新的Promise实例，所以它可以链式调用
当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
如果返回其他任何值，则会立即执行下一级.then()

let p=new Promise((resolve,reject)=>{
    console.log("Promise");
    resolve();    //将pending状态转化为fulfilled,就可以调用.then()方法中的第一个函数
}).then(()=>{console.log('Resolved.')},
()=>{console.log('Reject.')});
console.log('Hi!');
//输出：Promise Hi! Resolved.

let p1=new Promise((resolve,reject)=>{
    console.log("Promise");
    reject();    //将pending状态转化为rejected,就可以调用.then()方法中的第二个函数
}).then(()=>{console.log('Resolved.')},
()=>{console.log('Reject.')});
console.log('Hi!');
//输出：Promise Hi! Reject.

.catch()

用于指定发生错误时的回调函数。

catch()方法返回一个Promise，而它的行为与catch中的回调函数的返回值有关：

如果catch中的回调函数返回一个值或者没有返回值，那么catch返回的Promise将会成为Resolved状态，并且将返回的值作为Resolved状态的回调函数的参数值。上述代码中的c的状态就是Resolved状态。

如果catch中的回调函数抛出一个错误，那么catch返回的Promise将会成为Rejected状态，并且将抛出的错误作为Rejected状态的回调函数的参数值。

let p2=new Promise((resolve,reject)=>{
    console.log("Promise");
    reject();    //将pending状态转化为rejected,因为.then()方法中只有一个参数，故执行后面的catch()
}).then(()=>{
console.log('Resolved.');
}).catch(()=>{
    console.log("Error!")
})
console.log('Hi!');
//输出：Promise Hi! Error!

async/await的作用与用法

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），还可以继续给 await 的返回值使用 .then() 函数和.catch()；如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

 function s() {
            return new Promise((resolve, reject) => {
                console.log("Promise");
                resolve();
            })
        }
        async function test() {
            let a = await s().then(() => { console.log("ok") });
            console.log("a");
        }
        test();
        //输出：Promise ok a
        
 function s() {
            return new Promise((resolve, reject) => {
                console.log("Promise");
                reject();
            })
        }
        async function test() {
            let a = await s().catch(() => { console.log("error") });
            console.log("a");
        }
        test();
        //输出：Promise error a