Vue四

最新推荐文章于 2023-07-18 16:41:49 发布
最新推荐文章于 2023-07-18 16:41:49 发布
阅读量190 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45824445/article/details/104294449
版权

vue复习笔记 Promise

125 promise的介绍和基本使用

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
setTimeout是一个异步操作 有了这个异步操作 以后可以对这个操作进行一些异步封装 用promise封装
promise就是对异步操作做一些封装
在这里插入图片描述在这里插入图片描述
PROMISE就是要求在创建的时候传递一些函数 但是传入的这两个函数本身也包含2个参数 resolve ,reject

有任何异步操作都可以直接封装在如下里面
new Promise((resolve  ,reject) => {
 
})

在这里插入图片描述
如上大音就已经出现了回调地狱
不希望在大括号里面嵌套一层又一层的话
那么就把如下代码抽离出去
在这里插入图片描述
调用resolve函数
一旦调用了resolve函数 就会在下面位置调用then

在这里插入图片描述在这里插入图片描述
then也是一个函数
在这里插入图片描述
就把刚才的那陀代码抽离出来放进去

},1000)

new Promise((resolve  ,reject) => {
    setTimeout(() => {
        resolve()
    },1000)
}).then(() =>{
  setTimeout(() => {
    console.log('Hello Word');
    console.log('Hello Word');
    console.log('Hello Word');

    setTimeout(() => {

    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');

        setTimeout(() => {
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');
})

那么这些数据就可以在then里面处理了
把setTimeout看成是一次网络请求

如果上面的一百行代码处理完 还有下面的那些代码 可以剪切掉
在这里插入图片描述
在这里插入图片描述
然后意味着上面的那部分代码又可以剪掉
再调用一下resolve
在这里插入图片描述
然后再写一个tnen 依然是一个箭头函数
在这里插入图片描述

  return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 1000)
        })
    }).then(() =>{


                console.log('Hello Vuejs');
                console.log('Hello Vuejs');
                console.log('Hello Vuejs');

                setTimeout(() => {
                    console.log('Hello Python');
                    console.log('Hello Python');
                    console.log('Hello Python');
                    console.log('Hello Python');
                })
    })

在这里插入图片描述
然后发现下面还有一次网络请求
在这里插入图片描述
那么就再来一次newPromise

<script>
<!--1.使用setTimeout-->
// setTimeout(() => {
//  console.log('Hello Word');
//
// },1000)

//参数 ->函数
//函数本身又有2个参数(resolve  ,reject)  resolve  ,reject它们本身又是函数
new Promise((resolve  ,reject) => {
    setTimeout(() => {
        resolve()
    },1000)
}).then(() =>{
    setTimeout(() => {
        console.log('Hello Word');
        console.log('Hello Word');
        console.log('Hello Word');

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 1000)
        })
    }).then(() =>{
        console.log('Hello Vuejs');
        console.log('Hello Vuejs');
        console.log('Hello Vuejs');
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
            })
            })
        }).then(() =>{
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');
    })
        })
</script>

都是对以下 第一次的结果处理
在这里插入图片描述
第一次发送网络请求
在这里插入图片描述
在这里插入图片描述

<script>
<!--1.使用setTimeout-->
// setTimeout(() => {
//  console.log('Hello Word');
//
// },1000)
链式编程
//参数 ->函数
//函数本身又有2个参数(resolve  ,reject)  resolve  ,reject它们本身又是函数
new Promise((resolve  ,reject) => {
//1.第一次网路请求的处理代码
    setTimeout(() => {
        resolve()
    },1000)
}).then(() =>{
    setTimeout(() => {
        //第一次拿到结果的处理代码
        console.log('Hello Word');
        console.log('Hello Word');
        console.log('Hello Word');
        return new Promise((resolve, reject) => {
            //第二次发送网络请求的代码
            setTimeout(() => {
                resolve()
            }, 1000)
        })
    }).then(() =>{
        //第二次处理的代码
        console.log('Hello Vuejs');
        console.log('Hello Vuejs');
        console.log('Hello Vuejs');
            return new Promise((resolve, reject) => {
                //第三次网络请求的代码
                setTimeout(() => {
                    resolve()
            })
            })
        }).then(() =>{
    //第三次处理的代码
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');

    })
        })
</script>

只要是网络请求的代码都是放在一个叫Promise对象里面
所有的处理代码都是在上一次Promise之后对应的then代码里面
即使有10次 代码的结构也是如此
一般情况下 是有异步操作时 使用Promise对异步操作进行封装
在这里插入图片描述
在这里插入图片描述
一旦reject它就会直接来到catch 把err message传到catch里面
在这里插入图片描述在这里插入图片描述
箭头函数只有一个参数的时候 小括号里面的内容 可以不写在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
126Promise的三种状态和另处理方式
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
如果不想通过then和catch可以在then处传入2个函数
在这里插入图片描述

new Promise((resolve,reject) => {
setTimeout(() =>{
resolve(‘Hello Vuejs’)
reject(‘error message’)
},1000)
}).then(函数1，函数2)

也可以
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

127 Promise的链式调用

<script>
 // 1.使用setTimeout
    // setTimeout(() => {
    //  console.log('Hello Word');
    //
    // },1000)
    // 链式编程
    //参数 ->函数
    //函数本身又有2个参数(resolve  ,reject)  resolve  ,reject它们本身又是函数
    new Promise((resolve  ,reject) => {
//1.第一次网路请求的处理代码
        setTimeout(() => {
            resolve()
        },1000)
    }).then(() =>{

            //第一次拿到结果的处理代码
            console.log('Hello Word');
            console.log('Hello Word');
            console.log('Hello Word');
            return new Promise((resolve, reject) => {
                //第二次发送网络请求的代码
                setTimeout(() => {
                    resolve()
                }, 1000)
            })
        }).then(() =>{
            //第二次处理的代码
            console.log('Hello Vuejs');
            console.log('Hello Vuejs');
            console.log('Hello Vuejs');
            return new Promise((resolve, reject) => {
                //第三次网络请求的代码
                setTimeout(() => {
                    resolve()
                })
            })
        }).then(() =>{
            //第三次处理的代码
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');
            console.log('Hello Python');

        })
</script>

在这里插入图片描述

//网络请求：aaa =>自己处理10行
    //处理：给aaa后面拼接111=>自己处理10行
//处理：aaa111222=>自己处理10行
new Promise((resolve,reject) =>{
    setTimeout(() => {
    resolve('aaa')
    },1000)
}).then(res => {
    //.自己处理10行代码
    console.log(res,'第一行的10行处理代码');
    //2  对结果进行第一次处理 给aaa后面拼接111=>自己处理10行
 return new Promise((resolve) => {
     resolve(res + '111')
 })
    //拿到下一次结果
}).then(res => {
    console.log(res,'第二行的10行处理代码');
    return new Promise((resolve) => {
        resolve(res + '222')
    })
}).then(res => {
    //.自己处理10行代码
    console.log(res,'第三行的10行处理代码');
})

如上 并没有进行异步操作 目的是拿到resolve之后 调用resolve 并且对结果做一些处理
只有第一个地方进行了异步操作
在这里插入图片描述
简写 如图可以把上面那些选中的删掉 换成下面选中的这种写法更加简洁
在这里插入图片描述
在这里插入图片描述
未简写前的代码处理结果在这里插入图片描述
简写后的代码处理结果
在这里插入图片描述

 更简洁的写法 省略掉Promise.resolve和（）
new Promise((resolve,reject) =>{
    setTimeout(() => {
        resolve('aaa')
    },1000)
}).then(res => {
    //.自己处理10行代码
    console.log(res,'第一行的10行处理代码');
    //2  对结果进行第一次处理 给aaa后面拼接111=>自己处理10行
    return res + '111'
    //拿到下一次结果
}).then(res => {
    console.log(res,'第二行的10行处理代码');
    return res+ '222'
}).then(res => {
    //.自己处理10行代码
    console.log(res,'第三行的10行处理代码');
})

在这里插入图片描述
直接做一个return 到时候它内部会对这个res + ‘111’ 进行一次promise包装

上面考虑的是每一层都是成功的 如果某一层失败的话
如下就不会再执行下面选中的那一坨
在这里插入图片描述
它会直接来的catch那里
在这里插入图片描述
如果打印err每次都要写new Promise也很麻烦
也有简写
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

128 Promise的all方法使用

在这里插入图片描述
如上 在开发中必须2个结果都有了才能进行下一步操作
如何判断2个请求都拿到结果了
网络请求不知道哪个先返回
就不好确定到底是在请求1里面处理还是在请求二里面处理
就定义一个函数
handleResult()
搞2个变量
进行判断 都为true时才进行处理结果

    //请求一
let isResult1 = false
let isResult2 = false
    $ajax({
        url:'',
        success:function(){
            console.log('结果1');
            isResult1 = true
            handleResult()
        }
    })

//请求er
$ajax({
    url:'',
    success:function(){
        console.log('结果1');
        let isResult2 = true
        handleResult()
    }
})
    
    function  handleResult() {
        if (isResult1 && isResult2){
            
        }
    }

但是Promise就可以包装2个异步请求 判断2个请求有没有都完成 在2个都完成时进行回调‘
在这里插入图片描述
都完成了就会来到then 这个then是一个数组
在这里插入图片描述
两个results分别对应发送的2个请求的结果
模拟打印
在这里插入图片描述
在这里插入图片描述

都柏林往事
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端笔记Vue项目day4(八）
czbkzmj的博客
09-18 536
async和 await async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 ​ await后面可以直接跟一个 Promise实例对象 ​ await函数不能单独使用 async/await 让异步代码看起来...
vue中Promise的用法
kuokay的博客
10-07 2万+
简介 promise是什么，它可以说是异步编程的一种解决方法，就拿传统的ajax发请求来说，单个还好，如果是一个请求回来的数据还要被其他请求调用，不断地嵌套，可想而知，代码看起来是很乱的，promise主要是为了解决这种情景而出现的。 使用 promise是一种异步解决方案。 由于ajax异步方式请求数据时，我们不能知道数据具体回来的事件，所以过去只能将一个callback函数传递给ajax封装的方法，当ajax异步请求完成时，执行callback函数。 promise对象接受resolve和reject
vue3基础---Promise
qq_61950936的博客
08-09 1万+
vue3基础铺垫之 Promise。星月前端博客t=M666星月前端博客https://xingyue.vercel.app/
对于Promise的学习
wk18949831618的博客
11-08 3406
对于Promise的学习 1.什么是Promise 简单来说Promise是异步编程的一种解决方案 Promise是ES6中的特性。 什么是异步操作？ 网络请求中，对端服务器处理需要时间，信息传递过程需要时间，不像我们本地调用算术函数一样，这里的网络请求不是同步的有时延， 不能立即得到结果。 == 如何处理异步事件？== 对于网络请求这种，一般会使用回调函数，在服务器端传给我数据成功后，调用回调函数。例如Ajax调用。 $.ajax({ sucess:function(){ ... } })
VUE Promise详解
sssssnmmm的博客
07-18 1383
Promise意在让异步请求逻辑代码变得干净、直观、井然有序。Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。
vue4
03-25
Vue 4，即Vue.js的第四版，虽然在本文撰写时Vue.js的最新稳定版本是3.x，但我们可以期待 Vue 4 在未来对性能、易用性和功能性的进一步提升。在深入Vue 4的知识点之前，我们先来了解一下Vue.js的基本概念。 Vue.js...
vue4auth:Vue.js的简单身份验证库
04-30
vue4auth Vue.js的简单身份验证库登记import Vue from 'vue';import Auth from 'vue4auth';Vue.use(Auth, { is: (value) => (['aaa', 'bbb'].includes(value))});功能控制是否存在元素dom，以进行前端身份验证。 三...
基于Vue3、Vite4、ant-design-vue4、UnoCSS和Typescript的一整套企业级中后台前端/设计解决方
最新发布
02-22
AntdvPro是一个基于Vue3、Vite4、ant-design-vue4、Pinia、UnoCSS和Typescript的一整套企业级中后台前端/设计解决方案，它参考了阿里react版本antd-pro的设计模式，使用了最新最流行的前端技术栈，内置了动态路由、...
vue、四级联动（省市区街道）
01-07
npm i --save area-linkage-vue area-data-vue 2、引入： import Vue from 'vue'; import { pcaa } from 'area-data-vue'; import 'area-linkage-vue/dist/index.css'; import AreaLinkageVue from 'area-...
vue-videobg:Vue.js的视频背景组件
05-03
影片背景通过NPM安装通过npm作为vue-videobg 。 npm install --save vue-videobg用法import VideoBg from 'vue-videobg'Vue . component ( 'video-bg' , VideoBg )// ornew Vue ( { el : 'body' , components : { ...
vue-resource调用promise取数据方式详解
08-29
主要介绍了vue-resource调用promise取数据方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue——promise用法
三月和九月的博客
02-14 6042
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。从语法上说，Promise是一个构造函数；从功能上来说通过创建一个Promise对象，用于封装异步 JavaScript的ES6新增了Promise异步请求功能，使得前端请求后端数据的功能更加容易。由于JS是单线程语言，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。为了让JS实现多线程的任务，掌握Promise的使用是每个前端开发者必备技能之一。
vue基础知识(五)——Promise基础详解
qq_40556950的博客
06-14 1652
今天是大概 标题水水水水 1111111111111111 90
用 async/await 来处理异步
u012536222的博客
01-16 410
用 async/await 来处理异步 　　昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，也是需要学习一下了。 先说一下async的用法，它作为一个关键字放到函数前面， async function timeout() { 　　return 'hello world'; } 只有一个作用, 它的调用...
【Vue】四、了解Promise
weixin_43333483的博客
12-24 1344
了解Promise
JavaScript进阶（二十五）：Promise 详解
热门推荐
IT全栈 华强工作室
12-22 3万+
Promise意在让异步代码变得干净和直观，让异步代码变得井然有序。 Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected）。在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。 （1）基本语法 创建Promise对象： 要想给一个函数赋予Promise能力，就要先创建一个Prom...
Vue教程(四十七)Promise基本介绍与使用
yuan_xw的专栏
09-12 6089
Vue教程(四十七)Promise基本介绍与使用 什么是Promise Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
十二、Promise的学习笔记(Promise的基本使用、链式编程、all())
zep
02-01 649
一、认识Promise ES6中一个非常重要和好用的特性就是Promise 但是初次接触Promise会一脸懵逼，这TM是什么东西？ 看看官方或者一些文章对它的介绍和用法，也是一头雾水。 Promise到底是做什么的呢？ Promise是异步编程的一种解决方案。 那什么时候我们会来处理异步事件呢？ 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数
vue3和vue4区别
08-16
目前（2021年10月），Vue3 和 Vue4 尚未发布，因此无法提供它们之间的具体区别。然而，我可以向您介绍 Vue3 相较于 Vue2 的一些主要变化和改进，以便您对 Vue3 有一个初步的了解。 1. 性能提升：Vue3 在性能方面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值