ES6中Promise、Async/await解决回调地狱、Proxy代理

最新推荐文章于 2024-01-16 20:11:22 发布

无尘本无物

最新推荐文章于 2024-01-16 20:11:22 发布

阅读量698

点赞数

文章标签： es6 vue.js 前端

本文链接：https://blog.csdn.net/m0_45884629/article/details/131540367

版权

1.Promise

作为一些场景必须要使用的一个对象，比如说我们要发送一个请求，但是在发送这个请求之前我们需要以另一个请求返回的结果中的一个数据作为这次请求的参数，也就是说这个请求必须在另一个请求后面，当然我们用setTimeout定时器写一个延时函数也可以，但是当有很多请求的时候回造成一层套一层形成回调地狱。
直接上代码，代码里面注释写的很清楚

<script>
    // 注:下面的.then的err是因为then()有两个参数
    // then((res)=>{},(err)=>{})两个参数都是函数一个是Promise成功的一个是失败的
    const pr = new Promise(function (resolve, reject) {//这个地方一般用箭头函数
        resolve('第一次成功') //成功的时候会给.then一个结果数据
        //reject('失败的信息') //失败的时候会给.catch一个结果数据
    }).then(res => {
        console.log('拿到第一次成功的结果:' + res) //这里的res就是 成功
        //我们拿到第一层成功的结果可以继续在里面执行下一步操作
        return new Promise((resolve, reject) => {
            resolve('第二次成功')
            //这个地方我们又拿到成功的需要再去.then拿到这次成功的结果
        })
    }, err => {
        //我们可能每一次失败都要进行不同的处理，就可以给每一个.then加上错误处理
        console.log('第一次失败' + err)
        throw new Error('报错') //报错了下面的代码就不执行了
    }).then(res => {
        console.log('第二次成功拿到结果:' + res)
    }, err => {
        console.log('第二次失败' + err)
    }).catch(err => {
        console.log(err) //这里的err 就是是失败
    })
    //pending 等待状态
</script>

2.Async/await

这个是基于Promise进行优化的，因为Promise虽然解决了回调地狱但是其是链式调用，会写起来很长也不是很方便后期维护，Async/await就是Promise的升级版。

<script>
    //Async/await
    //步骤1：准备一个返回promise对象的函数
    function asyncTask(){
        return new Promise((resolve,reject)=>{
            let isSuccess=true
            if(isSuccess){
                resolve('任务3的成功处理结果')
            }else{
                reject('任务3的失败处理结果')
            }
        })
    }
    async function main(){
        console.log('任务1')
        const pr1=await asyncTask()
        //这里只等待了一个如果还有继续写
        //const pr2=await asyncTask2()
        console.log(pr1);
        console.log('任务2');
    }
    main()
</script>

3.Proxy对象代理

这个就是表面意思，使用一个对象去代替另一个对象进行一些操作，主要用于框架的封装比如VUE3，vue2中用的就是Object.defineProperty()也是数据渲染的底层。
举例说吧，我们有一个数据存储在对象中，我们想把这个数据渲染到页面很简单，但是我们需要做到当修改数据的时候页面中显示也跟着改变，听起来是不是很熟悉没错就是vue中的双向绑定数据的原理。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    //编写一个对象，把对象的属性显示到页面上，再进行对对象的属性修改时页面跟随变化
    const obj = {
        name: '一号',
        age: 18
    }
    const container = document.getElementById('container');
    // console.log(container);
    // textContent和innerHTML类似
    //我们现在对obj.name修改发现修改后页面并不变化需要从新渲染
    //obj.name = '二号'; //虽然数据变了，但是页面没有变化需要从新渲染
    //container.textContent=obj.name; //从新渲染才可以
    //第二种 使用代理Proxy
    //我们使用代理就可以解决这个问题
    //两个参数 第一个 代理的哪一个对象，第二个一个对象包含函数
    const p1 = new Proxy(obj, {
        get(target, property, receiver) {
            // 数据对象 属性名   Proxy实例
            //获取的时候
            //obj[property] 就是获取对象中的所有属性
            return obj[property]
        },
        set(target, property, value, receiver) {
            // 数据对象 属性名  修改的值 Proxy实例
            //修改的时候
            obj[property] = value
            container.textContent = obj.name;
        }
    })
    console.log(p1.name);
    p1.name='三号'
</script>

</html>