VueX原理知识与基础代码

最新推荐文章于 2023-10-10 10:50:55 发布

lyyibaobao

最新推荐文章于 2023-10-10 10:50:55 发布

阅读量435

点赞数

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lyyibaobao/article/details/118035657

版权

Promise-Promise的介绍和基本使用

ES6中一个非常重要和好用的特性就是Promise
但是初次接触Promise会一脸懵逼，这是什么东西呢？
看官方文档或者一些文章对它的介绍和用法，也是一头雾水

Promise到底是做什么的呢？

Promise是异步编程的一种解决方案**

那么什么时候我们回来处理异步事件呢？
一种常见的场景应该是网络请求
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能想简单的3+4=7一样将结果返回
所以往往我们会传入另外的函数，在数据请求成功时，将数据通过传入的函数回调出去
如果只是一个简单的网络请求，name这种方案会带来很大的麻烦

但是，当网络请求非常复杂时，就会出现回调地狱

网络请求的回调地狱

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j45kHfvJ-1624031289565)(E:/md文件/图片/image-20210506143721848.png)]

定时器的异步事件

Pormise最基本语法链式编程

<!DOCTYPE html>
<html lan="en">
    <head>
        <mata charset="utf-8"/>
        <title>Promise</title>
    </head>
    <body>
        <script>
        	//1.使用setTimeout 
            //setTimeout(() =>{
    
          //  console.log('Holle World')
         //   },1000)
            //参数  ->  函数(resolve,reject)
            //resolve,reject本身他们就是函数
            //链式编程
            new Promise((resolve,reject) => {
    
                
                //第一次网络请求的代码
                 setTimeout(() =>{
    
      			resolve()
                },1000)
            }).then(() => {
    
                console.log('Hello,World');
                console.log('Hello,World');
                console.log('Hello,World');
                  	
                return new Prmise(resolve,reject) =>{
    
                    //第二次网络请求的代码
                    setTimeout(() =>{
    
                        resolve()
                    },1000)   
                }) 
            }).then(() => {
    
                //第二次处理的代码
                console.log('Hello,Python');
                console.log('Hello,Python');
                console.log('Hello,Python');
                
                return new Pormise(resolve,reject) => {
    
                    //第三次网络请求的代码
                    setTimeout(() => {
    
                        resolve()
                    },1000)
                })
            }).then(() => {
    
                //第三次处理的代码
                console.log('Hello,Vue.js');
                console.log('Hello,Vue.js');
                console.log('Hello,Vue.js');
            })
            //new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
            //在执行我们的回调函数时，会传入两个参数，resolve reject ，本身这个两个参数又是函数
            new Promise((resolve，reject) => {
    
                setTimeout(() => {
    
                    //成功的时候调用resolve
                    resolve('Hellow World')
                    //失败的时候调用reject【拒绝的意思】把错误信息传到reject里面  然后跳过then处理到catch【捕获异常】
                    reject('error message ')
                },1000)
            }).then((data) => {
    
                //1.100行的处理代码
                console.log(data);
                console.log(data);
                console.log(data);
            }).catch((err) => {
    
                console.log(err);
            }) 
            //一旦有一步操作的时候，就用Promise包起来，当这个  setTimeout(()异步操作拿到 'Hellow World'这个结果之后，通过rsolve函数点用一下，将结果传到.then((data)这里，来到下面的位置进行相关处理
        </script>
    </body>
</html>

什么情况下用到Promise？

一般情况下有异步操作时，使用Promise对这个异步操作进行封装

executor ：执行的意思

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bf7Jshl3-1624031289567)(E:/md文件/图片/image-20210506151004569.png)]

new Promise( ) 这个语法是实现 PromiseCoustructor 这个接口的

这个接口里面有一个new(executor: (resolve: (value? : T | Promise ) => void , reject : (reason? : any) => void ) => void ) : Promise;

excuteor这个构造函数执行完之后，就会立即回来执行上边的这个函数，在回调这个函数的时候，他会给你传入两个参数resolve和reject 这两个函数本身又是函数

成功的时候调用resolve打印[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olackqn3-1624031289569)(E:/md文件/图片/image-20210506153550529.png)]

失败的时候调用reject打印[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSmY4oI8-1624031289571)(E:/md文件/图片/image-20210506153502390.png)]

Pormise-Promise三种状态和另一种处理方式

首先当我们开发中有异步操作时，就可以给异步操作包装一个Promise
异步操作之后会有三种状态：
pending：等待状态，比如正在进行网络请求，或者定时器没有到时间
fulfill：满足状态，当我们主动回调resolve时，就处于该状态，并且回调.then()
reject: 拒绝状态，当我们主动回调了reject时，就处于该状态，并且会掉.catch( )

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8O8J48s-1624031289572)(E:/md文件/图片/image-20210506155022073.png)]

sysnc （Sysnchronization）-> 同步

async（Asyschronization）-> 异步

wrapped into 包裹的意思

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-da5uy4Wx-1624031289574)(E:/md文件/图片/image-20210506154612491.png)]

成功的时候[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vs9PARXb-1624031289574)(E:/md文件/图片/image-20210506154926971.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5eszj1S-1624031289574)(E:/md文件/图片/image-20210506154946883.png)]

失败的时候[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9SXjgHd9-1624031289576)(E:/md文件/图片/image-20210506154812671.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E0DQjlDT-1624031289576)(E:/md文件/图片/image-20210506154836475.png)]

Promise-Promise的链式调用

<!DOMTYPE html>
<html>
    <head>
        <mata charset="utf-8"></mata>
        <title>Tile</title>
    </head>
    <body>
        <script>
            //wrapped into 包裹
            //网络请求 ：aaa -> 自己处理（10行）
            //处理： aaa111 -> 自己处理（10行）
            //处理： aaa111222 -> 自己处理
        	new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res =>{
                //自己处理行代码
                console.log(res,'第一层的10行代码处理');
                //2.对结果进行第一次处理转变
                return new Promise((resolve) => {
                    resolve(res + '111')
                })
            }).then(res => {
                console.log(res,'第二层的10行代码处理代码');
                //3.对处理结果再次转变
                return new Promise(reslove => {
                    reslove(res + '222')
                })
            }).then(res => {
                consloe.log(res,'第三层的10行处理代码')
            })
            
            //上面的没有进行异步操作处理 第二种比第一种更简洁
            new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res =>{
                //自己处理行代码
                console.log(res,'第一层的10行代码处理');
                //2.对结果进行第一次处理转变
                return Promise.resolve(res + '111')
            }).then(res => {
                console.log(res,'第二层的10行代码处理代码');
                //3.对处理结果再次转变
                return Promise.resolve(res + '222')
            }).then(res => {
                consloe.log(res,'第三层的10行处理代码')
            })
            
            
            //第三种更简洁  省略掉Promise.resolve
            new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res =>{
                //自己处理行代码
                console.log(res,'第一层的10行代码处理');
                //2.对结果进行第一次处理转变
                return res + '111'
            }).then(res => {
                console.log(res,'第二层的10行代码处理代码');
                //3.对处理结果再次转变
                return res + '222'
            }).then(res => {
                consloe.log(res,'第三层的10行处理代码')
            })
            
        </script>
    </body>
</html>

成功

第一种的结果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIYkX7M8-1624031289577)(E:/md文件/图片/image-20210506161719507.png)]

第三种测试[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4TSXzr1K-1624031289578)(E:/md文件/图片/image-20210506161956316.png)]

失败

错误测试[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A86wbr3x-1624031289578)(E:/md文件/图片/image-20210506162150573.png)]

直接在第一行终止[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RAf7SnDV-1624031289579)(E:/md文件/图片/image-20210506162236090.png)]

第二种方式测试[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S6vIhZAo-1624031289579)(E:/md文件/图片/image-20210506162351232.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSSrI3wQ-1624031289580

最低0.47元/天解锁文章

lyyibaobao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VueX原理知识与基础代码

Promise-Promise的介绍和基本使用ES6中一个非常重要和好用的特性就是Promise但是初次接触Promise会一脸懵逼，这是什么东西呢？看官方文档或者一些文章对它的介绍和用法，也是一头雾水Promise到底是做什么的呢？ Promise是异步编程的一种解决方案**那么什么时候我们回来处理异步事件呢？一种常见的场景应该是网络请求我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能想简单的3+4=7一样将结果返回所以往往我们会传入另外的函数，在数据请求成功时，将数据通过传
复制链接

扫一扫