Vue学习25_Vue的异步操作Promise

最新推荐文章于 2024-08-11 23:32:31 发布
最新推荐文章于 2024-08-11 23:32:31 发布
阅读量1.5k 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48459574/article/details/109263070
版权

Vue的异步操作Promise

  1. Promise的基本使用：当我们需要执行异步操作时，传统的异步操作代码看起来十分的混乱，多次回调，给人一种灾难般的感受，我们称这种情况为回调地狱，为了解决这一问题，Vue为我们提供了异步操作的一种形式，Promise
    示例代码：每隔三秒打印不同的内容
    <script>

        // 使用setTimeout
        setTimeout(() => {
            console.log("Hello world");
        }, 5000)

        // 使用promise
        // promise(参数：函数(参数：resolve，reject))
        // 本身又是函数


        new Promise((resolve, reject) => {
            resolve()
        }).then(() => {
            setTimeout(() => {
                console.log("Hello world")
                console.log("Hello world")
                console.log("Hello world")
                console.log("Hello world")
                console.log("Hello world")
                console.log("Hello world")
            }, 3000)

            return new Promise((resolve, reject) => {
                resolve()
            }).then(() => {
                setTimeout(() => {
                    console.log("Hello zyt")
                    console.log("Hello zyt")
                    console.log("Hello zyt")
                    console.log("Hello zyt")
                    console.log("Hello zyt")
                    console.log("Hello zyt")
                }, 6000)

                return new Promise((resolve, reject) => {
                    resolve()
                }).then(() => {
                    setTimeout(() => {
                        console.log("Hello ltn")
                        console.log("Hello ltn")
                        console.log("Hello ltn")
                        console.log("Hello ltn")
                        console.log("Hello ltn")
                        console.log("Hello ltn")
                    }, 9000)
                })
            })
        })

        // 当使用到异步操作时，一般会用到Promise进行封装
        // Promise对网络请求的代码进行了分类
        new Promise((resolve, reject) => {
            // 在这里执行网络请求
            setTimeout(() => {
                // 执行resolve将请求到的数据data传递到then中执行

                // 处理成功，跳转到then
                resolve("张大宝")
                // 处理失败，跳转到catch
                reject("刘小宝")
            }, 3000)
        }).then((data) => {
            // 在这里对网络请求的数据进行操作
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);
        }).catch((erro) => {
            console.log(erro);
        })
    </script>

运行结果：
在这里插入图片描述

  1. Promise的另外处理形式：resolve当请求执行成功时调用，执行then函数，reject当请求调用失败时调用，可执行错误处理
    示例代码：
    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve("Hello world")
                reject("error message")
            }, 5000)
        }).then((data) => {
            console.log(data);
        }, (error) => {
            console.log(error);
        })
    </script>

运行结果：
在这里插入图片描述
3. Promise的链式调用：当我们需要执行异步请求时，请求的次数有多次，则在使用Promise时，可以提高代码的可读性，在代码风格上看起来，仿佛时一条长长的链子，因此称为Promise的链式调用；
示例代码：请求获取到一个数据a，以此调用将a后面拼接上他后面的字母，如ab，并且传给下一次请求接着调用：

    <script>
        // 获取数据a，自己处理完再接着传递给下一个函数拼上b，在拼上c

        new Promise((resolve) => {
            setTimeout(() => {
                resolve('a')
            }, 2000)
        }).then((res) => {
            // 自己处理自己的数据
            console.log('自己处理数据', res);

            // 对第一次结果进行处理,并且赋值给下一次处理then
            return new Promise((resolve) => {
                resolve(res + 'b')
            })
        }).then((res) => {
            console.log('自己处理数据', res);

            // 对第二次结果进行处理
            return new Promise((resolve) => {
                resolve(res + 'c')
            })
        }).then((res) => {
            console.log('自己处理数据', res);

            return new Promise((resolve) => {
                resolve(res + 'd')
            })
        }).then((res) => {
            console.log('自己处理数据', res);

            return new Promise((resolve) => {
                resolve(res + 'e')
            })
        }).then((res) => {
            console.log('自己处理数据', res);
        })

        setTimeout(() => {
            console.log('-------------------------');
        }, 2000)
    </script>

运行结果：
在这里插入图片描述
上述代码看起来还是有点复杂，我们想着，是否能够对上述代码进行简写：
Promise的简写：这里去掉了每一次新的请求都需要新new一个Promise，直接return Promise对象并且调用它的resolve方法即可：，运行结果

        //Promise的简写
        new Promise((resolve) => {
            setTimeout(() => {
                resolve('a')
            }, 4000)
        }).then((res) => {
            // 自己处理自己的数据
            console.log('自己处理数据', res);

            // 对第一次结果进行处理,并且赋值给下一次处理then
            return Promise.resolve(res + 'b')
        }).then((res) => {
            console.log('自己处理数据', res);

            // 对第二次结果进行处理
            return Promise.resolve(res + 'c')
        }).then((res) => {
            console.log('自己处理数据', res);

            return Promise.resolve(res + 'd')
        }).then((res) => {
            console.log('自己处理数据', res);

            return Promise.resolve(res + 'e')
        }).then((res) => {
            console.log('自己处理数据', res);
        })

        setTimeout(() => {
            console.log('-------------------------');
        }, 4000)

运行结果：
在这里插入图片描述
Promise更简洁的写法：直接return一个结果，不需要调用Promise

        // Promise更简洁写法
        new Promise((resolve) => {
            setTimeout(() => {
                resolve('a')
            }, 6000)
        }).then((res) => {
            // 自己处理自己的数据
            console.log('自己处理数据', res);

            // 对第一次结果进行处理,并且赋值给下一次处理then
            return res + 'b'
        }).then((res) => {
            console.log('自己处理数据', res);

            // 对第二次结果进行处理
            return res + 'c'
        }).then((res) => {
            console.log('自己处理数据', res);

            return res + 'd'
        }).then((res) => {
            console.log('自己处理数据', res);

            return res + 'e'
        }).then((res) => {
            console.log('自己处理数据', res);
        })

        setTimeout(() => {
            console.log('================================');
        }, 6000)

运行结果：
在这里插入图片描述

  1. Promise处理失败结果：
    示例代码：
        // Promise处理失败
        new Promise((resolve) => {
            setTimeout(() => {
                resolve('a')
            }, 6000)
        }).then((res) => {
            // 自己处理自己的数据
            console.log('自己处理数据', res);

            // 对第一次结果进行处理,并且赋值给下一次处理then
            // return Promise.reject('error message')
            throw 'error message'
        }).then((res) => {
            console.log('自己处理数据', res);

            // 对第二次结果进行处理
            return res + 'c'
        }).then((res) => {
            console.log('自己处理数据', res);

            return res + 'd'
        }).then((res) => {
            console.log('自己处理数据', res);

            return res + 'e'
        }).then((res) => {
            console.log('自己处理数据', res);
        }).catch((err) => {
            console.log(err);
        })

运行结果：
在这里插入图片描述
5. Promise的all方法：当所有异步操作执行完成后，将执行的结果保存到一个数组内：
示例代码：

    <script>
        // Promise.all([
        //     new Promise((resolve, reject) => {
        //         $ajax({
        //             url: 'url1',
        //             success: function (data) {
        //                 resolve(data)
        //             }
        //         })
        //     }),
        //     new Promise((resolve, reject) => {
        //         $ajax({
        //             url: 'url2',
        //             success: function (data) {
        //                 resolve(data)
        //             }
        //         })
        //     }),
        // ]).then((results) => {
        //     console.log(results[0]); //保存url1的结果
        //     console.log(results[1]);//保存url2的结果
        // })

        Promise.all([

            new Promise((resolve, reject) => {

                setTimeout(() => {
                    resolve({
                        name: 'zyt',
                        age: 21,
                        heigth: 1.8
                    })
                }, 2000)

            }),

            new Promise((resolve, reject) => {

                setTimeout(() => {
                    resolve({
                        name: 'ltn',
                        age: 22,
                        heigth: 1.6
                    })
                }, 1000)

            }),

        ]).then((results) => {
            console.log(results);
        })
    </script>

运行结果：
在这里插入图片描述

旧梦半岛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue: Promise的异步请求
Xu190131的博客
06-09 282
在孙子组件里面传数据 <template> <div class="grandson"> <h5>子级</h5> <button @click="grandsonHello">sayHello</button> </div> </template> <script> export default { name: 'Grandson', // 组件名.
vue中promise的使用及异步请求数据的方法
10-17
主要介绍了vue中promise的使用及异步请求数据的方法,文章给大家较详细的介绍了遇到的问题及解决方法，需要的朋友可以参考下
vue中promise解决异步问题的使用
qq_43610925的博客
04-02 2667
需求描述 我的页面有5个请求接口的方法，然后我需要在另外一个方法中调用这几个方法，并让他们按照我想要的顺序执行。 代码实现 接下来直接看代码关于我是如何实现这个需求的 // 这个方法是一个请求接口的方法，其他每个也这样写 getStatisticsList() { /* 1.return一个promise对象，promise的构造函数传入一个对象，这个对象是一个函数， 这个函数可以传两个对象，分别标志成功和失败，我这里只传了一个成功标志即resolve， resolve中必须有一个返回值，（可
【Vue实战教程】之Vue项目中的异步请求
柯晓楠
07-23 1176
Axios的拦截器分为请求拦截器和响应拦截器，两种拦截器在不同的时机对axios发起的请求进行处理。DELETE是请求服务器删除指定的页面。当axios要请求多个不同的后端接口地址，并且一些axios配置项都相同时，可以先创建axios实例，然后使用axios实例发起请求。Axios是一个基于promise的HTTP库，主要用来向服务端发起请求，可以在请求中做更多可控的操作，例如拦截请求等。Axios主要的作用是向服务端发起HTTP请求，根据 HTTP 标准，HTTP 请求可以使用多种请求方法。
vue 中promise 异步请求数据
qq_45670012的博客
10-02 771
export function getTypes(type) { return listDictItems({ code: type }).then((res) => { if (res.code =...
面试的总结语，vue异步问题使用Promise解决记录，设计思想解读开源框架
2401_83620927的博客
04-09 429
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-FKWWk68F-1712606985170)]
详解vue中多个有顺序要求的异步操作处理
12-13
在Vue开发过程中，有时我们需要处理多个有顺序要求的异步操作。例如，在上述场景中，用户批量下单前，每个订单需要先计算保价费。这是一个典型的异步操作序列化问题，因为每个订单的保价费计算必须在下单之前完成。...
vue中用 async/await 来处理异步操作
10-15
在Vue.js中，异步操作是常见的需求，如数据的获取、页面的加载等。传统的异步处理方式包括回调函数、Promise等，但随着ES6的引入，`async/await`语法为处理异步操作提供了更优雅的解决方案。`async/await`是基于...
用 async/await 来处理异步
u012536222的博客
01-16 432
用 async/await 来处理异步 　　昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，也是需要学习一下了。 先说一下async的用法，它作为一个关键字放到函数前面， async function timeout() { 　　return 'hello world'; } 只有一个作用, 它的调用...
vue开发笔记-Promise异步结果对象
wshten
08-16 5458
Promise的含义 Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供...
vue中Promise的实战用法
weixin_44251396的博客
12-31 1684
promise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 为什么会有promise？ 为了避免界面冻结（任务） 同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单...
对于Promise的学习
wk18949831618的博客
11-08 3424
对于Promise的学习 1.什么是Promise 简单来说Promise是异步编程的一种解决方案 Promise是ES6中的特性。 什么是异步操作？ 网络请求中，对端服务器处理需要时间，信息传递过程需要时间，不像我们本地调用算术函数一样，这里的网络请求不是同步的有时延， 不能立即得到结果。 == 如何处理异步事件？== 对于网络请求这种，一般会使用回调函数，在服务器端传给我数据成功后，调用回调函数。例如Ajax调用。 $.ajax({ sucess:function(){ ... } })
vue异步问题解决方法
热门推荐
zH1_234567的博客
03-03 1万+
第一种情况，需要在普通函数中使用axios返回的结果 methods:{ async a(){ // res直接可以接收到异步的请求结果 let res = await this.b() }, b(){ // 这里可以直接返回axios的请求结果，不需要用then接收 return this.$axios.post(请求体) } } 第二种情况，需要在异步的函数中使用另一个异步函数的返回值 met
Vue入门（四）Vue异步操作
最新发布
kong7906928的博客
08-11 198
Vue异步操作，axios
VUE Promise详解
sssssnmmm的博客
07-18 1903
Promise意在让异步请求逻辑代码变得干净、直观、井然有序。Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。
vue 处理异步请求
小猫爪子
01-29 9743
总结一下目前我了解到的异步请求的几种方式，后续继续补充。 Vue处理异步请求一、使用promise处理异步二、使用async-await处理 一、使用promise处理异步 首先可以先了解一下ES6-promise的具体使用方法。 执行步骤： 1，实例化Promise（new Promise（function（resolve,reject））） 2，用Promise的实例调用then方法 简单示例： function checkFunc() { let p = new Promise(function (r
Vue指令、生命周期、Axios异步请求方式
NeilNiu
04-28 1306
Vue 是一款用于构建用户界面的的JavaScript框架。
解决vue生命周期异步土方法
qq719756146的博客
01-21 218
设定一个阀请求成功后吧阀打开,通过判断阀,来判读ajax请求是否完成
Vue 3 如何处理异步操作（比如 API 请求）？
有我更精彩的博客
05-28 1429
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。随着Vue 3的发布，很多新的特性和改进被引入，使得开发者更容易处理异步操作。Vue 3利用了现代JavaScript中的一些特性，例如Promise、async/await等，使开发体验更为流畅和高效。
vue中promise 中调方法还是异步
05-01
Vue中Promise是一个异步操作，它的作用是为了更好地处理异步操作。当我们在Vue中使用Promise时，它会返回一个Promise对象，这个对象代表了一个尚未完成、但预计在未来会完成的操作。 Promise对象有三种状态：Pending（进行中）、Fulfilled（已完成）和Rejected（已失败）。当我们调用Promise中的方法时，程序会在调用该方法的同时进行后续的代码执行，而不需要等待该方法完成。 因此，我们可以说Vue中Promise中调用方法是异步的，它并不会阻塞程序的执行，而是在异步操作完成后，再执行后续的代码。这样能够避免程序的卡顿，提高Vue的性能和用户体验。 总之，Promise是一个非常重要的异步操作工具，在Vue中也被广泛应用。如果能够熟练掌握Promise的使用，可以大大提高Vue的开发效率和程序的稳定性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值