vue学习之promise

最新推荐文章于 2024-01-03 09:25:16 发布
最新推荐文章于 2024-01-03 09:25:16 发布
阅读量264 收藏 1
点赞数
分类专栏： # vuejs学习 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/119887827
版权

文章目录

1、认识promise

1.1、做什么

异步编程的一种解决方案

1.2、何时处理异步事件

  • 网络请求（比如 3+7=10 不能将结果返回）
  • 网络请求中传入另外一个函数，数据请求成功时候，将数据传入的函数回调处理

1.3、回调地狱

1.3.1、需求说明

需要通过url1从服务器加载数据data1,data1包含下一个请求url2
需要通过url2从服务器加载数据data1,data1包含下一个请求url3
需要通过url2从服务器加载数据data1,data1包含下一个请求url4

1.3.2、伪代码

$.ajax('url1',function(data1){
    $.ajax(data1['url2'],function(data2){
        $.ajax(data2['url3'],function(data3){
            $.ajax(data3['url4'],function(data4){
                console.log(data4);
            })
        })
    })
})

1.3.3、代码出现的问题

  1. 正常情况，不会有问题，可以获取想要的结果
  2. 这样代码难看不移维护
  3. 希望优雅的方式进行异步操作

1.3.4、如何做

promise可以以一种优雅方式解决这种问题

2、promise基本使用

2.1、定时器的异步事件

需求说明

使用定时器模拟异步事件

  • 假设下面data是从网络上一秒后请求的数据
  • console.log就是我们的处理凡是

这个例子感觉我们有点多余

  • 首先promise代码明显比上面代码复杂
  • 其次promise包含resole,reject,then,catch什么东西

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 说明
        // Promise有两个参数 resole reject 表示成功时调用  失败时调用的函数
        // 调用resole函数时  会将数据传入.then方法里面
        // 调用reject函数时 会将数据传入.catch方法里面
        new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('hello world');
                reject('hello vuejs')
            }, 1000);
        }).then((data) => {
            console.log(data)
        }).catch((error) => {
            console.log(error)
        })
    </script>
</body>

</html>

另外处理形式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('hello vuejs')
                reject('hello js')
            }, 1000);
        }).then((data) => {
            console.log(data)
        }, error => {
            console.log(error)
        })
    </script>
</body>

</html>

效果图

请添加图片描述

2.2、定时器的异步解析

  • new Promise创建一个Promise对象
  • ((resole,reject) => {}) 是一个函数，箭头函数
    • resole,reject也是两个函数，请求成功和失败决定调用哪一个
  • 成功还是失败
    • 成功，调用resolve(message),then被调用
    • 失败，调用reject(message),catch被调用

2.3、promise的三种状态

pending
等待状态，比如正在进行网络请求，或者定时器没有到时间
fulfill
满足状态，当我们主动回调resolev,处于该状态 回调then
reject
拒绝状态，当主动调用reject,处于该状态，回调catch

3、promise链式调用

3.1、流程

版本1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('hello vuejs')
            }, 1000)
        }).then(data => {
            console.log(data)
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('hello js')
                }, 1000);
            }).then(data => {
                console.log(data)
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('hell java')
                    }, 1000);
                }).then(data => {
                    console.log(data)
                })
            })
        })

    </script>
</body>

</html>

版本2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('hello vuejs')
            }, 1000)
        }).then(data => {
            console.log(data)
            return Promise.resolve(data + 1)
        }).then(data => {
            console.log(data)
            return Promise.resolve(data + 2)
        }).then(data => {
            console.log(data)
            return Promise.resolve(data + 3)
        }).then(data => {
            console.log(data)
        })

    </script>
</body>

</html>

效果图

在这里插入图片描述

说明

这里直接通过Promise包装了一下新的数据，将promise对象返回

  • promise.resolve()：将数据包装成promise对象，并且在内部回调resolve函数
  • promise.reject():将数据包装成promise对象，内部回调reject函数在·

版本3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('hello vuejs')
            }, 1000)
        }).then(data => {
            console.log(data)
            return data + 1
        }).then(data => {
            console.log(data)
            return data + 2
        }).then(data => {
            console.log(data)
            return data + 3
        }).then(data => {
            console.log(data)
        })

    </script>
</body>

</html>

关键代码

在这里插入图片描述

效果图

在这里插入图片描述

说明

如果希望将数据直接包装成Promise.resolve,那么在then中可以直接返回数据
return Promise.resolve(data) =》return data;

3.2、链式简写

geekmice
关注
专栏目录
50.vue的Promise
鹏哥哥Aaa
12-14 286
vue的Promise
【学习随记】vue 使用new Promise请求接口
weixin_46008251的博客
12-16 2673
<script> export default { methods: { // 调用接口 getData: function () { let that = this; let reqUrl = 'http://www.xxx.com/'; let headPram1 = Cookie('h...
Vue项目 promise
weixin_30469895的博客
10-01 830
今天的新的知识点ES6中的Promise 为什么要跟我说这个 廖雪峰：https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544 在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执...
小白用vue写项目的心路历程，promise篇
i_comeaa的博客
04-20 521
这一次讲一下异步处理，异步处理在实战中非常实用，也是面试中必问的问题，接下来我先介绍一下作为一个啥也不懂的小白在初次遇到异步时的处理，我在每次请求数据的时候，因为请求是异步所以我起初是通过设置定时器来处理异步，一开始的确是达到了目的，但是后来需要按顺序处理异步请求的数据，这时候定时器的弊端就显露出来了，另一方面在紧凑的异步处理的情况下，定时器也可能会在请求完成之前就结束（由于网络问题），所以这个方...
【Vue】四、了解Promise
weixin_43333483的博客
12-24 1546
了解Promise
vue的学习笔记（15）之Promise知识讲解
肿肿的博客
02-04 2245
Promise一、认识promise1、什么是Promise呢？2、网络请求的回调地狱二、Promise的基本使用1、定时器的异步事件2、Promise三种状态三、promise的链式调用四、promise的all方法的使用 一、认识promise Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 1、什么是Promise呢？ （1）ES6中一个非常重要和好用的特性就是Promise。 （2）Promise是做什么的呢？ 答：Promise是异步编程的一种解决方案。 （3）什么时候
Vue学习(8)-vue-router、Promise的学习
qq_43294163的博客
10-03 403
Vue学习(8)-vue-router、Promise的学习 一、vue-router学习 路由的传值 URL： 协议://主机:端口/路径？查询 scheme://host:post/path?query#fragment <router-link :to="{path: '/profile'}, query: {name: 'why', age: 18, height: 1.88}">档案</router-link> <h2> {{$route.que
Vue学习之vue.docx
11-22
在Vue的学习过程中，数据交互是至关重要的一环，因为它允许应用与服务器进行通信，获取和更新数据。Vue提供了多种方式来实现数据交互，其中最常用的包括vue-resource和axios。 一、Vue数据交互方式： 1. **vue-...
Vue学习之axios的使用方法实例分析
11-28
Vue.js作为一个流行的前端框架，其在处理数据交互时通常依赖于第三方库，如axios。axios是一个基于Promise的HTTP库，可以方便地在浏览器和Node.js环境中进行网络请求。本文将详细解析Vue中axios的使用方法。 首先，...
学Vue前的前置知识-Promise
星星阿虎的博客
09-16 415
Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
Promise的resolve和reject使用
weixin_46022934的博客
08-28 1万+
前言（可以跳转解决地狱回调的问题👇🔗） 一、Promise是什么？ 二、Promise的用法如下（resolve） 1.promise的操作演示如下 2.reject的用法如下 总结
JavaScript进阶（二十五）：Promise 详解
IT全栈 华强工作室
12-22 3万+
Promise意在让异步代码变得干净和直观，让异步代码变得井然有序。 Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected）。在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。 （1）基本语法 创建Promise对象： 要想给一个函数赋予Promise能力，就要先创建一个Prom...
Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？
最新发布
code
01-03 2122
Promise.rece()的使用方法和 Promise.all一样，接收一个promise 对象的数组为参数，Promise.race是要有一个promise对象进入Fulfilled或者 Rejected状态的话，就会继续进行后面的处理。如果这个promise对象的数组中没有一个promise 可以成功执行（即所有的 promise都失败 ），就返回一个失败的promise 和AggregateError类型的实例，它是Error的一个子类，用于把单一的错误集合 在一起。
均方误差(MSE)和均方根误差(RMSE)和平均绝对误差(MAE)
热门推荐
医学影像学习笔记
02-21 28万+
MSE: Mean Squared Error 均方误差是指参数估计值与参数真值之差平方的期望值; MSE可以评价数据的变化程度，MSE的值越小，说明预测模型描述实验数据具有更好的精确度。 MSE=1N∑t=1N(observedt−predictedt)2MSE=\frac{1}{N}\sum_{t=1}^{N}(observed_t-predicted_t)^2 RMSE
vue3基础---Promise
厚积薄发.
08-09 1万+
vue3基础铺垫之 Promise。星月前端博客t=M666星月前端博客https://xingyue.vercel.app/
vue——promise用法
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
02-14 6272
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。从语法上说，Promise是一个构造函数；从功能上来说通过创建一个Promise对象，用于封装异步 JavaScript的ES6新增了Promise异步请求功能，使得前端请求后端数据的功能更加容易。由于JS是单线程语言，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。为了让JS实现多线程的任务，掌握Promise的使用是每个前端开发者必备技能之一。
Promise的resolve方法和reject方法
LQ55
07-29 5万+
Promise的resolve方法和reject方法 Promise.resolve方法返回一个promise的实例 Promise.resolve('foo');//等价于如下 new Promise((resolve)=&gt;{ resolve('foo'); }) 根据参数不同，分为一下几种情况 （1）参数是一个Promise的实例 如果参数是一个Promise的实例...
vue中使用promise
weixin_34152820的博客
01-08 2008
init1(){ return new Promise((resolve, reject) => { let data={ dateStr:this.time }; api.get('url', null).then( res => { //自己的操作 resolve() }).catch...
vue 中 Promise 使用方法
曾令胜的博客
10-20 3万+
1. Promise 基本概念： Promise是一个构造函数，所以可以 new 出一个Promise的实例； 在Promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函数)； 在Promise构造函数的prototype属性上，有一个 .then() 方法。 所以只要是Promise构造函数创建的实例，都可以访问到 .then()方法； Promise表示一个一步操作，每当我们new一个Promise的实例，这个实例就代表具体的 异步 操作。 Promise创建
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值