使用场景 : 当有多个异步请求时,需要等前两个请求均返回成功之后才能去请求第三个 —— Promise()

最新推荐文章于 2024-05-01 05:51:07 发布

太难了(;´༎ຶД༎ຶ`)

最新推荐文章于 2024-05-01 05:51:07 发布

阅读量372

点赞数 1

文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_69021450/article/details/128970928

版权

文章讲述了Promise对象的.then(),.catch(),和.finally()方法在处理异步操作中的作用，特别是finally在确保如开启的loading等清理工作总会执行的情况。同时，介绍了async/await作为Promise的语法糖，如何简化异步代码，使其更接近同步代码的写法，并能方便地通过try/catch处理错误。文中通过示例展示了如何在请求链中使用这些机制。

摘要由CSDN通过智能技术生成

Promise()

.then() 得到promise内部执行任务的成功结果

.catch() 得到promise内部执行任务的失败的结果

.finally() 成功与否都会执行,在项目中我们基于axios发送请求时,一般会开启loading,这时可以通过finally,不管请求成功与否,关闭loading,而不需要在成功和失败时写两次关闭loading代码


function fun1(){
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            let age = Math.random() * 50
            if (age > 18) {
                resolve(18)
            } else {
                reject('未成年')
            }
        }, 2000)
    })
}

function fun2(){
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            let age = Math.random() * 18
            if (age > 12) {
                resolve(12)
            } else {
                reject('小学生')
            }
        }, 2000)
    })
}

function fun3(){
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            let age = Math.random() * 12
            if (age > 6) {
                resolve(6)
            } else {
                reject('幼儿园')
            }
        }, 2000)
    })
}

//成功 执行顺序：fun1(成功) -> fun2(成功) -> fun3(成功)
fun1().then(function(res1){
    console.log(res1)
    return fun2()
}).then(function(res2){
    console.log(res2)
    return fun3()
}).then(function(res3){
    console.log(res3)
})

//失败
.catch(function(err1){
    console.log(err1)
    return fun2()
}).catch(function (err2) {
    console.log(err2)
    return fun3()
}).catch(function(err3){
    console.log(err3)
})

扩展：async await

async / await 是基于promise实现的，不能用于普通的函数，

其实就是一种语法糖，async函数就是把promise做了一个包装，await返回值是一个promise对象，它只是把await后面的代码放到了promise.then(),

它使异步代码看起来更像同步代码

async / await与promise一样，是非阻塞的

async init(){
    let res = await getJson()
}

// 可以让try/catch可以同时处理同步和异步错误。

//例如：调用fun1 ， 使用fun1的返回结果去调用fun2，然后使用两者的结果去调用fun3
const request = () =>{
    return fun1().then(res1=>{
        return fun2(res1).then(res2=>{
            return fun3(res1,res2)
        })
    })
}


const request =  async()=>{
    const res1 = await fun1()
    const res2 = await fun2(res1)
    return await promise( res1 , res2 )    
}